基于vue做微信公众号项目调用微信的扫一扫接口-微信扫一扫开发-微信小程序扫一扫功能-即速应用

基于vue做微信公众号项目调用微信的扫一扫接口-微信扫一扫开发-微信小程序扫一扫功能

浏览量：2325 时间：2020-04-06 来源：chantel186

绑定域名（在公众号设置js接口安全域名）；在微信公众号平台中配置安全域名:公众号设置-功能设置-JS接口安全域名域名规则：例:https://admin.serve.com.cn；填写：serve.com.cn；微信jssdkconfig:invalidsignature签名错误,就是域名没配置好；引用js文件npminstallweixin-js-sdk--save1.
调用扫一扫的组件里面引用
2.
3.获取微信签名以及其他需要
methods:{//点击上传扫描图片uploadScan(){//扫描的接口，扫描成功，我设置active为1，而且，扫描的div消失，上传药盒图片的div显示constthatthiswx.scanQRCode({needResult:1,//默认为0，扫描结果由微信处理，1则直接返回扫描结果，scanType:["qrCode","barCode"],//可以指定扫二维码还是一维码，默认二者都有success:function(res){console.log(res.resultStr,'扫描的结果~')constresultres.resultStr.split(',')[1];//当needResult为1时，扫码返回的结果scanCodethat.scanCoderesultthat.$toast('您扫描成功，追溯码为'+result);that.uploadScanCode(result)},error:function(response){that.$toast(response);}});},getCofig(){constthatthisconsturl(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,//必填，企业号的唯一标识，此处填写企业号corpidtimestamp:timestamp,//必填，生成签名的时间戳nonceStr:nonceStr,//必填，生成签名的随机串signature:signature,//必填，签名，见附录1jsApiList:['scanQRCode','checkJsApi','translateVoice']//必填，需要使用的JS接口列表，所有JS接口列表见附录2});wx.error(function(res){alert("出错了："+res.errMsg);//这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。});},},3.
5、具体的案列就如以上的了，扫描完成之后，就可以拿到扫描的结果了，
4.
注意：如果参数都正确，还是报了"errMsg":“config:invalidsignature”，那么很有可能是因为微信的缓存原因，可以把微信关掉，再重新进去项目里面，就可以正常操作了