基于html5QrCode实现的H5扫码功能（uni-app v2版本）

1. 安装（选择一种方式）

•   使用npm Html5Qrcode npm链接

npm i html5-qrcode复制

•   直接引入html5-qrcode.min.js文件 （本例使用此方法）

2. 扫码组件代码（先引入Html5Qrcode资源）

<template>
  <view class="dialog-mask" v-if="value">
    <view class="dialog-box">
      <view id="qr-reader"></view>
    </view>
  </view>
</template>
 
<script>
 
export default {
  name: 'Scan',
  model: { props: 'value', event: 'close' },
  props: {
    value: { type: Boolean, default: false },
  },
  watch: {
    value(val) {
      if (val) {
        this.$nextTick(() => {
          this.getCameras()
        })
      }
    },
  },
  data() {
    return {
      cameraId: '',
      html5QrCode: '',
    }
  },
  beforeDestroy() {
    this.stop()
  },
  methods: {
    getCameras() {
      uni.showLoading({ title: '相机启动中...', icon: 'none' })
      Html5Qrcode.getCameras()
        .then((devices) => {
          /**
           * devices 是对象数组
           * 例如：[ { id: "id", label: "label" }]
           */
          if (devices && devices.length) {
            if (devices.length > 1) {
              this.cameraId = devices[1].id
            } else {
              this.cameraId = devices[0].id
            }
            console.log(this.cameraId, 'cameraId')
            this.start()
          }
        })
        .catch((err) => {
          this.close()
          uni.showToast({ title: '启用相机失败', icon: 'none' })
        })
    },
    start() {
      this.html5QrCode = new Html5Qrcode('qr-reader')
      setTimeout(() => {
        uni.hideLoading()
      }, 1500)
      this.html5QrCode
        .start(
          this.cameraId, // 传入cameraId参数，这个参数在之前的步骤中已经获取到.
          {
            fps: 10, // 设置摄像头的帧率为10帧每秒 
            qrbox: { width: 300, height: 300 }, // 设置需要扫描的QR码区域，这里设置的是300x300的区域
            aspectRatio: 1.777778,   // 设置扫描结果的宽高比为1.777778，即宽高比为根号2，即等腰梯形的宽高比  
          },
          (qrCodeMessage) => {
            //  当成功读取到QR码时，执行此回调函数 
            if (qrCodeMessage) {
              this.qrCodeMessage = qrCodeMessage
              this.$emit('success', qrCodeMessage)
              this.close()
              this.stop()
            }
          },
          (errorMessage) => {},
        )
        .catch((err) => {
          // 如果扫描启动失败，执行此catch块中的代码
          uni.showToast({ title: `扫码失败：${err}`, icon: 'none' })
        })
    },
    stop() {
      this.html5QrCode &&
        this.html5QrCode.stop().finally(() => {
          this.html5QrCode.clear()
          this.html5QrCode = null
        })
    },
    close() {
      this.$emit('close', false)
    },
  },
}
</script>
 
<style lang="scss" scoped>
.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.7);
  .dialog-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    #qr-reader {
      width: 750rpx;
    }
  }
}
</style>复制

3. 扫描组件使用方法

1. 引入组件
2. 使用组件，通过v-model控制显示与隐藏，success回调获取扫码结果。

 <!-- 识别二维码 -->
 <Scan v-model="showScan" @success="getScan" />复制

4. 实现效果