html5-qrcode实现扫码功能——2024-04-19

有个抽抽

已于 2024-04-19 17:13:12 修改

阅读量1.8k

点赞数 2

分类专栏：学习碎片文章标签：前端 html5 vue

于 2024-04-19 16:48:56 首次发布

本文链接：https://blog.csdn.net/m0_51400566/article/details/137970053

版权

学习碎片专栏收录该内容

48 篇文章

订阅专栏

本文介绍了如何在H5项目中利用html5-qrcode库实现扫描二维码或条形码的功能，包括库的安装、引入，以及如何在HTML中创建扫描容器和处理扫码逻辑，还提到了相关参数配置和错误处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目需求：H5项目需要实现扫描二维码或条形码功能。

html5-qrcode使用

1.安装

npm install html5-qrcode --save-dev

2.引入


import { Html5Qrcode } from 'html5-qrcode';

3.定义所需变量

  data: function() {
    return {
      html5QrCode: null,
      isShow: false,
      scanReasonList: []
    };
  },

4.创建容器（可根据需求写样式）

<div class="reader" v-if="isShow">
   <div id="reader-box"></div>
</div>

5.实现扫码逻辑

在一个button或者其他节点上绑定事件“scanCode”

    scanCode() {
      this.startScan();
    },   
    startScan() {
      this.isShow = true;
      Html5Qrcode.getCameras().then(devices => {
        if (devices && devices.length) {
          this.html5Qrcode = new Html5Qrcode('reader-box');
          this.html5Qrcode.start(
            {
              facingMode: 'environment'
            },
            {
              fps: 10,
              qrbox: { width: 250, height: 250 }
            },
            (decodeText, decodeResult) => {
              if (decodeText) {
                this.scanReasonList.push(decodeText);
                this.stopScan();
                this.isShow = false;
              }
            },
            err => {
              console.log('失败', err);
            }
          );
        }
      });
    },
    stopScan() {
      this.html5Qrcode.stop();
    },

至此，可基本实现扫码功能。具体的参数配置可参考官网 Getting started | ScanApp