基于vue做微信公众号项目,调用微信的扫一扫接口
绑定域名(在公众号设置js接口安全域名);在微信公众号平台中配置安全域名: 公众号设置 - 功能设置 - JS接口安全域名域名规则:例:https://admin.serve.com.cn;填写:serve.com.cn;微信jssdk config:invalid signature 签名错误 ,就是域名没配置好;引用js文件npm install weixin-js-sdk --...
·
- 绑定域名(在公众号设置js接口安全域名);
在微信公众号平台中配置安全域名: 公众号设置 - 功能设置 - JS接口安全域名
域名规则:例:https://admin.serve.com.cn;填写:serve.com.cn;
微信jssdk config:invalid signature 签名错误 ,就是域名没配置好; - 引用js文件
npm install weixin-js-sdk --save
调用扫一扫的组件里面引用
3.获取微信签名以及其他需要
methods: {
//点击上传扫描图片
uploadScan(){
//扫描的接口,扫描成功,我设置active为1,而且,扫描的div消失,上传药盒图片的div显示
const that = this
wx.scanQRCode({
needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
success: function (res) {
console.log(res.resultStr,'扫描的结果~')
const result = res.resultStr.split(',')[1]; // 当needResult 为 1 时,扫码返回的结果 scanCode
that.scanCode = result
that.$toast('您扫描成功,追溯码为' + result);
that.uploadScanCode(result)
},
error:function(response){
that.$toast(response);
}
});
},
getCofig(){
const that = this
const url = (window.location.href).split('#')[0]
console.log(window.location.href,'这个是获取当前扫描的完整url~')
axios.get(api.getTikect+'?url='+window.location.href)
.then(function (res) {
if(res.data.code == '200'){
console.log(res.data.data,'这个是获取调用扫描返回的参数?~~')
//微信 的配置~~
that.wxConfig(res.data.data.appid, res.data.data.timestamp,res.data.data.nonceStr, res.data.data.signature)
}else{
that.$toast(res.data.message)
}
})
.catch(function (error) {
console.log(error);
});
},
//wx.config的配置
wxConfig(appId,timestamp,nonceStr,signature){
wx.config({
debug: false, // 开启调试模式,
appId: appId, // 必填,企业号的唯一标识,此处填写企业号corpid
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature,// 必填,签名,见附录1
jsApiList: ['scanQRCode','checkJsApi','translateVoice'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.error(function (res) {
alert("出错了:" + res.errMsg);//这个地方的好处就是wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
});
},
},
5、具体的案列就如以上的了,扫描完成之后,就可以拿到扫描的结果了,
注意:如果参数都正确,还是报了"errMsg": “config:invalid signature”,那么很有可能是因为微信的缓存原因,可以把微信关掉,再重新进去项目里面,就可以正常操作了
更多推荐
已为社区贡献1条内容
所有评论(0)