Call the scan function of WeChat

One, realization of ideas

Second, achieve

Using weixin-jsapi

npm install weixin-jsapi --save

Three, official documents

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

Fourth, the specific code;

/**
     * 扫一扫
     */
    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)
    }

Code for judging the environment:

 /**
  * 获取当前环境
  */
  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'
    }
  }