vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020-04-12 12:07
851 查看
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 微信扫一扫内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
相关文章推荐
- 解决使用vue.js路由后失效的问题
- 解决使用vue.js路由后失效的问题
- vue项目中使用pdf.js,通过解析后台base64格式文件解决跨域问题
- 使用微信内嵌H5网页解决JS倒计时失效问题
- 解决微信小程序中在其他页面无法使用app.js中获取的userInfo或openid的问题
- 解决“UIkit与Vue.js结合使用时,UIkit的图标会显示两个”的问题
- 解决使用Vue.js显示数据的时,页面闪现原始代码的问题
- 解决vue.js使用ckeditor的样式路径问题
- vue.js使用代理和使用Nginx来解决跨域的问题
- SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
- 完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
- 解决使用vue.js与ckeditor.js时,ckeditor不显示问题
- 使用node中的express解决vue-cli加载不到dev-server.js的问题
- 【TaoTao】使用JQueryJsonp 完美解决JS跨域问题
- vue.js中使用axios数据请求遇到的问题这篇文章帮你妥妥的解决
- 如何解决ecshop中jquery冲突?使用jquery.json.js代替transport.org.js中部份代码,完美解决问题。
- Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结
- 使用js解决由border属性引起的div宽度问题
- 浅析Node.js中使用依赖注入的相关问题及解决方法
- 使用jsonp完美解决跨域问题