调用微信的扫一扫功能

一，实现思路

二，实现

使用的是weixin-jsapi

npm install weixin-jsapi --save

三，官方文档

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1

四，具体代码;

/**
     * 扫一扫
     */
    handleScan(){
      let env = this.myModal.getEnv()
        if (env !== 'others') {
          this.wxScanCode();
        } else {
            this.$router.push('qrcodeScanner')
        }
    },
    /**
     * 调起微信扫一扫
     */
    wxScanCode () {
      let params = {
        PT_STYLE: '1',
        TXCODE: 'WXSQ01',
        url: window.location.href.split('#')[0]
      }
      this.ajax('get', params, res => {
        wx.config({
          debug: false, // 开启调试模式，调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名，见附录1
          jsApiList: [
            'scanQRCode',
            'checkJsApi'
          ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        })

        wx.error(function (res) {
          // 这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
          alert('出错啦：' + JSON.stringify(res))
        })

        wx.ready(() => {
          setTimeout(() => {
            wx.checkJsApi({
              jsApiList: [
                'scanQRCode'
              ],
              success: function (res) {
                console.log(res)
              }
            })
            wx.scanQRCode({
              needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
              scanType: ['qrCode', 'barCode'], // 可以指定扫付款码还是一维码，默认二者都有
              success: (res) => {
                if (res.resultStr) {    //// 当needResult 为 1 时，扫码返回的结果存放在这里面res.resultStr，也就是二维码数据信息
                  this.checkScanCode(res.resultStr)    //传入返回的结果，开始处理
                }
              },
              fail: function (res) {
                alert('出错啦：' + JSON.stringify(res))
              }
            })
          }, 100)
        })
      }, err => { console.log(err) }, this.$baseAPIs.server4th)
    },
    /**
     * 检查付款码是否合法
     */
    checkScanCode (result) {
      let params = {
        TXCODE: 'ST0074',
        qrCode: result
      }
      this.ajax('get', params, res => {
        if (res.data.SUCCESS === 'Y') {
          // this.$router.push({path: '/smViews/QRpay', query: { qrcode: result }})
          //对于我这个项目，应该跳转到龙支付的页面,并且将二维码得到的参数带入，在这里后端返回二维码的处理数据
          this.$notify({
            message: '应该跳转到龙支付页面',
            type: 'success', 
            duration: 500,
          });
        } else {
          this.$notify({
            message: res.data.ERRMSG,
            type: 'warning', 
            duration: 500,
          });
        }
      }, err => { console.log(err) }, this.$baseAPIs.server3rd)
    }

判断环境的代码：

 /**
  * 获取当前环境
  */
  getEnv () {
    if (window.navigator.userAgent.toLowerCase().indexOf('miniprogram') !== -1) {
      // 微信小程序
      return 'wechat applet'
    } else if (window.navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1) {
      // 微信内置浏览器
      return 'weChat'
    } else {
      return 'others'
    }
  }