微信公众号H5页面实现扫一扫功能

uniappH5实现扫一扫功能
最近遇到一个需求，H5页面使用扫码绑定设备功能，因为uniapp uni.scanCode API H5不支持，网上找了很多方案不合适，因为这个项目是在公众里面运行的，所以最后采用了引入微信JS-SDK来实现的，网上有很多案例 但是在实际中会有些问题 以此来记录下解决的过程。
首先
1.按照文档的方法，下载js文件，直接引入到项目里
2.通过npm安装
npm install weixin-js-sdk --save
// 按需引入
import wx from ‘weixin-js-sdk’;
然后需要配置config （config最好放在onload里面去执行。也就是微信授权的一些东西，这个东西问后台要，下面是我项目中用的）

这个方法是请求配置config的一些参数，我叫后台返回给我的,

onLoad() {
			this.url = window.location.href.split('#')[0];   //获取当前的访问路径，这个要提交给后台的
			this.setMiniCode();
		},
setMiniCode() {
				let _this = this
				let msg = {
					appid:1,
					accessToken:uni.getStorageSync('token'),
					openid:uni.getStorageSync('openId'),
					url:this.url  //这个参数是需要给后台回调的授权页面（就是当前访问的页面，网上很多包括我都是在这里出的问题，下面详细讲解）
				}
				uni.request({
					url:`${this.qsUrl}wechat/getConfig`,
					method:'POST',
					data:msg,
					success(res) {
						if(res.statusCode == 200) {
							_this.msg = res.data
							let data = res.data
							_this.wxConfig(data.appId,data.timestamp,data.nonceStr,data.signature);
						}
						console.log(res,'结果')
					}
				})
			
			},

拿到参数后开始配置config

// 配置config
			wxConfig(appId, timestamp, nonceStr, signature) {
				let _this = this
			      wx.config({
			        debug: false, // 开启调试模式,
			        appId: appId, // 必填，企业号的唯一标识
			        timestamp: timestamp, // 必填，生成签名的时间戳
			        nonceStr: nonceStr, // 必填，生成签名的随机串
			        signature: signature, // 必填，签名
			        jsApiList: ['scanQRCode', 'checkJsApi'], // 必填，需要使用的JS接口列表
			      });
			      wx.ready((res) => {
			        console.log('配置完成，扫码前准备完成')
			      })
			      wx.error(function (res) {
			        alert('出错了：' + res.errMsg); //wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
			      });
			},

配置好后 ，就可以触发按钮或其他什么事件来触发扫一扫了

// 开始扫码
			 onScan() {
				 let _this = this
			     wx.scanQRCode({
			       needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
			       scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
			       success: function (res) { 
					    _this.imei = res.resultStr;  // 扫码的结果
						_this.confirmSu();   //拿到结果后做些事
			       },
			       fail: function (response) {
			         alert(' wx.scanQRCode失败')
			       },
			     });
			 
			   },

基本到这里就算是可以了 ，但是还没完， 在你从公众号进去H5项目后在你需要扫码的地方调用扫一扫的时候微信那边就会提示签名无效 授权的一些问题 调用扫一扫失败，但是你通过刷新浏览器几次后确能正常调起扫一扫了，针对这个问题我也是百度了很多，最后找到了一个解决办法，参考（ https://zhuanlan.zhihu.com/p/335613190）
这里我说下我是怎么弄的 ，因为我的项目从公众号那里进来就是登录页，因为微信他只认首次进入的页面为授权页所以我在登录页面里先获取下项目的访问路径，存起来
1.微信公众号进入的第一个页面

let url = window.location.href.split('#')[0];
uni.setStorageSync('url',url)    //存起来到其他页面用

2.需要调用扫一扫的页面

onLoad() {
			// this.url = window.location.href.split('#')[0];
			this.url = uni.getStorageSync('url') //把之前登录页存的拿出来传给后台当授权回调页
			this.setMiniCode();  //获取配置config需要的参数
		},

到这里就算解决了 微信那边提示 scanQRCode:thepermission value is offline verifying 的问题了