微信环境中h5调用微信扫一扫api_微信扫码签名测试

需求：支持微信公众号的h5页面内调用微信扫一扫api，实现产品的扫码签到功能
技术栈：vue, ts
参考资料：微信官方文档
步骤：

1. 项目引入js 文件，有两种引入方式，
   全局引入

1. 全局引入，在全局html模板里面以script标签的形式引入
2. 用loadjs按需加载引入

在开发中选择了偷懒的第一种方法：

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript"></script>
1

2. 通过config接口注入权限验证配置

// 微信扫码配置
  async scanQRCodeConfig() {
    const url = this.getCurrentEvnDomain();
    try {
    // 调用接口获取微信签名，入参url一般是当前页面的url(不包括#及后面部分)
      const res = await getWxSignature(url);
      console.log('微信扫码配置接口===', res);

      if (Object.keys(res)) {
        const {appId, nonceStr, signature, timestamp} = res;
        window.wx.config({
          // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          debug: false,
          // 必填，公众号的唯一标识
          appId: appId, // appId
          // 必填，生成签名的时间戳
          timestamp: '' + timestamp,
          // 必填，生成签名的随机串
          nonceStr: nonceStr,
          // 必填，签名，见附录1
          signature: signature,
          // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          jsApiList: [ 'checkJsApi', 'scanQRCode' ]
        });
      }
    } catch (e) {
      console.log('wxconfig配置catch', e);
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

3. 调用扫码功能

// 调用微信扫码功能
  async scanQRCodeByWX() {
    // 先配置微信数据
    await this.scanQRCodeConfig();
    /* eslint-disable */
    const _this = this;
    window.wx.scanQRCode({
      needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
      scanType: ['qrCode'], // 可以指定扫二维码还是一维码，默认二者都有
      success: function(res) {
        // TODO 执行自己的逻辑
      }
    });
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4. 测试，由于是微信公众号环境所以需要搭建一个测试账号，至此调用微信api就结束了

注意：不要忘了配置安全域名，否否无法调起微信api

若有错误的地方或者更好的办法，望指出~