微信掃一掃功能JSSDK的使用

1.引入微信JSSDK

綁定域名
在公眾號后台“設置—公眾號設置—功能設置—JS接口安全域名”設置域名。

2.引入JS文件

有2種引入方式:
(1)在需要調用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js
(2)使用 AMD/CMD 標准模塊加載方法加載，在項目路徑下執行“npm i -S weixin-js-sdk”安裝依賴的包。然后在頁面里按照路徑按裝依賴的位置，使用“import wx from 'weixin-js-sdk'語句”引入。

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

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

config里的appId，timestamp，nonceStr，signature均有前端傳給后台一個要使用JSSDK的當前頁路由傳遞給后台，后台按照簽名生成算法返回對應參數值。注意簽名用的url必須是調用JS接口頁面的完整URL，如果是動態的可以通過以下語句獲取。注意不要對url進行encodeURIComponent編碼，微信在附錄里提到要對url進行編碼，但我在項目里編碼后會提示“invalid signature”簽名錯誤。不編碼就能拿到正常的簽名，我目前也沒找到原因。其它簽名錯誤原因可以按照開發文檔-附錄5常見錯誤及解決方法來一一排除。

var url=window.location.href.split('#')[0];

生成jsApiList寫上當前頁面要使用的接口名稱，比如微信的掃一掃功能接口名為“scanQRCode”，如需要其它接口則可以按需配置。
傳送門:所有JS接口列表

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

wx.ready(function(){
    // config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
});

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

wx.error(function(res){
    // config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這里更新簽名。    
});

6.調起掃一掃接口

 wx.scanQRCode({
                needResult: 1,
                desc: 'scanQRCode desc',
                success: function(res) {
                var result = res.resultStr; // 當needResult 為 1 時，掃碼返回的結果

                if (typeof(result) != 'undefined') {
                       if (result.indexOf(",") > 0) {
                                    result = result.split(',')[1];
                                    result = result.replace(/[^a-z\d]/ig, "");
                                }
                                _self.$router.push({
                                    name: 'BrandIntroduction',
                                     params:{
                                      traceCode: result
                                    }
                                })
                            }
                        }
                    });

我們的業務需要掃碼后拿到 res.resultStr后，調轉項目的某個頁面，所以needResult設為1。如果needResult設置為0掃碼成功后微信處理，不會跳轉到自己寫的success回調里面。