更新记录
1.17.2(2026-04-21)
- 测试安卓非标设备预览界面旋转的问题
1.17.1(2026-04-20)
- 增加调试日志
1.17.0(2026-04-20)
- 支持web端扫码(注意:有使用限制条件,可查看文档说明)
平台兼容性
uni-app(4.66)
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|
| √ | √ | - | - | - | - | 5.0 | 15 | - |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 小红书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| - | - | - | - | - | - | - | - | - | - | - | - |
uni-app x(4.66)
| Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
|---|---|---|---|---|---|
| - | - | 5.0 | 15 | 11 | - |
其他
| 多语言 | 暗黑模式 | 宽屏模式 |
|---|---|---|
| × | × | √ |
插件使用说明文档
注意!
插件需要打自定义基座运行!
插件需要打自定义基座运行!
插件需要打自定义基座运行!
插件功能说明
支持多种码类型识别,可参考下面的码类型说明支持单码/多码识别支持连续扫码场景支持界面图标自定义支持识别成功提示音和震动效果连续扫码场景支持自定义识别成功toast提示文案支持自动缩放和双指缩放
IOS端注意!,不支持摄像头切换,用法参考后面的用例(扫码插件支持的ios版本是>=15.5)
鸿蒙端注意:鸿蒙使用的是官方默认扫码界面UI,不支持自定义界面内容,只能单码识别,不支持连续扫码
扫码类型:支持文本、链接、电话、邮件、WIFI等通用类型条码
type CodeType = 'text'| 'url'| 'wifi'| 'phone'| 'sms'
| 'email'
| 'contact'
| 'geo'
| 'calendar'
| 'driverLicense'
| 'isbn'
| 'product';
支持扫码格式列表,默认支持全部格式,可以设置单个或多个扫码格式类型,不设置默认是0,支持全部扫码格式
- 1----->FORMAT_CODE_128
- 2----->FORMAT_CODE_39
- 4----->FORMAT_CODE_93
- 8----->FORMAT_CODABAR
- 32---->FORMAT_EAN_13
- 64---->FORMAT_EAN_8)
- 128--> FORMAT_ITF) 二维码
- 256--> FORMAT_QR_CODE 二维码
- 512--->FORMAT_UPC_A
- 1024-->FORMAT_UPC_E
- 2048-->FORMAT_PDF417
- 16---->FORMAT_DATA_MATRIX
- 4096-->FORMAT_AZTEC
- 参数说明
| 属性 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| cameraType | string | BACK | N | 开启前置摄像头,不设置默认使用后置摄像头,当设备只有一个摄像头,该设置无效,会自动取可用列表的摄像头 |
| continuous | boolean | false | N | 设为true即可开启连续扫码,默认不开启 |
| continuousDelay | number | 800 | N | 连续扫码场景,间隔时间 |
| autoZoom | boolean | false | N | 开启相机自动缩放,默认不开启,只限非连续扫码模式下使用 |
| cameraRotation | number | null | N | 预览纠偏角度,仅 Android 生效,可选 0/90/180/270,用于修正部分硬件预览画面倒立或横转问题(非必要不要设置该字段) |
| styleFollowIos | boolean | true | N | 页面样式是否跟随IOS端, 默认true,此为全屏模式(与scanBox模式二选一) |
| showLamplight | boolean | true | N | 隐藏/显示灯光操作,默认显示 |
| showPhotoAlbum | boolean | true | N | 隐藏/显示相册操作,默认显示 |
| scanBox | boolean | false | N | 中间区域扫码模式,默认关闭,(注意:如果开启此模式,styleFollowIos必须配置且为false) |
| scanBoxTitle | string | '将码放入取景框,即可自动扫描' | N | 中间区域扫码模式标题,只有scanBox为true生效 |
| scanBoxTitleColor | string | '#ffffff' | N | 中间区域扫码模式标题颜色,只有scanBox为true生效 |
| scanBoxTitleSize | number | 16 | N | 中间区域扫码模式标题大小,只有scanBox为true生效 |
| scanBoxHeight | number | 540 | N | 中间区域扫码框的高度,只有scanBox为true生效 |
| formatsVal | string | '0' | N | 设置扫码的制式,默认为'0',支持全部制式 |
| markeTitle | string | '#ffffff' | N | 设置扫码页底部识别中的提示文字 |
| showToast | boolean | false | N | 二维码识别成功显示toast(只针对连续扫码生效) |
| showToastText | string | '自定义扫码成功提示' | N | 设置连续扫码场景成功提示语 |
| lightOnText | string | '灯光打开' | N | 自定义打开灯光文案 |
| lightOffText | string | '灯光关闭' | N | 自定义关闭灯光文案 |
| photoText | string | '自定义相册文字' | N | 相册底部文案(只针对安卓不跟随IOS端界面样式有效) |
| moreQrCodeSelectText | string | '识别到多个二维码,请选择一个打开' | N | 多个二维码选择提示文案 |
| moreQrCodeSelectTextColor | string | '#ffffff' | N | 多个二维码选择提示文案颜色 |
| moreQrCodeSelectTextSize | number | 16 | N | 多个二维码选择提示文案大小 |
| outputAllCodeData | boolean | false | N | 开启后,直接返回扫码数据,获取返回值内容需要取optionArr字段,默认关闭(只针对全屏扫码且非连续扫码有效) |
| customFailToatText | string | 未识别到二维码 | N | 未识别到二维码时提示内容 |
方法说明
openCamera 打开扫码页closeCamera 主动关闭扫码页setContinuousScanStatus 设置暂停扫码或继续扫码,针对连续扫码场景
cameraRotation 常见硬件异常与推荐取值
- 正常设备预览方向正确:
cameraRotation不传或传0 - 预览画面倒立 180 度:传
cameraRotation: 180 - 预览画面顺时针旋转 90 度:传
cameraRotation: 90 - 预览画面逆时针旋转 270 度:传
cameraRotation: 270 - 建议先在异常设备上逐个测试
90/180/270,以“用户看到的预览画面为正”为准 - 该字段当前用于纠正 Android 预览层显示方向,不影响页面 UI 朝向
Web 端扫码说明
实现方式
- Web 端扫码基于
@zxing/library实现。 - 当前 Web 端相机识别使用
takePhoto()抓拍单帧图片后再交给 ZXing 解码,不是 App 端那种原生相机实时识别链路。 - 相册识别直接使用整张图片解码,因此通常会比 Web 相机识别更稳定。
性能与体验限制
- Web 端性能明显弱于 App 端原生扫码,识别速度、流畅度、稳定性都不如 App 端。
- Web 端相机识别依赖浏览器/运行容器提供的拍照与摄像头能力,不同设备和不同内核表现差异较大。
- 因为当前是抓拍单帧后识别,所以页面会存在轻微卡顿,识别速度也会慢于原生实时扫码。
- Web 端存在方向、镜像、分辨率压缩等兼容性问题,部分设备上会影响识别成功率。
支持的码类型
- 按 ZXing 官方仓库 README 的 Supported Formats 说明,Web 解码能力覆盖以下类型:
1D 商品码
UPC_AUPC_EEAN_8EAN_13
1D 工业码
CODE_39CODE_93CODE_128CODABARITFRSS_14RSS_EXPANDED(官方标注为 not production ready)
2D 码
-
QR_CODE -
DATA_MATRIX -
AZTEC -
PDF_417 -
MAXICODE(ZXing 官方 README 中已标注为未支持) -
当前插件 Web 端
formatsVal参数已对接并开放配置的格式,仍以本插件前面的格式枚举列表为准。
已知限制
- Web 端对小二维码、远距离二维码、低对比度二维码识别效果较差。
- Web 端对密度很高或尺寸很小的二维码命中率不稳定。
- 某些浏览器/运行容器里,只有部分一维码会更容易识别,二维码和复杂码型识别率可能下降。
- 当环境对相机帧做了裁切、压缩或镜像处理时,识别效果会进一步变差。
- 如果业务场景对扫码速度和成功率要求高,建议优先使用 App 端扫码能力。
使用建议
- 优先保证二维码尺寸足够大,并尽量放在画面中央。
- 尽量使用清晰、对比度高、无遮挡的码图。
- Web 端更适合作为功能补充,不建议作为高强度连续扫码主场景。
识别成功回调参数说明
CallbackValType:{
type --- 识别码内容类型 例如文本-text 链接-url 商品-product
option ----{
textVal?:string ------- 文本值
url?:string --------- 链接
phone?:string -------- 手机号
proNumber?:string ----- 商品编号
}
optionArr ---- 当初始化配置outputAllCodeData设置为true时,该字段才有值,内容字段和option字段一致
scanCodeType ----- 识别码为二维码/条形码 1- 二维码 2- 条形码 0- 未知 (当outputAllCodeData设置为true时,该字段会包含在optionArr的每个子项中)
}
页面调用插件方式
- uniapp的使用方式
<template>
<view>
<button @click="openScan">打开扫码</button>
</view>
</template>
<script>
import {openCamera,closeCamera,setContinuousScanStatus} from '@/uni_modules/xwq-mlkit-scan-code';
export default {
methods: {
openScan(){
openCamera({
cameraType:"FRONT",//开启前置摄像头,不设置默认使用后置摄像头,当设备只有一个摄像头,该设置无效,会自动取可用列表的摄像头
continuous:true,//设为true即可开启连续扫码,默认不开启
continuousDelay:2000,//连续扫码间隔时间
autoZoom:true,//开启相机自动缩放,默认不开启,只限非连续扫码模式下使用
cameraRotation:0,//预览纠偏角度,仅 Android 生效;例如硬件预览逆时针旋转270度时可传 270 纠正(非必要不要设置该字段)
styleFollowIos:false, //页面样式是否跟随IOS端, 默认true,此为全屏模式(与scanBox模式二选一)
showLamplight:false,//隐藏灯光操作,默认显示
showPhotoAlbum:false,//隐藏相册操作,默认显示
scanBox:true, //中间区域扫码模式 (注意:如果开启此模式,styleFollowIos必须配置且为false)
scanBoxTitle:'将码放入取景框,即可自动扫描',//中间区域扫码模式标题,只有scanBox为true生效
scanBoxTitleColor:"#ff0000",//中间区域扫码模式标题颜色,只有scanBox为true生效
scanBoxTitleSize:16,//中间区域扫码模式标题大小,只有scanBox为true生效
scanBoxHeight:200, //中间区域扫码框的高度,只有scanBox为true生效
formatsVal:'32,128,256', //扫码格式
markeTitle:'', //扫码页底部提示文字
showToast:false,//二维码识别成功显示toast(只针对连续扫码生效)
showToastText:"自定义扫码成功提示",//连续扫码场景提示语
customFailToatText:"自定义未识别到二维码信息", //未识别到二维码时提示内容
lightOnText:'灯光打开',//自定义打开灯光文案
lightOffText:'灯光关闭',//自定义关闭灯光文案
photoText: "自定义相册文字",//相册底部文案
moreQrCodeSelectText:"当前识别到多个二维码,请选择一个", //多个二维码选择提示文案
moreQrCodeSelectTextColor:"#ff0000", //多个二维码选择提示文案颜色
moreQrCodeSelectTextSize:18, //多个二维码选择提示文案大小
outputAllCodeData:false, //开启后,直接返回扫码数据,获取返回值内容需要取optionArr字段,默认关闭(只针对全屏扫码且非连续扫码有效)
success:(val)=>{
console.log('扫码结果回调===',val)
// 返回参数增加scanCodeType 识别码类型 1- 二维码 2- 条形码 0- 未知
//暂停扫码(针对连续扫码场景生效)
// setContinuousScanStatus(true)
// if(val.optionArr!=null&&val.optionArr!.length>0){
// val.optionArr?.forEach(item=>{
// result.value.push(item.textVal ?? '');
// })
// }else{
// result.value.push(val.option.textVal ?? '');
// }
// setTimeout(()=>{
//接口识别后,继续扫码
// setContinuousScanStatus(false)
// },5000)
},
error:(val) => {
console.log('识别失败===', val);
uni.showToast({
title:"没有识别到二维码"
})
},
cancel:()=>{
console.log('取消扫码')
}
});
},
}
}
</script>
- uniappX的使用方式
<template>
<view>
<button @click="openScan">打开扫码</button>
</view>
</template>
<script lang='uts'>
import {openCamera,closeCamera,setContinuousScanStatus} from '@/uni_modules/xwq-mlkit-scan-code';
import { InitParamsType, CallbackValType,ErrorCallbackValType } from '@/uni_modules/xwq-mlkit-scan-code/utssdk/interface.uts';
export default {
data() {
return {}
},
methods: {
openScan(){
openCamera({
cameraType:"FRONT",//开启前置摄像头,不设置默认使用后置摄像头,当设备只有一个摄像头,该设置无效,会自动取可用列表的摄像头
continuous:true,//设为true即可开启连续扫码,默认不开启
continuousDelay:2000,//连续扫码间隔时间
autoZoom:true,//开启相机自动缩放,默认不开启,只限非连续扫码模式下使用
cameraRotation:270,//预览纠偏角度,仅 Android 生效;例如硬件预览逆时针旋转270度时可传 270 纠正(非必要不要设置该字段)
styleFollowIos:false, //页面样式是否跟随IOS端, 默认true,此为全屏模式(与scanBox模式二选一)
showLamplight:false,//隐藏灯光操作,默认显示
showPhotoAlbum:false,//隐藏相册操作,默认显示
scanBox:true, //中间区域扫码模式 (注意:如果开启此模式,styleFollowIos必须配置且为false)
scanBoxTitle:'将码放入取景框,即可自动扫描',//中间区域扫码标题,只有scanBox为true生效
scanBoxTitleColor:"#ff0000",//中间区域扫码标题颜色,只有scanBox为true生效
scanBoxTitleSize:16,//中间区域扫码标题大小,只有scanBox为true生效
scanBoxHeight:200, //中间区域扫码框的高度,只有scanBox为true生效
formatsVal:'32,128,256', //扫码格式
markeTitle:'', //扫码页底部提示文字
showToast:false,//二维码识别成功显示toast(只针对连续扫码生效)
showToastText:"自定义扫码成功提示",//连续扫码场景提示语
customFailToatText:"自定义未识别到二维码信息", //未识别到二维码时提示内容
lightOnText:'灯光打开',//自定义打开灯光文案
lightOffText:'灯光关闭',//自定义关闭灯光文案
photoText: "自定义相册文字",//相册底部文案
moreQrCodeSelectText:"当前识别到多个二维码,请选择一个", //多个二维码选择提示文案
moreQrCodeSelectTextColor:"#ff0000", //多个二维码选择提示文案颜色
moreQrCodeSelectTextSize:18, //多个二维码选择提示文案大小
outputAllCodeData:false, //开启后,直接返回扫码数据,获取返回值内容需要取optionArr字段,默认关闭(只针对全屏扫码且非连续扫码有效)
success:(val:CallbackValType)=>{
console.log('扫码结果回调===',val)
//暂停扫码(针对连续扫码场景生效)
// setContinuousScanStatus(true)
// 返回参数增加scanCodeType 识别码类型 1- 二维码 2- 条形码 0- 未知
// if(val.optionArr!=null&&val.optionArr!.length>0){
// val.optionArr?.forEach(item=>{
// result.value.push(item.textVal ?? '');
// })
// }else{
// result.value.push(val.option.textVal ?? '');
// }
// setTimeout(()=>{
//接口识别后,继续扫码
// setContinuousScanStatus(false)
// },5000)
},
error:(val : ErrorCallbackValType) => {
console.log('识别失败===', val);
uni.showToast({
title:"没有识别到二维码"
})
},
cancel:()=>{
console.log('取消扫码')
}
} as InitParamsType);
},
}
}
</script>
IOS端UniappX项目中使用
<template>
<view>
<button @click="openScan">打开扫码</button>
</view>
</template>
<script setup>
import { openCamera,closeCamera,setContinuousScanStatus} from '@/uni_modules/xwq-mlkit-scan-code';
import { InitParamsType, CallbackValType,ErrorCallbackValType } from '@/uni_modules/xwq-mlkit-scan-code/utssdk/interface.uts';
const openScan = () => {
openCamera({
continuous:true,//设为true即可开启连续扫码,默认不开启
continuousDelay:2000,//连续扫码间隔时间
autoZoom:true,//开启相机自动缩放,默认不开启,只限非连续扫码模式下使用
cameraRotation:270,//预览纠偏角度,仅 Android 生效;例如硬件预览逆时针旋转270度时可传 270 纠正(非必要不要设置该字段)
styleFollowIos:false, //页面样式是否跟随IOS端, 默认true,此为全屏模式(与scanBox模式二选一)
showLamplight:false,//隐藏灯光操作,默认显示
showPhotoAlbum:false,//隐藏相册操作,默认显示
formatsVal:'32,128,256', //扫码格式
scanBox:true, //中间区域扫码模式 (注意:如果开启此模式,styleFollowIos必须配置且为false)
scanBoxTitle:'将码放入取景框,即可自动扫描',//中间区域扫码标题,只有scanBox为true生效
scanBoxTitleColor:"#ff0000",//中间区域扫码标题颜色,只有scanBox为true生效
scanBoxTitleSize:16,//中间区域扫码标题大小,只有scanBox为true生效
scanBoxHeight:200, //中间区域扫码框的高度,只有scanBox为true生效
markeTitle:'', //扫码页底部提示文字
showToast:false,//二维码识别成功显示toast(只针对连续扫码生效)
showToastText:"自定义扫码成功提示",//连续扫码场景提示语
customFailToatText:"自定义未识别到二维码信息", //未识别到二维码时提示内容
lightOnText:'灯光打开',//自定义打开灯光文案
lightOffText:'灯光关闭',//自定义关闭灯光文案
photoText: "自定义相册文字",//相册底部文案
moreQrCodeSelectText:"当前识别到多个二维码,请选择一个", //多个二维码选择提示文案
moreQrCodeSelectTextColor:"#ff0000", //多个二维码选择提示文案颜色
moreQrCodeSelectTextSize:18, //多个二维码选择提示文案大小
outputAllCodeData:false, //开启后,直接返回扫码数据,获取返回值内容需要取optionArr字段,默认关闭(只针对全屏扫码且非连续扫码有效)
success: (val : CallbackValType) => {
console.log('识别结果====', val)
//暂停扫码(针对连续扫码场景生效)
// setContinuousScanStatus(true)
// 返回参数增加scanCodeType 识别码类型 1- 二维码 2- 条形码 0- 未知
// if(val.optionArr!=null&&val.optionArr!.length>0){
// val.optionArr?.forEach(item=>{
// result.value.push(item.textVal ?? '');
// })
// }else{
// result.value.push(val.option.textVal ?? '');
// }
// setTimeout(()=>{
//接口识别后,继续扫码
// setContinuousScanStatus(false)
// },5000)
},
error:(val : ErrorCallbackValType) => {
console.log('识别失败===', val);
uni.showToast({
title:"没有识别到二维码"
})
},
cancel:()=>{
console.log('取消扫码')
}
} as InitParamsType);
};
</script>
在鸿蒙端使用用例(注意:鸿蒙使用的是官方默认扫码界面,不能自定义界面内容,只能单码识别,不支持连续扫码)
<template>
<view>
<button @click="openScan">打开扫码</button>
</view>
</template>
<script setup>
import { openCamera } from '@/uni_modules/xwq-mlkit-scan-code';
import { InitParamsType, CallbackValType,ErrorCallbackValType } from '@/uni_modules/xwq-mlkit-scan-code/utssdk/interface.uts';
const openScan = () => {
openCamera({
showPhotoAlbum:true,//相册入口是否开启
success: (val : CallbackValType) => {
console.log('识别结果====', val)
uni.showToast({
title:'识别成功'
})
},
error:(val : ErrorCallbackValType) => {
console.log('识别失败===', val);
uni.showToast({
title:"没有识别到二维码"
})
},
cancel:()=>{
console.log('取消扫码')
}
} as InitParamsType);
};

收藏人数:
购买源码授权版(
试用
赞赏(6)
下载 1132
赞赏 6
下载 11704638
赞赏 1911
赞赏
京公网安备:11010802035340号