pbl-app/src/components/weChatQrcode.vue

<template>
  <div class="weChatQrCode" v-if="false"></div>
</template>

<script>
import wx from 'weixin-js-sdk'
import { getSignature } from '@/api/wechat'
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    open() {
      this.show = true
      this.onScan()
    },
    onScan() {
      this.getCofig()
      const that = this
      wx.ready(function() {
        console.log('测试')
        wx.checkJsApi({
          // 需要使用的JS接口列表，在这里只需要用到scanQRCode
          jsApiList: ['scanQRCode'],
          success: function(res1) {
            if (res1.checkResult.scanQRCode) {
              // 当scanQRCode可使用时
              wx.scanQRCode({
                needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
                success: function(res2) {
                  const result = res2.resultStr
                  that.$emit('success', result)
                  // console.log(res2.resultStr, '扫描的结果~')
                  // window.location.href = result
                },
                error: function(response) {
                  that.close()
                  that.$nextTick(() => {
                    that.$toast(response)
                  })
                },
                fail: function(err) {
                  // 新增调用失败的处理方法
                  that.close()
                  that.$nextTick(() => {
                    that.$toast('扫码失败: ' + (err && err.errMsg ? err.errMsg : '未知错误'))
                  })
                }
              })
            }
          },
          fail: function(err) {
            // checkJsApi 调用失败的处理
            that.close()
            that.$nextTick(() => {
              that.$toast('微信接口调用失败: ' + (err && err.errMsg ? err.errMsg : '未知错误'))
            })
          }
        })
      })
    },
    async getCofig() {
      const that = this
      const res = await getSignature({ url: encodeURIComponent(window.location.href.split('#')[0]) })
      // console.log('res', res)
      that.wxConfig(res.data.appId, res.data.params.timestamp, res.data.params.nonceStr, res.data.signature)
    },
    // wx.config的配置
    wxConfig(appId, timestamp, nonceStr, signature) {
      const that = this

      const params = {
        debug: false, // 开启调试模式,
        appId: appId, // 必填，企业号的唯一标识
        timestamp: timestamp, // 必填，生成签名的时间戳
        nonceStr: nonceStr, // 必填，生成签名的随机串
        signature: signature, // 必填，签名
        jsApiList: ['scanQRCode', 'checkJsApi'] // 必填，需要使用的JS接口列表
      }
      wx.config(params)
      wx.error(function(res) {
        that.close()
        alert('出错了👉' + res.errMsg) // wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
      })
    },
    close() {
      this.show = false
    }
  }
}
</script>

<style lang="scss" scoped>
.weChatQrCode {
  width: 100%;
  height: 100%;
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
}
</style>