1. 引入jssdk
在需要調用JS接口的頁面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.6.0.js
如需進一步提升服務穩定性,當上述資源不可訪問時,可改訪問:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)。
備註:支持使用 AMD/CMD 標準模塊加載方法加載
//安裝
npm install weixin-js-sdk --save
//引入
import wx from 'weixin-js-sdk';
2. 通過config接口注入權限驗證配置
第一步:獲取當前頁面的url( 作爲請求接口的參數,從後臺換取 config 驗證配置的參數值 )
第二步:檢查當前微信版本是否支持指定 JS 接口,支持批量判斷
第三步:引入掃一掃 API ( wx.scanQRCode() )
具體實例如下:
getscanQRCode(){
var that = this;
var _url = window.location.href;
Api.ajax({
key: "getSignatureUrl",
type: "GET",
data: {
url:_url
}
}).then(res => {
wx.config({
debug: false, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時纔會打印。
appId: res.appId, // 必填,公衆號的唯一標識
timestamp: res.timestamp, // 必填,生成簽名的時間戳
nonceStr: res.nonceStr, // 必填,生成簽名的隨機串
signature: res.signature,// 必填,調用js簽名,
jsApiList: ['checkJsApi', 'hideOptionMenu','scanQRCode'] // 必填,需要使用的JS接口列表,這裏只寫掃一掃的
});
wx.ready(function(){
// 1 判斷當前版本是否支持指定 JS 接口,支持批量判斷
wx.checkJsApi({
jsApiList : ['scanQRCode'],
success : function(res) {
// alert('檢查結果',res)
// 以鍵值對的形式返回,可用的api值true,不可用爲false// 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
if (res.checkResult.scanQRCode == false) {
alert('你的微信版本太低,不支持微信JS接口,請升級到最新的微信版本!');
return;
}
}
});
wx.hideOptionMenu();
wx.scanQRCode({
needResult: 1,
scanType: [ 'qrCode','barCode' ],
success: function (res) {
alert('掃碼調起返回結果',res)
},
cancel:function(res){
console.log(res)
}
});
})
},res => {
// console.log(res)
});
}