vue.js中使用微信扫一扫解决invalid signature问题

这篇文章主要介绍了vue.js中使用微信扫一扫解决invalidsignature问题(推荐),本文通过实例代码给出解决方法,代码简单易懂非常不

这篇文章主要介绍了vue.js中使用微信扫一扫解决invalid signature问题(推荐),本文通过实例代码给出解决方法,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

1、点击按钮,实现微信扫一扫功能:

<template>

<a class=”btn” @click=”scan”>扫一扫</a>

</template>

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 微信扫一扫内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持本网站!

WordPress主题下载,WordPress免费主题下载,网站源码模板下载


下载说明:
1. 本站所有资源来源于网络和用户上传,如有侵权请联系站长
2. 本站分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

本站的资源均来自于互联网,仅为资源共享、学习参考之目的,其版权均归原作者及其网站所有,如有侵权请留言联系:admin,转转请注明出处:http://zhanmr.com/5980.htm

发表评论

电子邮件地址不会被公开。 必填项已用*标注