0分鍾帶你用Wex5做一個微信公眾號上使用的二維碼名片，相應技術點有詳細講解，高清有碼！()
二維碼現在是無處不在，無孔不入了。大到一輛汽車，小到一包紙巾，身上都印有二維碼，明碼標價。敗家娘們可能會說：沒想過要買的，真心的！就是看着漂亮嘛，想拍個照片，誰知道一拍就彈出個支付界面，想按退出但是手抖了。。。（這手抖的，不知道放在菜刀下會不會穩定一點？）
作為個人信息的載體，名片也是天然適合二維碼這種形式的。今天小茄就試着用WeX5移動開發工具做一個電子的二維碼名片，除了掃碼識別外，還可以在微信里面一鍵識別並存到手機通訊錄里面，也可以通過微信分享給朋友們。拿起手機測試一下吧：
這個應用的核心就是兩個：
將個人信息轉換成二維碼；
二維碼攜帶的名片信息可被手機識別。
為了實現這個需求，我們需要用到一個名片格式：vcard，關於vcard的介紹可以參考這篇文章：二維碼名片介紹。
vcard格式生成
我們的需求比較簡單，需要將名片信息拼接成如下vcard格式：
這就是一般的字符串拼接了，這里有個問題，就是中文的展示問題，如果直接將中文拿去轉化成二維碼的話就會出現亂碼，所以我們需要將其轉換成utf-8的通用編碼格式：
然后將轉換好的字符信息拼接成vcard格式的字符串：
這段代碼有優化的空間，就交給你們去優化了哈！將上面的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();
然后，然后我們就完成了這個小應用的開發啦。
增加點玩法
由於二維碼中央位置是不保存信息的，所以可以在中間加入自己的圖像。注意調試一下不要超出范圍即可。看起來終於沒那么單調了，女生們平常加班P的照片可以排上用場啦：
黑白色的二維碼不夠選，那就變點顏色唄，按照插件的參數配置一下：
1 container.qrcode({
2 text : txt,
3 background : "#000", //背景顏色
4 foreground : "#3690ec" //前景顏色
5 });
耍酷的路上沒有終點：
既然插件已經開源了，那要做漸變顏色也是相當簡單的。首先，我們可以猜測它的實現原理，應該是整個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是運行在瀏覽器下面的。我們如果要使用微信提供的接口，比如說分享功能、二維碼功能、上傳圖片功能等，都需要用我們自己的服務器與微信服務器通訊獲取相應的權限。流程如下：
具體流程和參數配置請參考微信公眾號開發文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang=zh_CN。簡單來說就是我們的前端頁面向我們自己的服務器請求配置參數，我們的服務器接到請求之后再向微信服務器申請權限，微信把一些參數給回來之后，我們再做處理將參數給回我們的前端頁面進行配置，然后就可以使用微信客戶端的一些接口了。
這個配置看起來就那么幾步，很簡單的樣子，但其實是內藏陷阱，百度一下就可以發現到處都是坑，雖然不是什么高深的東西，但卻非常容易搞錯。幸運的是，WeX5官方已經幫我們封裝好了微信的配置模塊，只需要輸入公眾號的參數即可完成配置，着實貼心！
要修改的文件有兩個地方：
1）Baas目錄下的weixin.config.xml文件，分別輸入我們公眾號的參數並進行模型編譯。
2）UI2\system\config目錄下的config.json文件，這里也輸入我們的公眾號參數並保存。
這里的wxAppId就是公眾號的appId，要改過來。debug為調試模式開關，每次調用微信api接口都會輸出相應的調試信息，關閉了它，我們在前端調用的時候手動console輸出信息即可。
修改好之后保存並啟動Tomcat服務，做好外網映射到我們的內網機器，然后再上微信公眾平台配置。需要配置的地方有以下幾個：
1） 設置>>公眾號設置>>功能設置>>js接口安全域名，設置為你的頂級全域名，如 abc.website.com，不需要加http協議。
2） 開發>>基本配置>>服務器配置，這里的信息要和weixin.config.xml的內容對應，注意大小寫也要完全一樣。這里如果配置失敗的話，請檢查內容是否有錯，Tomcat服務是否開啟，外網是否能訪問本機。
3） 開發>>接口權限>>網頁授權獲取用戶基本信息，這里也是設置為你的頂級全域名，如 abc.website.com，不需要加http協議。
如果都配置成功的話，我們在前端頁面就可以直接使用微信的接口了。這里WeX5開發工具也幫我們封裝好了各種接口，按需加載即可。我們這里用到的是分享接口：
這里注意我們分享的鏈接不要直接寫我們的固定網址，而要用微信網頁授權請求頁面來進行分享。因為假如我們直接寫固定網址的話，分享出去的鏈接就跟公眾號沒了關聯，這樣打開分享鏈接再分享的時候，就不會調用我們寫好的鏈接格式去分享，而變成了普通網頁的分享。差異如下：
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，而不能寫相對路徑，微信可不認你的相對路徑。
經過這么一輪，終於在微信中能看到我們上架的應用了，但是，我們連服務器都還沒有啊親！現在只是用本地電腦做服務器而已。
二維碼名片的應用就介紹到這里啦，歡迎大家關注