1、先登录微信公众平台，进入“公众号设置”的“功能设置”里填写“JS接口安全域名”，进入“基础配置”，将服务端部署ip配置到IP白名单中。
2、引入JS文件 在需要调用JS接口的页面引入如下JS文件，（支持 https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js
3、通过config接口注入权限验证配置，所需参数从服务端接口获取；
服务端生成签名时需要配置当前网页的URL（不包含#及其后面部分，需域名，本地ip试了不行），可由前端将调用扫一扫的页面url传给服务端生成签名的接口；
let signData = await request('api/demo/auth/sign', { method: 'POST', body: {
"url": window.location.origin + window.location.pathname, //当前网页的URL传给后端
} })
console.log('signData',signData);
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx7048dabe52c67347', // 必填，公众号的唯一标识
timestamp: signData.timestamp, // 必填，生成签名的时间戳
nonceStr: signData.nonceStr, // 必填，生成签名的随机串
signature: signData.signature,// 必填，签名
jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
});
4、调用微信扫一扫；
wx.scanQRCode({
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
success: function (res) {
var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
console.log(result);
request('api/demo/user/query', {
method: 'POST', body: {
"number": result
}
}).then(res => {
console.log(res);
jumpPage('/search/result', JSON.parse(res.data))
})
}
})
5、如果要获取微信用户信息，需网页鉴权-Oauth2，只有通过微信认证的服务号有权限，订阅号不行，进入“公众号设置”的“功能设置”里进行网页授权域名填写；参考链接
6、成功demo（前端获取到code后传给服务端接口，接口返回openId，或者用户信息）
let openId = ''
let code = this.getUrlParam('code','?' + window.location.href.split('?')[1])
const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_uri=https://xxx.com/deme/&response_type=code&scope=snsapi_base&state=STATE`
if(!sessionStorage.getItem('openId')){
if(code){
request('api/demo/auth/receive', { method: 'POST', body: {
code: code,
} }).then(res=>{
openId = res.openId
sessionStorage.setItem('openId',openId)
this.getUserInfo() //通过openId获取用户信息
history.pushState('', '', 'https://xxx.com/deme/')
})
}else{
window.location.href = url
}
}else{
this.getUserInfo() //通过openId获取用户信息
}
// 回调回来的地址是：https://xxx.com/deme/?code=xxxxxx&state=xxx
// 如果你是使用hash路由的，一般的取url参数的方法会有点小问题，需要手动调整下
getUrlParam = (name, location) => {
const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
const { hash, search } = window.location;
const result = ((location||(hash || search)).split('?')[1] || '').match(reg);
return result ? decodeURIComponent(result[2]) : null;
}
