菜鸟-创作你的创作

uniapp在h5页面实现扫码功能(html5-qrcode)

lichongyang

下面给你一份 在 uni-app 的 H5 页面中使用 html5-qrcode 来实现扫码功能的完整指南与示例代码。
html5-qrcode 是目前 H5 端最稳定的纯前端扫码库之一，支持二维码、条形码，且兼容性较好。

✅ 一、准备工作

1. 安装 html5-qrcode

如果你是 Vue2 + HBuilderX，项目不能直接 npm 安装，这种情况可以直接 CDN 引用。

方法 A：CDN 引入（最简单）

在 index.html 中加入：

<script src="https://unpkg.com/html5-qrcode"></script>

方法 B：使用 npm（适合 uniapp Vue3 + vite 项目）

npm install html5-qrcode

✅ 二、创建扫码页面

以 pages/scan/scan.vue 为例。

下面提供 最简版、可运行版、兼容 uni-app H5 的代码。

📌 三、可运行示例代码（Vue2/3 均适用）

<template>
  <view class="scan-page">
    <view id="reader" style="width: 300px; margin: 0 auto;"></view>
    <view class="result">扫描结果：{{ result }}</view>

    <button @click="startScan">开始扫码</button>
    <button @click="stopScan">停止扫码</button>
  </view>
</template>

<script>
let html5QrCode = null;

export default {
  data() {
    return {
      result: ''
    }
  },

  methods: {
    async startScan() {
      if (!html5QrCode) {
        // H5 中使用 window.Html5Qrcode
        const Html5Qrcode = window.Html5Qrcode;
        html5QrCode = new Html5Qrcode("reader");
      }

      const config = {
        fps: 10,          // 扫码帧率
        qrbox: 250        // 扫码区域尺寸
      };

      // 要求浏览器使用后置摄像头
      const constraints = { facingMode: "environment" };

      await html5QrCode.start(
        constraints,
        config,
        decodedText => {
          this.result = decodedText;
          this.stopScan();
        },
        error => { 
          // 扫码过程中不断触发，不需要提示
        }
      );
    },

    stopScan() {
      if (html5QrCode) {
        html5QrCode.stop().catch(err => {});
      }
    }
  },

  onUnload() {
    this.stopScan();
  }
};
</script>

<style>
.scan-page {
  padding: 20px;
}
.result {
  margin-top: 16px;
  font-size: 16px;
  color: #333;
}
</style>

✅ 四、注意事项（必须看）

🟦 1. H5 必须在 HTTPS 下运行

浏览器访问摄像头需要 HTTPS，除 localhost 以外都必须是 HTTPS。

🟦 2. 一定要使用后置摄像头

在移动端扫码，需要：

{ facingMode: "environment" }

否则会调用前置摄像头扫码效率极低。

🟦 3. 记得停止扫码

页面切走、销毁时必须 stop，否则会占用摄像头导致黑屏。

onUnload() {
  this.stopScan();
}

📌 五、如果你希望做成自动弹出扫码框

你可以在 onReady 中直接开始扫描：

onReady() {
  this.startScan();
}

📌 六、处理扫码后跳转

decodedText => {
  this.stopScan();
  uni.navigateTo({
    url: '/pages/result/result?code=' + encodeURIComponent(decodedText)
  });
}
退出移动版