微信公眾號開發調用微信第三方接口（掃一掃為例）

現在前端多數都是單頁面開發，下面以vue項目為例介紹一下在vue中使用微信js-sdk的方法，以及遇到的坑

下面根據官方api介紹一下關鍵步驟：

1. 綁定域名（在公眾號設置js接口安全域名）
2. 引入js文件，http://res.wx.qq.com/open/js/jweixin-1.2.0.js
3. 通過config接口注入權限驗證配置
4. 通過ready接口處理成功驗證
5. 通過error接口處理失敗驗證（還沒用到）

步驟一：綁定域名

如圖所示，必須將txt文件放在web服務器路徑目錄下才能保證成功調用。

步驟二：引入js文件

單頁面應用支持以模塊化的方式引用，非單頁面應用支持在當前頁面直接通過script標簽的方式引用

• 安裝依賴 npm i -S weixin-js-sdk
• 引用 import wx from 'weixin-js-sdk'
• <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

步驟三：通過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接口列表
});

簽名算法及接口列表詳見微信官方文檔

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

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

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

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

在實際項目中的應用

• 首先調用后端接口獲取簽名（_signature），公眾號的唯一標識（_appid）,生成簽名的時間戳（_timestamp）,生成簽名的隨機串（_nonceStr）。

this.$ajax({
   url:this.$api.getWechatSign,
   method:"post",
   data:{
         "url": location.href.split("#”)[0] 
    }       
}).then((res) => {
   this.wxConfig(res.data.appid,res.data.timestamp,res.data.nonceStr,res.data.signature) //以vue為例，在method中寫的方法在這里調用
})

• 獲取簽名驗證身份

wxConfig(_appid,_timestamp,_nonceStr,_signature){
  var that = this;
  wx.config({ 
      debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。   
      appId: data.appId, // 必填，公眾號的唯一標識
      timestamp: data.timestamp, // 必填，生成簽名的時間戳
      nonceStr: data.nonceStr, // 必填，生成簽名的隨機串
      signature: data.signature,// 必填，簽名，見附錄1
      jsApiList: [
                  'checkJsApi',
                  'startRecord',
                  'stopRecord',
                  'translateVoice',
                  'scanQRCode',// 微信掃一掃接口
                  'openCard'
                  ] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2 
  }); 
  wx.error(function(res) {
      alert("出錯了：" + res.errMsg);//這個地方的好處就是wx.config配置錯誤，會彈出窗口哪里錯誤，然后根據微信文檔查詢即可。
  });
  
  wx.ready(function() {
      wx.checkJsApi({
          jsApiList : ['scanQRCode'],
          success : function(res) {

          }
      });
  });
},

scanCode(){//頁面點擊掃碼按鈕
    wx.scanQRCode({
        needResult : 1, // 默認為0，掃描結果由微信處理，1則直接返回掃描結果，
        scanType : [ "qrCode","barCode"], // 可以指定掃二維碼還是一維碼，默認二者都有
        success : function(res) {
            var result;
            if(/,/.test(res.resultStr)){
                result = res.resultStr.split(',')[1]; // 當needResult 為 1 時，掃碼返回的結果
            }else{
                result = resultStr;
            }
        },
        fail : function(){
            console.log('出錯了');
        }
    });
}

常見錯誤

config:invalid signature

解決辦法

“當前網頁的地址”，一定是你寫的不對，這里必須寫去掉參數的本網頁地址