更新记录

1.0.0(2026-04-23) 下载此版本

新增

  • 基于 Google ML Kit Barcode Scanning 的 Android UTS 扫码组件(easy-scanner)。
  • 支持多种条码格式(可配置 formats,默认 ALL)。
  • 可配置扫码框:位置、尺寸、边框与四角样式;半透明遮罩;多码模式下标记颜色。
  • 闪光灯、扫码开关、多码识别、双指缩放、扫码框显隐等能力。
  • 对外事件:initerrorscannedmulti-scanned;方法:toggleFlashlightsetZoomRatiopauseScanresumeScanrescan

修复

  • scanInFrameOnly:此前框内限制易失效。已按相机帧 rotationDegrees 与 ML Kit 有效坐标系对齐,使用 MatrixScaleToFit.CENTER)将扫码框从预览视图映射到分析图像坐标,与 PreviewView 居中适配一致;interest 无法计算时不再误放行整帧结果;boundingBox 为空时不再视为命中框内。

平台说明

  • 当前仅支持 Androidutssdk/app-android)。

平台兼容性

uni-app(4.87)

Vue2 Vue3 Chrome Safari app-vue app-vue插件版本 app-nvue app-nvue插件版本 Android Android插件版本 iOS 鸿蒙
- - - - 1.0.0 1.0.0 7.0 1.0.0 - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
- - - - - - - - - - - -

uni-app x(4.83)

Chrome Safari Android iOS 鸿蒙 微信小程序
- - - - - -

easy-scanner

基于 Google MLKit Barcode Scanning 的高性能 UTS 扫码组件,仅支持 Android 平台。

功能特性

  • 支持 13 种编码格式:QR_CODE、AZTEC、CODABAR、CODE_39、CODE_93、CODE_128、DATA_MATRIX、EAN_8、EAN_13、ITF、PDF417、UPC_A、UPC_E
  • 可配置识别的编码格式
  • 自定义扫码框样式(位置、尺寸、颜色、四角样式)
  • 半透明遮罩层
  • 闪光灯开关控制
  • 双指缩放调整相机焦距
  • 多码识别模式(多个编码同时出现时标记并供用户选择)
  • 扫码启用/暂停控制
  • 支持自定义内容覆盖到相机区域(slot 插槽)

使用方式

<easy-scanner
  ref="scanner"
  :formats="'QR_CODE,EAN_13'"
  :flashlight="false"
  :scanEnabled="true"
  :multiScan="false"
  :showScanBox="true"
  :scanInFrameOnly="true"
  :enableZoom="true"
  :scanBoxWidth="220"
  :scanBoxHeight="220"
  :scanBoxBorderColor="'#00FF00'"
  :scanBoxCornerLength="40"
  :scanBoxCornerWidth="6"
  :overlayColor="'#80000000'"
  :markerColor="'#FF4444'"
  @init="onInit"
  @error="onError"
  @scanned="onScanned"
  @multi-scanned="onMultiScanned"
  style="width: 750rpx; height: 500px;">
  <text>自定义覆盖内容</text>
</easy-scanner>

Props 属性

属性 类型 默认值 说明
formats String "ALL" 支持的编码格式,逗号分隔,ALL 为全部
scanBoxLeft Number -1 扫码框水平偏移(px),-1 为居中
scanBoxTop Number -1 扫码框垂直偏移(px),-1 为居中
scanBoxWidth Number 200 扫码框宽度(px)
scanBoxHeight Number 200 扫码框高度(px)
scanBoxBorderColor String "#00FF00" 扫码框边框颜色
scanBoxBorderWidth Number 2 扫码框边框宽度(px)
scanBoxCornerLength Number 40 扫码框四角长度(px)
scanBoxCornerWidth Number 6 扫码框四角线宽(px)
overlayColor String "#80000000" 遮罩层颜色
markerColor String "#FF4444" 多码标记框颜色
flashlight Boolean false 是否开启闪光灯
scanEnabled Boolean true 是否启用扫码
multiScan Boolean false 是否启用多码识别
showScanBox Boolean true 是否显示扫码框(含半透明遮罩与框线)
scanInFrameOnly Boolean true 为 true 时仅识别落在扫码框区域内的条码;为 false 时整幅画面均可识别
enableZoom Boolean true 是否启用双指缩放

Events 事件

事件名 说明 回调参数
init 初始化成功 { message: string }
error 错误事件 { errCode: number, errMsg: string }
scanned 扫码成功 { result: string, scanType: number, charSet: string, format: number, formatName: string }
multi-scanned 多码识别 { count: number, barcodes: Array<{result, format, formatName}> }

Methods 方法

通过 this.$refs.scanner 调用:

方法名 说明
toggleFlashlight() 切换闪光灯开关
setZoomRatio(ratio) 设置缩放比例
pauseScan() 暂停扫码
resumeScan() 恢复扫码
rescan() 重新扫码(清除标记并恢复)

scanType 与 uni.scanCode 的对应关系

scanType 格式
0 QR_CODE
1 EAN_13
2 EAN_8
3 DATA_MATRIX
4 CODE_128
5 CODE_39
6 CODE_93
7 CODABAR
8 ITF
9 UPC_A
10 UPC_E
11 PDF417
12 AZTEC

隐私、权限声明

1. 本插件需要申请的系统权限列表:

相机权限、闪光灯权限

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。