調用微信公眾平台掃一掃示例及解決接口報錯 { "errMsg": "config:invalid signature" }

一、解決報錯問題

單從報錯信息 invalid signature 就可以看出是 簽名signature 有問題，

 

查了很多資料，終於知道了問題點，

后台讓我直接調接口是不對的，簽名是根據請求接口的頁面url來生成的，所以url要動態地傳給后台，而且這個頁面url還要除去'#'hash部分，可用 location.href.split('#')[0] 獲取,需不需要 encodeURIComponent 進行編碼詢問后台，有的需要有的不需要。

eg:

 var pageUrl ={ url:(window.location.href).split('#')[0] }; $.ajax({ url:"/get-sign"+"?action=get_sign_package", type:"post", data:pageUrl, success:function(data){ var params = JSON.parse(data); /*配置 wx.config 參數*/ wx.config({ debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
                appId: params.appId, // 必填，企業號的唯一標識，此處填寫企業號corpid
                timestamp: params.timestamp, // 必填，生成簽名的時間戳
                nonceStr: params.nonceStr, // 必填，生成簽名的隨機串
                signature: params.signature,// 必填，簽名，見附錄1
 jsApiList: [ 'checkJsApi', 'scanQRCode' ] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
 }); } });

經過上述修改，就能成功取到需要的參數。

二、調用微信掃一掃

經過上面成功配置微信參數，你就可以在你想使用微信接口的地方直接使用了，以掃一掃為例：

 

wx.ready(function(){ wx.checkJsApi({ //判斷當前客戶端版本是否支持指定JS接口
 jsApiList: [ 'scanQRCode' ], success: function (res) {// 以鍵值對的形式返回，可用true，不可用false。如：{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}
                if(res.checkResult.scanQRCode != true){ alert('抱歉，當前客戶端版本不支持掃一掃'); } }, fail: function (res) { //檢測getNetworkType該功能失敗時處理
                alert('checkJsApi error'); } }); }); /*處理失敗驗證*/ wx.error(function (res) { alert("share error: " + res.errMsg); });

 

如果是事件觸發調用接口的話，就把對應調用寫在事件里面：

$(document).on('click','#scanQRCode',function(){ wx.scanQRCode({ needResult: 1, // 默認為0，掃描結果由微信處理，1則直接返回掃描結果，
            scanType: ["qrCode","barCode"], // 可以指定掃二維碼還是一維碼，默認二者都有
            success: function (res) { scanSuc(res); // 掃描成功的回調函數
 }, error: function(res){ if(res.errMsg.indexOf('function_not_exist') > 0){ alert('版本過低請升級') } } }); });