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

如今前端多數都是單頁面開發，下面以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

解決辦法

「當前網頁的地址」，必定是你寫的不對，這裏必須寫去掉參數的本網頁地址