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项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码。单纯的h5网页不涉及真机
vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码. 单纯的h5网页不涉及真机 demo链接前端同学可以加我一起交流一起进步案例描述:需求是生成条形码并且在vue项目中实现扫一扫功能 ...
在js中调用微信的扫描二维码功能
在js中调用微信的扫描二维码功能* 关键代码 <html> <head>`在这里插入代码片`<title>js调用微信扫一扫功能测试</title>&l ...
uni-app(Vue.js)创建运行微信小程序
uni-app(Vue.js)创建运行微信小程序 1.全局安装 npm install -g @vue/cli 需要安装node,官方网站,否则提示npm不可用 2.创建uni-app 新建文件夹,选 ...
echarts怎么用在php,在Vue.JS中怎样使用echarts
这次给大家带来在Vue.JS中怎样使用echarts,在Vue.JS中使用echarts的注意事项有哪些,下面就是实战案例,一起来看一下. 上篇文章给大家介绍了在 webpack 中使用 EChar ...
Vue.js中的MVVM
MVVM的理解 MVVM拆开来即为Model-View-ViewModel,有View,ViewModel,Model三部分组成.View层代表的是视图.模版,负责将数据模型转化为UI展现出来.Mod ...
vue.js中mock本地json数据
vue.js中mock本地json数据新版本的vue项目中已经将dev-server.js,dev-client.js两个js文件合并到了webpack.dev.conf.js文件中,以下分别是新旧 ...
VUE.js 中取得后台原生HTML字符串原样显示问题
今天使用vue调试页面,发现了页面上的一个问题,后台数据传过来的HTML字符串并没有被转换为正常的HTML代码,一拍脑门,发现忘记转换了,于是满心欢喜加上了{{{}}}.但是之后构建发现报错: 为此去 ...
php动态写入vue,Vue.js中使用动态组件的方法
本文介绍了如何在Vue.js中引用组件中的HTML元素.您可以通过使用Vue路由器或创建动态组件来切换视图或组件模板. Vue路由器用于在DOM中的视图或组件模板之间导航.要使用Vue路由器,请在ro ...
浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...

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

vue.js中使用微信扫一扫,解决invalid signature问题相关推荐

最新文章

热门文章