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


Posted in Javascript onApril 11, 2020

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

Javascript 相关文章推荐
javascript xml为数据源的下拉框控件
Jul 07 Javascript
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
jQuery设置与获取HTML,文本和值的简单实例
Feb 26 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
深入理解node.js http模块
Jan 24 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 #Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 #Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 #Javascript
JavaScript实现轮播图特效
Apr 10 #Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 #Javascript
Vue实现Layui的集成方法步骤
Apr 10 #Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 #Javascript
You might like
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
jQuery的deferred对象使用详解
2011/08/20 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
python去除所有html标签的方法
2015/05/05 Python
python机器学习之随机森林(七)
2018/03/26 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
如何掌握自荐信格式呢
2013/11/19 职场文书
团代会开幕词
2015/01/28 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
2015大一新生军训感言
2015/08/01 职场文书
中学政教处工作总结
2015/08/13 职场文书
学校团代会开幕词
2016/03/04 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
Python3 如何开启自带http服务
2021/05/18 Python
python可视化之颜色映射详解
2021/09/15 Python
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android