uni-app的h5扫码（二维码、条形码）_uniapp付款条码以及二维码的实现

安装@zxing/library

yarn add @zxing/library 或npm i @zxing/library --save
1

代码

<script>
import { BrowserQRCodeReader } from '@zxing/library'

export default {
  data() {
    return {
      codeReader: new BrowserQRCodeReader()
    }
  },
  async onLoad(options) {
    await this.fetchData()
  },
  destroyed() {
    this.removeDom()
  },
  methods: {
    async fetchData() {
      // 先删除已存在的dom
      this.removeDom()
      // 再创建
      this.createDom()
      await this.openCameraAndScan()
    },
    // 打开摄像头
    async openCameraAndScan() {
      try {
        await this.newScan()
      } catch (err) {
        console.log(err)
        if (err.code && err.code == 404) {
          uni.showToast({
            title: '浏览器不支持，请更换浏览器',
            duration: 2000,
            icon: 'error'
          })
        } else {
          uni.showToast({
            title: '请检查是否存在摄像头',
            duration: 2000,
            icon: 'error'
          })
        }
      }
    },
    async newScan() {
      // 构建回调函数
      const handleQrCode = (result, err) => {
        if (result && result.text) {
          // 判断是否其他网点
         console.log("扫码出的结果",result.text)
        }
        if (err && !err) {
          this.removeDom()
          uni.showToast({
            title: '摄像头扫码失败',
            duration: 2000,
            icon: 'error'
          })
        }
      }
      let result, err
      try {
        console.log('初始化zxing')
        let videoDom = document.getElementById('video')
        result = await this.codeReader.decodeOnceFromVideoDevice(undefined, videoDom)
        console.log('扫码结果', result)
      } catch (ex) {
        console.error('zxing识别错误', ex)
        err = ex
      }
      // 调用回调函数
      handleQrCode(result, err)
    },
    createDom() {
      // 手动创建html video
      // 否则，如果是template中的video，会被转译成univideo
      // 导致zxing无法识别
      let videoBoxDom = document.getElementById('videoBox')
      let videoDom = document.createElement('video')
      videoDom.id = 'video'
      videoDom.style.position = 'absolute'
      // videoDom.style.zIndex = '-2'
      videoDom.style.width = '100%'
      videoDom.style.height = '100%'
      videoDom.style.objectFit = 'cover'
      videoDom.setAttribute('autoplay', true)
      videoDom.setAttribute('muted', true)
      videoBoxDom.appendChild(videoDom)
    },
    removeDom() {
      if (this.codeReader && this.codeReader.reset) {
        this.codeReader.reset()
      }
      if (this.codeReader && this.codeReader.reader && this.codeReader.reader.reset) {
        this.codeReader.reader.reset()
      }
      let videoBoxDom = document.getElementById('videoBox')
      let videoDom = document.getElementById('video')
      if (videoBoxDom && videoDom) {
        videoBoxDom.removeChild(videoDom)
      }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105