当前位置:   article > 正文

uniapp h5 调用微信扫一扫功能_uniapp调用微信扫一扫

uniapp调用微信扫一扫

下载微信jdk,并在页面中引入

npm i weixin-js-sdk

// 按需引入
import wx from 'weixin-js-sdk';
  • 1
  • 2
  • 3
  • 4

初始化wx.config

注意:url需要前端传入,一定是网页的域名,window.location.href.split(‘#’)[0],不可让后端写死,也不需要用encodeURIComponent()转译

			var _that = this
			_that.$api.baseRequest('/h5/api/wx/get-sign', 'GET', {
				url: window.location.href.split('#')[0]
			}).then(res => {
				wx.config({
					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
					appId: res.data.appId, // 必填,公众号的唯一标识
					timestamp: Number(res.data.timestamp), // 必填,生成签名的时间戳
					nonceStr: res.data.noncestr, // 必填,生成签名的随机串
					signature: res.data.sign, // 必填,签名
					jsApiList: ['checkJsApi', 'scanQRCode'] // 必填,需要使用的JS接口列表
				})
				wx.ready(() => {
			        console.log('配置完成,扫码前准备完成')
			     })
				wx.error(function(res) {
					alert("出错了:" + res.errMsg); //这个地方的好处就是wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
				});
			})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

点击按钮调用扫一扫

					wx.ready(function() {
					// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
					wx.checkJsApi({
						jsApiList: ['scanQRCode'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
						success: function(res) {

						}
					});
					wx.scanQRCode({
						needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
						scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
						success: function(res) {
							var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
							// 扫码之后的逻辑处理
						}
					});
				});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

注意

  1. 如果前端一直提示签名失败,务必让后端把jsapi_ticket字段也返回,然后在微信 JS 接口签名校验工具(https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign)中校验一下签名是否正确,如果不一致那就是后端生成的问题
  2. timestamp是有字符限制的,timestamp是10位
  3. 在本地测试如果提示“config:fail,invalid url domain”,说明签名验证成功了,是本地域名跟微信公众号配置的js安全域名不一致,这个时候就需要放到测试,测一下
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/859621
推荐阅读
相关标签
  

闽ICP备14008679号