博客

需要实现的业务需求

最近实现的业务需求上，要实现现场的实地签到，由于本身报名就是有小程序来实现的，又定好了扫码签到是有企业微信中接一个web应用来实现扫码。

利用vue-cli起一个web项目，写好页面，然后就是调微信扫一扫api。

根据微信官方文档实现调用扫码的api的配置

查询官方文档，发现接入api有四步操作
第一步：引入js文件
用的是vue/cli起的项目，直接是

cnpm i weixin-js-sdk -S

第二步：通过config接口注入权限验证配置
官方文档写的是：

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，企业号的唯一标识，此处填写企业号corpid
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

签名的生成是由后端同事处理的，主要拿了微信appid，api cecret，以及应用的secret，这里没做过多的研究。
这里在配置jsApiList: ['checkJsApi', 'scanQRCode']，一定要加上这两个参数，不然调用会报没权限的问题，如果是调用其他的api，是需要在清单中加上其他对应的变量。
第三步：通过ready接口处理成功验证

wx.ready(function(){
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

第四步：通过error接口处理失败验证

wx.error(function(res){
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

处理完这四步后，就可以在代码中进行扫一扫的调用了。

调起微信扫一扫接口

首先引包

import wx from 'weixin-js-sdk'

定义一个调用方法，调用wx.scanQRCode的方法要写在wx.ready的中，这样可以确保程序正确执行

invokeScanQRCodeApi() {
      return new Promise((resolve, reject) => {
        wx.ready(() => {
          // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
          wx.scanQRCode({
            desc: 'scanQRCode desc',
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
            success: (resScan) => {
              // 回调
              console.log('回调成功了', resScan.resultStr);
              // let encryptDesStr = that.encryptDes('亚索弟弟');
              resolve(resScan)
            },
            error: (resScan) => {
              if (resScan.errMsg.indexOf('function_not_exist') > 0) {
                console.log('版本过低请升级');
              }
              reject(resScan)
            }
          })
        })
      })
    }

微信网页授信域名配置

写完上述的代码后部署到服务器中进行验证手机扫码的api是否有调用到，发现还需要设置授信域名，不然会提示URL未授权的错误提示。

打开企业微信后台，找到自己创建的应用，发现要把一个文件方法域名的根目录下，并且能够直接URL访问到，这样开发环境不能被外网访问自然是不行的，于是又弄到staging环境上。

注意：这个域名的校验文件放在域名的下级目录下是不行的，如果同个域名下有多个网站的话。

配置完成后，Jenkins项目配置完，打包走起。于是乎在手机上就能调用到扫一扫功能了，也能在回调里面拿到提供好的签到二维码的信息。

最后加上异常错误处理，必要交互提示，完事。

一些其他的注意事项

签到二维码的信息加密处理

后台的同事对二维码上扫出来的信息做了加密处理，于是了解插件crypto-js，一通文档阅读下来，结果各自前后端加密解密，都正常，但是后端加密后，前端解密就不正常。
折腾后另辟蹊径，决定让后台自己加密，前端扫到信息后，整个加密字符给到后台自己去解密，简单完事。

对静态文件的打包配置

最开始以为授信域名配置的时候的文件：WW_verify_KEDSLqPttZlL7Igx.txt，只是放在index.html的目录下就可以了，就想这个文件在静态文件目录static中，单独打包到index.html的同级目录下，找了了build/webpack.prod.conf.js文件，其中的插件配置

      {
        from: path.resolve(__dirname, '../static/WW_verify_KEDSLqPttZlL7Igx.txt'),
        to: './',
        ignore: ['.*']
      }
    ])

后面发现只能放在域名的根下面，不能放在二级目录下面，就没有把这个配置文件放在代码里面了。

wx.scanQRCode导致vue的this作用域变化

写法是在wx.scanQRCode拿到数据后传参给调用签到后台api，把签到信息传给后台，wx.scanQRCode中的this作用域不再是指向当前vue实例，所以就有了上文的使用promise的写法来实现业务逻辑。