一、vue引入weixin-js-sdk(yarn或npm)
代碼的寫法都是一樣的(網上隨便找一個,例如https://www.jb51.net/article/159960.htm)
jsApiList裏必須要寫上自己要調用的接口名,例如
wx.config({
debug: true, // 開啓調試模式
appId: '.......',
timestamp: response.data.timestamp, // 必填,生成簽名的時間戳
nonceStr: response.data.nonceStr, // 必填,生成簽名的隨機串
signature: response.data.signature, // 必填,簽名
jsApiList: ['scanQRCode']
// jsApiList: ['getLocation', 'chooseImage', 'hideOptionMenu', 'checkJsApi', 'chooseWXPay', 'closeWindow', 'scanQRCode']
// 必填,需要使用的JS接口列表
})
1、有說url參數出的問題,事實上location.href.split('#')[0]是不會騙人的
要在公衆號調試,參數會多code和state,state是空值的
2、還有說後端簽名錯誤,要是後端代碼寫錯了那都太好排查了,可以在這裏驗證
http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
結果我們後端的簽名的算法驗證沒有問題
3、最後懷疑是服務器域名配置的問題,運維查了一下是https的證書錯了
想必這個問題大家一般不會遇到,證書未及時替換掉
二、大家可以嘗試下官方的案例http://demo.open.weixin.qq.co...,把這個地址的代碼扒下來嘗試一下
出現config:invalid signature分析:
1、jq和sdk的引入最好放到頁面加載比較早的位置,如head標籤裏
2、ajax異步改爲同步就可以了(async: false)
$.ajax({
type: "get",
url: basePath + config, //後端接口
async: false,
dataType: "json",
data: {
page: location.href.split('#')[0]
},
success: function (datas) {
var datas=JSON.parse(datas);
if (datas.status == 100) {
var req = datas.data;
var signature = req.signature;
var timestamp = req.timestamp;
var nonceStr = req.nonceStr;
wx.config({
debug: true,
appId: 'wxa9f902f87a88c0df',
timestamp: timestamp,
nonceStr: nonceStr,
signature: signature,
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'translateVoice',
'startRecord',
'stopRecord',
'onVoiceRecordEnd',
'playVoice',
'onVoicePlayEnd',
'pauseVoice',
'stopVoice',
'uploadVoice',
'downloadVoice',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType',
'openLocation',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'closeWindow',
'scanQRCode',
'chooseWXPay',
'openProductSpecificView',
'addCard',
'chooseCard',
'openCard'
]
});
// 通過ready接口處理成功驗證
wx.ready(function () {
alert("初始化成功!");
});
wx.error(function () {
alert("初始化失敗!");
});
}
}
});