更新记录
1.0.0(2026-04-23)
下载此版本
新增
- 基于 Google ML Kit Barcode Scanning 的 Android UTS 扫码组件(
easy-scanner)。
- 支持多种条码格式(可配置
formats,默认 ALL)。
- 可配置扫码框:位置、尺寸、边框与四角样式;半透明遮罩;多码模式下标记颜色。
- 闪光灯、扫码开关、多码识别、双指缩放、扫码框显隐等能力。
- 对外事件:
init、error、scanned、multi-scanned;方法:toggleFlashlight、setZoomRatio、pauseScan、resumeScan、rescan。
修复
scanInFrameOnly:此前框内限制易失效。已按相机帧 rotationDegrees 与 ML Kit 有效坐标系对齐,使用 Matrix(ScaleToFit.CENTER)将扫码框从预览视图映射到分析图像坐标,与 PreviewView 居中适配一致;interest 无法计算时不再误放行整帧结果;boundingBox 为空时不再视为命中框内。
平台说明
- 当前仅支持 Android(
utssdk/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 |