更新记录

1.0.0（2026-07-20） 下载此版本

• 首次发布，迁移至 uni_modules 标准化结构
• 支持 fullscreen / inline 双模式
• 支持闪光灯自动检测与控制
• 重复扫码过滤机制
• 扫码成功动效 + 提示音（含 Web Audio API 降级）+ 震动反馈
• 完整的 Props 配置体系（5 大类 15+ 项）
• 5 个事件回调 + 4 个可调用方法
• 自动资源管理与释放

平台兼容性

uni-app(5.12)

QrScan — H5 扫码组件

基于 html5-qrcode 封装的 uni-app H5 扫码组件，支持全屏与内嵌两种模式。

平台兼容性

App / 小程序端请使用 uni-app 原生扫码 API（uni.scanCode）。

快速开始

安装依赖

npm install html5-qrcode

使用组件

将插件导入 uni_modules 后，通过 easycom 自动引入，无需手动注册：

<template>
  <view>
    <h5-qrcode-scanner @scan-success="onResult" />
  </view>
</template>

<script>
export default {
  methods: {
    onResult(code) {
      uni.showToast({ title: '扫码结果: ' + code, icon: 'none' })
    }
  }
}
</script>

目录结构

uni_modules/h5-qrcode-scanner/
├── package.json           # 插件元数据
├── readme.md              # 本文档
├── changelog.md           # 更新日志
├── components/
│   └── h5-qrcode-scanner/
│       └── h5-qrcode-scanner.vue    # 组件主文件
├── demo/
│   └── index.vue          # 演示页面
└── static/
    └── scanvideo.mp3      # 默认提示音

Props

Events

Methods（ref 调用）

使用示例

全屏扫码，扫到即关

<template>
  <view>
    <button @click="open = true">打开扫码</button>
    <h5-qrcode-scanner
      v-if="open"
      mode="fullscreen"
      scanColor="#2979ff"
      title="扫描二维码"
      :autoStopAfterScan="true"
      :autoCloseDelay="800"
      @scan-success="handleResult"
      @close="open = false"
    />
  </view>
</template>

内嵌模式

<template>
  <view style="padding:20px">
    <h5-qrcode-scanner mode="inline" :scanBoxWidth="260" @scan-success="handleResult" />
  </view>
</template>

手动控制启停

<template>
  <view>
    <h5-qrcode-scanner ref="scanner" mode="inline" :autoStart="false" @scan-success="onScan" />
    <button @click="$refs.scanner.initScanner()">开始</button>
    <button @click="$refs.scanner.stopScanner()">停止</button>
  </view>
</template>

常见问题

摄像头无法启动

• 确保页面运行在 HTTPS 或 localhost 环境
• 浏览器已授权摄像头权限
• 监听 scan-error 事件查看具体错误

识别率低

• 增大 fps（推荐 15~25）
• 确保二维码清晰、光线充足
• 适当调整 scanBoxWidth

闪光灯不显示

• 仅后置摄像头 + 硬件支持时可用
• 需在真机上测试，模拟器不支持

技术依赖

许可证

MIT