前言

二維碼現在是無處不在,無孔不入了。大到一輛汽車,小到一包紙巾,身上都印有二維碼,明碼標價。敗家娘們可能會說:沒想過要買的,真心的!就是看著漂亮嘛,想拍個照片,誰知道一拍就彈出個支付界面,想按退出但是手抖了。。。(這手抖的,不知道放在菜刀下會不會穩定一點?)而名片,也早就使用了二維碼技術,掃一掃一鍵存到手機通訊錄里面,是手機通訊錄哦。今天小茄就試著用WeX5做一個電子的二維碼名片,除了掃碼外,還可以在微信里面一鍵識別并存到手機通訊錄里面哦。

先上效果圖

001

 

生成的二維碼掃碼即可創建通訊錄,保存下來通過微信發給朋友,通過長按二維碼識別也可以完成名片的分享。拿起手機測試一下吧:

002

這個應用的核心就是兩個:將個人信息轉換成二維碼;二維碼攜帶的名片信息可被手機識別。為了實現這個需求,我們需要用到一個名片格式:vcard,關于vcard的介紹可以參考這篇文章:http://lzw.me/a/php-qrcode-vcard.html。

vcard格式生成

我們的需求比較簡單,需要將名片信息拼接成如下vcard格式:

BEGIN:VCARD
VERSION:3.0
FN:任俠
TEL;CELL;VOICE:15201280000
TEL;WORK;VOICE:010-62100000
TEL;WORK;FAX:010-62100001
EMAIL;PREF;INTERNET:lzw#lzw.me
URL:http://lzw.me
orG:志文工作室
ROLE:產品部
TITLE:CTO
ADR;WORK;POSTAL:北京市朝陽區北四環中路35號;100101
REV:2012-12-27T08:30:02Z
END:VCARD

 

這就是一般的字符串拼接了,這里有個問題,就是中文的展示問題,如果直接將中文拿去轉化成二維碼的話就會出現亂碼,所以我們需要將其轉換成utf-8的通用編碼格式:
  1 function toUtf8(str) {
  2     var i, len, c, out = "";
  3     if (!str) {
  4         return false;
  5     }
  6     len = str.length;
  7     for (i = 0; i < len; i++) {
  8         c = str.charCodeAt(i);
  9         if ((c >= 0x0001) && (c <= 0x007F)) {
 10             out += str.charAt(i);
 11         } else if (c > 0x07FF) {
 12             out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
 13             out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
 14             out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
 15         } else {
 16             out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
 17             out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
 18         }
 19     }
 20     return out;
 21 }
然后將轉換好的字符信息拼接成vcard格式的字符串:
  1 function toVcf(person) {
  2     var vcf = {};
  3     vcf.name = person.name && 'N:' + toUtf8(person.name) + '\r\n';
  4     vcf.mobile = person.mobile && 'TEL;TYPE=WORK,VOICE:' + toUtf8(person.mobile) + '\r\n';
  5     vcf.org = person.org && 'ORG:' + toUtf8(person.org) + '\r\n';
  6     vcf.web = person.web && 'URL;WORK:' + toUtf8(person.web) + '\r\n';
  7     vcf.adr = person.adr && 'ADR;TYPE=WORK,PREF:' + toUtf8(person.adr) + ';\r\n';
  8     vcf.email = person.email && 'EMAIL;PREF;INTERNET:' + toUtf8(person.email) + '\r\n';
  9     vcf.tel = person.tel && 'TEL;TYPE=WORK,VOICE:' + toUtf8(person.tel) + '\r\n';
 10     vcf.title = person.title && 'TITLE:' + toUtf8(person.title) + '\r\n';
 11     return 'BEGIN:VCARD\r\nVERSION:3.0\r\n' + vcf.name + vcf.mobile + vcf.org +
 12             vcf.email + vcf.web + vcf.adr + vcf.tel + vcf.title + 'END:VCARD'
 13 }
這段代碼有優化的空間,就交給你們去優化了哈!將上面的vcard格式字符串放入到二維碼中,即可實現我們的需求。

 

轉換二維碼

 

