1.首先知道JSSDK使用步骤
1-1.绑定域名
在微信公众后台管理中完成，具体我没操作，后端大佬负责搞定了；
1-2.引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js 如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。
备注：支持使用 AMD/CMD 标准模块加载方法加载，使用npm安装weixin-js-sdk后，在需要使用的页面引入： import wx from 'weixin-js-sdk';
1-3. 通过config接口注入权限验证配置
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [] // 必填，需要使用的JS接口列表
});
1-4.通过ready接口处理成功验证
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
})
2.项目代码展示
2-1调用二维码扫描
methods: {
//调用二维码扫描
openCamera() {
var that = this;
let url = window.location.href;
if (url.includes('#')) {
url = url.split('#')[0];
}
// 获取时间戳,,
this.$axios
.get('/SDSmart/xxxxxxx/getsignature', {
params: { url: decodeURIComponent(url) },
})
.then((res) => {
// console.log(res);
wx.config({
debug: false,
appId: 'wx01xxxxxxxxfd',
timestamp: res.data.timestamp, //必填，生成签名的时间戳
nonceStr: res.data.noncestr, // 必填，生成签名的随机串
signature: res.data.signature, // 必填，签名
jsApiList: ['scanQRCode', 'checkJsApi'], // 必填，需要使用的JS接口列表
});
wx.ready(() => {
wx.checkJsApi({
jsApiList: ['scanQRCode'], // 需要检测的JS接口列表
success: function (res) {
},
});
wx.scanQRCode({
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ['barCode', 'qrCode'], // 可以指定扫二维码还是一维码，默认二者都有
success: function (res) {
var result = res.resultStr;
that.result = result;
},
fail: function (err) {
alert('JSSDK error' + JSON.stringify(err));
},
});
});
});
},
}
2-2扫描成功后的回调
data() {
return {
expertList: [], //专家列表
currPage: 1, //页数
pageSize: 10, //每页的数据个数
result: '',//扫描成功后的回调链接
};
},
watch: {
result() {
let result = this.result;
if (result !== '') {
this.$axios
.get(result, {
headers: {
user_id: localStorage.getItem('userId'),//首页授权限时存储的
token: localStorage.getItem('token'),//首页授权限时存储的
},
})
.then((res) => {
this.expertList = [];
Toast.loading({
message: '您已成功关注该医生',
});
this.getList();
});
}
},
},
3.总结踩坑点
1.通过config注入权限验证时，调接口传的url必须是当前页面的url,用window.location.href获取，并且不能带#；传参时要 params: { url: decodeURIComponent(url) },用decodeURIComponent解码；
- jsApiList: ['scanQRCode'], // scanQRCode必填，需要使用的JS接口列表；
3.在开发中遇到ios系统调扫一扫调不起来问题，出现scanQRCode:premission denied的错；后来经历各种查询，终于找到原因了，我用的路由导航进入到扫一扫这个页面，ios获取location.href时就不是当前链接，所以在config那里就会出错；正确方法应该是用window.location.href跳转到有扫一扫按钮的页面；
4.调扫码成功后，我这里做的是一个关注的功能，扫码后要回调请求一下返回的链接，就是res.resultStr;我这里用来watch监听result，进行回调请求；（奔泪经历：回调时候，headers传参字段写错了，但是回调也成功了，就是一直没有添加数据成功，头大了好久，后来硬着头皮说后台有问题，然后被打脸，呜呜，写代码还是要仔细仔细再仔细，认真认真再认真！）
