H5唤起微信扫一扫功能

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;
  }

7、官方链接： JSSDK使用步骤 JS-SDK使用权限签名算法