vue中使用微信sdk实现扫码
2019-10-31 本文已影响0人
TerdShow
1.微信公众号平台绑定安全域名,注意不要加协议名;
2.安装微信sdk
npm install weixin-js-sdk --save
3.引入
import wx from "weixin-js-sdk"
4.点击事件,触发微信扫码
handleScan() {
this.bus.$emit("loading", true);
let _this = this;
getWechatSignature(function(res){
if(res.data.code == 0){
//配置参数由后台提供
wx.config({
debug: true,
appId: res.data.data.appid,
timestamp: res.data.data.timestamp,
nonceStr: res.data.data.noncestr,
signature: res.data.data.signature,
jsApiList: ["scanQRCode"]
});
}else{
Toast(res.data.msg);
}
});
wx.ready(function(){
wx.checkJsApi({
jsApiList: ["scanQRCode"],//使用的api
success: function(res) {
if (res.checkResult.scanQRCode === true) {
wx.scanQRCode({
needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ["qrCode"],//扫码类型
success: function(res) {
const urlCode = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
const qrCodeStr = this.getQueryString(
"serviceCenterCode",
"?" + urlCode.split("?")[1]
);
const qrCodeInfo = this.getQueryString(
"info",
"?" + urlCode.split("?")[1]
);
if (qrCodeStr == null) {
Toast("扫描二维码遇到问题,请重新扫描");
return false;
} else {
let data = {
dealerNo: qrCodeStr,
info: qrCodeInfo
};
getDealerInfo(data, _this.getDealerInfoCallback);
}
}
});
} else {
Toast("抱歉,当前客户端版本不支持扫一扫");
}
},
fail: function(res) {
//checkJsApiFail
}
});
})
wx.error(function (res) {
//配置验证失败
})
}