需要实现的业务需求

最近实现的业务需求上,要实现现场的实地签到,由于本身报名就是有小程序来实现的,又定好了扫码签到是有企业微信中接一个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的写法来实现业务逻辑。

Logo

前往低代码交流专区

更多推荐