当前位置: 首页 > 编程笔记 >

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

洪景铄
2023-03-14
本文向大家介绍vue.js中使用微信扫一扫解决invalid signature问题(完美解决),包括了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 微信扫一扫内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库!

 类似资料:
  • 调起微信扫一扫接口 wx.scanQRCode({ needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果, scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有 success: function (res) { var result = res.resultStr; // 当needR

  • 本文向大家介绍详解微信小程序-扫一扫 wx.scanCode() 扫码大变身,包括了详解微信小程序-扫一扫 wx.scanCode() 扫码大变身的使用技巧和注意事项,需要的朋友参考一下 效果   js html css 其实就是"/images/2.jpg"和"/images/3.jpg"2个字符串生成二维码, 然后在images文件夹下放对应路径的2张图片, 扫一扫二维码重新赋值。 参考地址:

  • 本文向大家介绍微信JSSDK调用微信扫一扫功能的方法,包括了微信JSSDK调用微信扫一扫功能的方法的使用技巧和注意事项,需要的朋友参考一下 如何利用微信JSSDK调用微信扫一扫功能?具体内容如下 1. 确保有 调起微信扫一扫接口 权限,测试号可能不行; 2. 导入相关JS 3. 页面触发扫码元素 4. 相关JS代码 5. 获取签名接口getWechatSign.do各值生成方式 timestamp

  • 本文向大家介绍vue使用微信扫一扫功能的实现代码,包括了vue使用微信扫一扫功能的实现代码的使用技巧和注意事项,需要的朋友参考一下 第一步: 安装weixin-js-sdk 和 jquery 包 npm install weixin-js-sdk jquery 第二部: 配置wx.config (配置都是后端返回来的,菜鸟前端只需要按需传值过去就可) 代码如下 已测,可以使用 注:只能微信浏览器使

  • 本文向大家介绍Swift中使用可选类型完美解决占位问题,包括了Swift中使用可选类型完美解决占位问题的使用技巧和注意事项,需要的朋友参考一下 可选类型是Swift中新引入的,功能很强大。在这篇博文里讨论的,是在Swift里,如何通过可选类型来保证强类型的安全性。作为例子,我们来创建一个Objective-C API的Swift版本,但实际上Swift本身并不需要这样的API。 为Dictiona

  • 本文向大家介绍完美解决安装完tensorflow后pip无法使用的问题,包括了完美解决安装完tensorflow后pip无法使用的问题的使用技巧和注意事项,需要的朋友参考一下 Win8,ANACONDA3(64-bit),Python3.6.2。ANACONDA Prompt中不能用pip命令安装包,并且是在安装了TensorFlow后才发生的。 报错如下: 解决方案: 1.conda insta