字符串轉二維碼的軟件很多,算法介紹也不少,web開發中應用比較多的是jQuery的qrcode插件:https://github.com/jeromeetienne/jquery-qrcode,我們按照WeX5的require規范引用即可。
  1 require("jquery.qrcode.min.js");
  2 container.qrcode({
  3     text : txt
  4 });
創建二維碼的方法如上:container為上文定義的二維碼容器,由于默認二維碼的尺寸是256*256,容器的尺寸要比二維碼大;text為需要放入二維碼中的字符串。插件也提供了更多的設置參數:
  1 render   : "canvas",   //設置渲染方式,還有以table方式渲染  
  2 width       : 256,     //設置寬度  
  3 height      : 256,     //設置高度  
  4 typeNumber  : -1,      //計算模式  
  5 correctLevel    : QRErrorCorrectLevel.H,//糾錯等級  
  6 background      : "#ffffff",//背景顏色  
  7 foreground      : "#000000" //前景顏色  

默認的渲染方式為canvas,也就是會生成一個canvas元素,tabel方式是使用表格排出一個二維碼,效率較低。當然,咱們用的是高效的canvas。

但是canvas生成的不是圖片,在微信中長按也是不會被識別出來的,所以需要將canvas轉換成圖片格式。canvas轉換成圖片的API也有幾種,這里我用的是簡單粗暴的 toDataURL(“image/png”)方法。

  1 var imgSrc = $('canvas').hide()
[0].toDataURL("image/png"); 2 $('.cd-img').attr("src", imgSrc);

如果jQuery用的不多的話可能會出點小問題,要注意jQuery都是對元素數組進行操作,而具體的方法如toDataURL(“image/png”)則是元素的方法,所以需要指定下標 0。還有一點需要注意的就是用戶可能會修改,所以每次生成二維碼前都要記得進行一次canvas的清理:$(‘canvas’).remove();

然后,然后我們就完成了這個小應用的開發啦。

增加點玩法

由于二維碼中央位置是不保存信息的,所以可以在中間加入自己的圖像。注意調試一下不要超出范圍即可??雌饋斫K于沒那么單調了,女生們平常加班P的照片可以排上用場啦:

004-1

黑白色的二維碼不夠選,那就變點顏色唄,按照插件的參數配置一下:

  1 container.qrcode({
  2     text : txt,
  3     background : "#000",  //背景顏色  
  4     foreground : "#3690ec"   //前景顏色 
  5 });

005

??岬穆飞蠜]有終點:

003

既然插件已經開源了,那要做漸變顏色也是相當簡單的。首先,我們可以猜測它的實現原理,應該是整個canvas被劃分成很多小塊,再分別對這些小塊繪制前景色背景色,橫豎兩個循環下來就可以得到完整的二維碼了。那顯然,只要我們控制畫筆的前景或者背景色做漸變就可以得到漸變效果了。要改源碼,那就不能用壓縮版了,這里我們引入兩個源文件,然后修改jquery.qrcode.js這個文件。

在var createCanvas = function() 函數內,找到設置畫筆的語句:

  1 ctx.fillStyle = qrcode.isDark(row, col) ? options.foreground : options.background;

這個語句很好懂,就是判斷這個小塊的值去采用前景色或者背景色繪制,在這句語句之前加入一句:

  1 options.foreground = qrcode.isDark(row, col) ? 'hsla(' + (row * 2) + ', 100%, 40%, 1)' : options.foreground;

這里采用的是hsla格式的顏色來控制漸變,一般來說所有的顏色漸變都適合用hsla格式,只控制色調變化既可實現漸變,相當好用。

到這里就完成了二維碼名片應用的本地開發啦,下面來看看如何將它做成一個可以在微信內傳播的公眾號應用吧。

微信公眾號應用

微信公眾號應用可以是微信聯系人那樣的消息應答服務,也可以是一般的web app,我們的二維碼名片就是web app的形式。這個微信公眾號應用跟普通的web app的不同就是,公眾號應用是運行在微信客戶端的,而平常的web app是運行在瀏覽器下面的。我們如果要使用微信提供的接口,比如說分享功能、二維碼功能、上傳圖片功能等,都需要用我們自己的服務器與微信服務器通訊獲取相應的權限。流程如下:

1

