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 相关文章推荐
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
validator验证控件使用代码
Nov 23 Javascript
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
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
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
php单一接口的实现方法
2015/06/20 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
php socket通信简单实现
2016/11/18 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
python获取服务器响应cookie的实例
2018/12/28 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
python生成器用法实例详解
2019/11/22 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
大学团支书的自我评价分享
2013/12/14 职场文书
2014年庆元旦活动方案
2014/02/15 职场文书
测量工程专业求职信
2014/02/24 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS