首页 前端知识 基于html5QrCode实现的H5扫码功能(uni-app v2版本)

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

2024-03-12 01:03:39 前端知识 前端哥 842 891 我要收藏

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. 实现效果

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3656.html
标签
uni-app
评论
会员中心 联系我 留言建议 回顶部
复制成功!