微信公眾號開發紀要(4)-調用微信掃一掃功能

在微信公眾號頁面中調用微信掃一掃功能，就是調用微信JS-SDK。讓JS-SDK完成調用攝像頭掃描，然后我們將掃描結果進行業務操作。微信JS-SDK是微信公眾平臺面向網頁開發者提供的基于微信內的網頁開發工具包。通過使用微信JS-SDK，網頁開發者可借助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信用戶提供更優質的網頁體驗。如何調用微信JS-SDK，在微信公眾平臺技術文檔中的微信網頁開發——》微信JS-SDK說明文檔中有詳細說明。調用微信JS-SDK需要五個步驟。

步驟一：綁定域名

步驟二：引入JS文件

步驟三：通過config接口注入權限驗證配置

步驟四：通過ready接口處理成功驗證

步驟五：通過error接口處理失敗驗證

1、綁定域名

先登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。

備注：登錄后可在“開發者中心”查看對應的接口權限。

點擊提交后，會彈出配置成功的提示。這里特別提醒注意：填寫域名時，不要帶http:// 。 只要你帶了，步驟三的權限驗證肯定報錯。會報URL配置的錯誤。

2、引入JS文件

在需要調用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js

備注：支持使用 AMD/CMD 標準模塊加載方法加載

3、通過config接口注入權限驗證配置

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用（同一個url僅需調用一次，對于變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。

wx.config({
    debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
    appId: '', // 必填，公眾號的唯一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

這個配置信息可以寫在一個ajax內，在進入頁面時首先執行，在后臺將對應的信息全部獲取，再返回給前端。

前端頁面代碼：

$.ajax({
    type:"post",
    url:"這里寫你自己的請求地址”,
    data:{},
    success:function(data){
        var result = $.parseJSON(data);
      wx.config({         
          debug: true,
          appId: result.appId,                           //公眾號的唯一標識
          timestamp: ""+result.timestamp,    //生成簽名的時間戳
          nonceStr:result.noncestr,                  //生成簽名的隨機串
           signature:result.signature,              //簽名
           jsApiList : [ 'scanQRCode' ]   //需要使用的JS接口列表(我只需要調用掃一掃的接口，如有多個接口用逗號分隔)
          });
      }
});

后端代碼就是生成簽名。如何生成簽名，微信公眾號已經給出了官方例子。照著官方例子打一遍代碼就行了。下載地址：http://demo.open.weixin.qq.com/jssdk/sample.zip。

這里特別強調的事情：生成簽名的url一定是你調用JSSDK的頁面url，不能是以前的URL。因為我后端是用springmvc實現的，寫的時候沒有重定向。雖然頁面到了調用頁面但URL還是原來的，所以總是報簽名錯誤。測了很多次，才改過來。

4、通過ready接口處理成功驗證

wx.ready(function(){
    // config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，
    //config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，

    //  則須把相關接口放在ready函數中調用來確保正確執行。對于用戶觸發時才調用的接口，
    //則可以直接調用，不需要放在ready函數中。
});

因為我是加載頁面就調用微信掃一掃，所以將相關接口就放在了ready函數中。

  wx.ready(function() {
        document.querySelector('#scan').onclick = function() {
            wx.scanQRCode({
                needResult: 1,   // 默認為0，掃描結果由微信處理，1則直接返回掃描結果，
                scanType: ["qrCode","barCode"], // 可以指定掃二維碼還是一維碼，默認二者都有
                success: function(res) {         

               //res.resultStr可以獲得掃描結果。這里寫自己的業務操作代碼}
            });
        }
    });

5、通過error接口處理失敗驗證

wx.error(function(res){
    // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，
    //具體錯誤信息可以打開config的debug模式查看，

     //也可以在返回的res參數中查看，對于SPA可以在這里更新簽名。
});

wx.error(function(res) {
    alert("出錯了：" + res.errMsg);//這個地方的好處就是wx.config配置錯誤，會彈出窗口哪里錯誤，然后根據微信文檔查詢即可。
});

終于大功告成。最后附上微信公眾號關于JSSDK調用的示例DEMO。

DEMO頁面：http://demo.open.weixin.qq.com/jssdk