背景
扫码获得仪器序列号，然后填充仪器信息。
本来系统是支持移动端浏览器的，但是后来发现浏览器扫码有点怪，于是就限制了只能在微信端打开。
实现
其实微信开发文档写的很清楚。 developers.weixin.qq.com/doc/offiacc…
稍微总结下步骤：
-
需要微信公众号（会用到appId），绑定JS接口安全域名，是需要备案了的域名。
-
使用微信的JS-SDK网页开发工具包。文档步骤很清楚。
-
引入JS文件，因为是vue项目，默认有webpack。我这边使用的是
npm i weixin-js-sdk，默认版本是1.6.0的。在需要使用扫一扫的页面引入var wx = require('weixin-js-sdk') -
通过config接口注入权限验证配置，看文档。
本来想我前端自己配置这些信息的，但是在通过ID、时间戳、随机串生成签名的时候，微信要求先获取access_token（需要appid和secret），但是前端获取会跨域哈哈哈，于是放弃了。后面步骤是通过access_token获取jsapi_ticket，最后生成签名。
注意：前端传递需要使用扫一扫的url给后端，后端生成签名给前端注入权限验证配置。
developers.weixin.qq.com/doc/offiacc… 这里有常见错误，有问题的话可以看看，且微信有接口给你验证是否签名正确。
后端小哥去验证签名的时候没有问题，然后我调用的时候又报错config:invaild signature，明显的签名不对。愣是了找了半天，原因是：后端小哥验证签名的时候，url是自己手动写上去的，但是从前端传过去的时候，是会被转义的！！！！！pc端是不会报错的，需要在微信开发者工具或者是打开微信内置的调试界面才能看到错误。
附：打开微信内置浏览器调试界面方法：微信浏览器网页打开debugx5.qq.com(仅支持android微信)打开下面两项，就可以调试
-
wx.ready()&&wx.error() 可以使用promise封装下，因为wx.config是异步的，确保注入了接口权限验证配置后才调用接口
-
checkIsReady () {
return new Promise((resolve, reject) => {
wx.ready(() => resolve())
wx.error(err => reject(err))
})
},
//扫码事件
async scan () {
//这段是把vue示例给到_this，因为在这this是undefined。
const _this = this
//前端传递url从后端获取权限验证配置
const res = await GetSign({
url: location.href.split('#')[0]
})
if (res.status === 200) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.data.appId, // 必填，公众号的唯一标识
timestamp: res.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
signature: res.data.signature, // 必填，签名
jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
})
_this.checkIsReady()
.then(() => {
wx.scanQRCode({
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
success: function (QRCodeRes) {
// 当needResult 为 1 时，扫码返回的结果
_this.form.sNumber = QRCodeRes.resultStr
SelectBysNumber({
sNumber: _this.form.sNumber
}).then(resInfo => {
_this.form.sNumber = resInfo.data.entity.sNumber
_this.form.Name =resInfo.data.entity.Name
})
}
})
})
.catch(err => {
console.log('验证失败了', err)
})
}
},
