更新记录

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

• 首次发布，迁移至 uni_modules 标准化结构
• 支持 H5 + 微信小程序双端（#ifdef 条件编译）
• H5：基于 html5-qrcode，getUserMedia 摄像头
• 微信小程序：基于 <camera mode="scanCode">，原生扫码引擎
• 支持 fullscreen / inline 双模式
• 支持闪光灯控制（H5: MediaStreamTrack / 小程序: camera flash 属性）
• 扫码成功动效 + 提示音 + 震动反馈（双端适配）
• 完整的 Props 配置体系（5 大类 15+ 项）
• 5 个事件回调 + 4 个可调用方法
• 自动资源管理与释放

平台兼容性

uni-app(5.12)

qrcode-scanner — H5 & 微信小程序扫码组件

基于 html5-qrcode（H5）+ 微信小程序 <camera mode="scanCode"> 封装的 uni-app 扫码组件，支持全屏与内嵌两种模式，H5 与微信小程序双端适配。

平台兼容性

H5：基于 html5-qrcode，支持页面内嵌扫码
微信小程序：基于 <camera mode="scanCode">，原生扫码引擎，无需额外依赖
App 端请使用 uni-app 原生扫码 API（uni.scanCode）

快速开始

H5 安装依赖

npm install html5-qrcode

微信小程序无需安装额外依赖，直接使用即可。

使用组件

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

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

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

目录结构

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

Props

Events

Methods（ref 调用）

使用示例

全屏扫码，扫到即关

<template>
  <view>
    <button @click="open = true">打开扫码</button>
    <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">
    <qrcode-scanner mode="inline" :scanBoxWidth="260" @scan-success="handleResult" />
  </view>
</template>

手动控制启停

<template>
  <view>
    <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>

常见问题

摄像头无法启动

H5

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

微信小程序

• 确保 app.json 或 manifest.json 中已声明 camera 权限
• 首次使用会弹出权限授权弹窗，用户需点击"允许"
• 开发者工具中摄像头可能无法正常工作，需真机测试

识别率低

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

闪光灯不显示

• H5：仅后置摄像头 + 硬件支持时可用（getCapabilities().torch）
• 微信小程序：后置摄像头始终支持，通过 camera 组件 flash 属性控制
• 需在真机上测试，模拟器不支持

微信小程序注意事项

• 使用 <camera mode="scanCode"> 内置扫码引擎，无需 html5-qrcode
• 扫码框装饰为纯视觉层，实际识别覆盖整个摄像头画面
• fps 参数在小程序端无效（由系统控制）

技术依赖

许可证

MIT