技术背景

在uniapp打包成H5的过程中发现，uniapp提供的uni.scanCode扫码api不支持H5。不过微信原生的扫描真是又好用又方便，那有没有办法在h5下还能继续使用呢。答案是肯定的，方案就是借助于微信提供的JSSDK实现，不过前提是需要在微信浏览器中打开（ps：想用人家微信扫描，不在微信中打开。我都不愿意）

开发前准备

1. 在微信公众平台后台配置JS安全域名（“设置与开发”->“公众号设置”->“功能设置”->“JS接口安全域名”）

2. 准备好微信公众平台的appid和appsecret

3. 由于签名还需要用到access_token而且换取需要把服务器ip加入白名单（还是在第二步中IP白名单设置）

至此开发前的准备工作就完成，接下来咱们就可以集中精力撸代码了

开发流程

后端

这次后端的工作主要是用于签名验证换取配置参数（网上微信开发的类库也有很多可以自己查找一下），下面简单说一下签名生成流程

1. 获取access_token（用来换取jspai_ticket使用）

具体获取方式参考：https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html

2. 获取jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）

使用get方式请求获取：

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

3. 根据微信提供的签名算法规则生成签名signature

具体方式可以参看微信文档

说明：url用前端给的即可

4. 最后把appId、timestamp、nonceStr、signature返回给前端

前端

简单说一下使用步骤。文档中的代码均属于demo，具体代码属性规范和业务逻辑还需根据实际情况而定

第一步：引入微信提供的jssdk

• 使用npm

npm install weixin-js-sdk -S

• 按需引入

<script>
  import wx from 'weixin-js-sdk';
</script>

第二步：通过wx.config注入权限验证配置

<script>
  onLoad(){
    // 注入验证配置
    this.injectConfig()
  },
  methods:{
    injectConfig(){
      let url = ''
      url = window.location.href.split('#')[0];

      uni.request({
        url: '后端提供的地址',
        data: {
          url: url
        },
        success: (response) => {
          const { data }; = response
          if (data) {
              wx.config({
                debug: false, // 开启调试模式,
                appId: data.appId, // 必填，企业号的唯一标识
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature, // 必填，签名
                jsApiList: ['scanQRCode'], // 必填，需要使用的JS接口列表
              });
              wx.ready(() => {
                 console.log('成功')
              })
              wx.error(function (res) {
                 console.log('出错了：' + res.errMsg); //wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
              });
          }
        }
      });
    }
  }
</script>

第三步：具体实现微信扫描功能

<template>
  <view class="viewScan">
    <button type="default" @click="scanCode">扫码</button>
  </view>
</template>

<script>
methods:{
   scanCode() {
      wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
        success: function (res) {
           uni.showModal({
            title: '提示',
            showCancel:false,
            content: JSON.stringify(res),
          });
          // 打印结果 使用alert在微信浏览器中是不生效的
        },
        fail: function (res) {
          console.log("扫描失败",res)
        },
      });
   }
 }
</script>

是的不用怀疑！！！前端就这么简单即可完成扫码功能

参考文档

1. 微信开放文档
2. 获取access_token 文档