30分鐘作一個二維碼名片應用，有源碼！

前言

    30分鐘帶你用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）UI2systemconfig目錄下的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，而不能寫相對路徑，微信可不認你的相對路徑。

通過這麼一輪，終於在微信中能看到咱們上架的應用了，可是，咱們連服務器都尚未啊親！如今只是用本地電腦作服務器而已。

二維碼名片的應用就介紹到這裏啦，碼字不易，隨手點贊哈！