具體流程和參數配置請參考微信公眾號開發文檔:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang=zh_CN。簡單來說就是我們的前端頁面向我們自己的服務器請求配置參數,我們的服務器接到請求之后再向微信服務器申請權限,微信把一些參數給回來之后,我們再做處理將參數給回我們的前端頁面進行配置,然后就可以使用微信客戶端的一些接口了。

這個配置看起來就那么幾步,很簡單的樣子,但其實是內藏陷阱,百度一下就可以發現到處都是坑,雖然不是什么高深的東西,但卻非常容易搞錯。幸運的是,wex5官方已經幫我們封裝好了微信的配置模塊,只需要輸入公眾號的參數即可完成配置,著實貼心!

要修改的文件有兩個地方:

1)Baas目錄下的weixin.config.xml文件,分別輸入我們公眾號的參數并進行模型編譯。

006? 007

2)UI2\system\config目錄下的config.json文件,這里也輸入我們的公眾號參數并保存。

008?009

這里的wxAppId就是公眾號的appId,要改過來。debug為調試模式開關,每次調用微信api接口都會輸出相應的調試信息,關閉了它,我們在前端調用的時候手動console輸出信息即可。

修改好之后保存并啟動Tomcat服務,做好外網映射到我們的內網機器,然后再上微信公眾平臺配置。需要配置的地方有以下幾個:

1) 設置>>公眾號設置>>功能設置>>js接口安全域名,設置為你的頂級全域名,如 abc.website.com,不需要加http協議。

2) 開發>>基本配置>>服務器配置,這里的信息要和weixin.config.xml的內容對應,注意大小寫也要完全一樣。這里如果配置失敗的話,請檢查內容是否有錯,Tomcat服務是否開啟,外網是否能訪問本機。
3) 開發>>接口權限>>網頁授權獲取用戶基本信息,這里也是設置為你的頂級全域名,如 abc.website.com,不需要加http協議。

如果都配置成功的話,我們在前端頁面就可以直接使用微信的接口了。這里WeX5也幫我們封裝好了各種接口,按需加載即可。我們這里用到的是分享接口:

  1 var base = require("$UI/system/api/native/base");
  2 var share = require("$UI/system/api/native/share");
  3 
  4 // 分享給微信好友
  5 share.onMenuShareAppMessage({
  6     title : '我的二維碼名片',
  7     desc : '長按二維碼識別,一鍵將我的名片存到手機通訊錄,還可以在線制作名片分享給朋友們',
  8     link : shareUrl,
  9     imgUrl : imgUrl,
 10     success : function(res) {
 11         // 用戶確認分享后執行的回調函數
 12         console.log('分享給朋友成功!');
 13     },
 14     cancel : function(res) {
 15         // 用戶取消分享后執行的回調函數
 16         console.log('取消分享!');
 17     }
 18 });

這里注意我們分享的鏈接不要直接寫我們的固定網址,而要用微信網頁授權請求頁面來進行分享。因為假如我們直接寫固定網址的話,分享出去的鏈接就跟公眾號沒了關聯,這樣打開分享鏈接再分享的時候,就不會調用我們寫好的鏈接格式去分享,而變成了普通網頁的分享。差異如下:

010

Link 應該是這樣的:https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

具體參數請看微信公眾平臺開發文檔 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842&token=&lang=zh_CN,注意重定向的鏈接需要進行url轉碼。圖片鏈接也需要寫完整url,而不能寫相對路徑,微信可不認你的相對路徑。

經過這么一輪,終于在微信中能看到我們上架的應用了,但是,我們連服務器都還沒有啊親!現在只是用本地電腦做服務器而已。

一鍵部署之cloudx5

最新消息:起步科技已經推出了基于Docker容器技術的cloudx5云平臺,親們只需要注冊個賬號就能一鍵部署到云上了,服務器什么的,byebye!

使用非常簡單,參考官網傻瓜式操作:http://docs.wex5.com/about-cloudx5/ 云時代,就要用最云的方式去開發云上應用!

二維碼名片的應用就介紹到這里啦,碼字不易,隨手點贊哈!

 

–來自Wex5開發者小茄,需要源碼的同學請留言郵箱!