vue.js中如何使用微信扫一扫解决invalidsignature问题
这篇文章主要为大家展示了vue.js中如何使用微信扫一扫解决invalid signature问题，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。
创新互联-专业网站定制、快速模板网站建设、高性价比湛河网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式湛河网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖湛河地区。费用合理售后完善，十年实体公司更值得信赖。
1、点击按钮，实现微信扫一扫功能：
2、使用config接口注入配置信息，wx.config调用方法如下：
（其中appId,timestamp,nonceStr,signature必须从后台获取，传参当前网页的URL，不包含#及其后面部分，location.href.split('#')[0]获取）
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳，精确到秒
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [] // 必填，需要使用的JS接口列表，例如：['chooseImage','previewImage','uploadImage']
})3、通过ready接口处理成功验证
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});4、完整代码如下：
export default {
data() {
return {
}
},
methods: {
init(){
let url = location.href.split('#')[0];//这里的参数fullUrl是当前页面的完整url(除去#后面部分)
this.$axios.get("/api/wx/jsdk/config",{params:{
url:url
}}).then(res => {
if(res.success){
window.wx.config({
debug: false,
appId: res.data.appId, // 必填,公众号的唯一标识
timestamp: res.data.timeSpan, // 必填,生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.sinature, // 必填,签名
jsApiList: ['checkJsApi', 'scanQRCode'] // 必填,需要使用的JS接口列表
})
}else{
alert(res.msg);
}
})
},
scan(){
window.wx.ready(function() {
wx.checkJsApi({
jsApiList : ['scanQRCode'],
success : function(res) {
if (res.checkResult.scanQRCode === true) {
wx.scanQRCode({ // 微信扫一扫接口
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
success: function (res) {
let result = res.resultStr // 当needResult 为 1 时，扫码返回的结果
window.location.href = result;//此处扫码结果直接跳转链接
}
})
} else {
alert('抱歉，当前客户端版本不支持扫一扫')
}
},
fail: function (res) { // 检测getNetworkType该功能失败时处理
alert('fail' + res)
}
});
});
window.wx.error(function(res) {
alert("出错了：" + res.errMsg);//这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
});
}
},
mounted() {
this.init();
}
}以上就是关于vue.js中如何使用微信扫一扫解决invalid signature问题的内容，如果你们有学习到知识或者技能，可以把它分享出去让更多的人看到。
当前标题：vue.js中如何使用微信扫一扫解决invalidsignature问题
文章转载：http://cdiso.cn/article/jdpcjc.html
