更新记录
1.0.0(2024-11-12)
初版
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 4.29,Android:5.0,iOS:不确定,HarmonyNext:不确定 | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
wow-scankit
简介
基于华为ScanKit集成的扫描服务,支持13种码制式,使用UTS开发,目前仅支持Android
使用方法
导入插件后,在页面使用以下方式导入,或者导入示例项目,示例项目为Uniapp-x项目
自定义基座再运行
import { defaultScan, customScan, generateCode} from '@/uni_modules/wow-scankit'
扫码API
defaultScan(cb)
:默认界面扫码
customScan(customQrOptions)
:自定义界面扫码
customQrOptions {Object}
参数 | 类型 | 是否必传 | 描述 |
---|---|---|---|
mode | String | Y | 区分自定义界面是否是全屏扫码(相机区域),可选值 fullsize halfsize ,当取值是 multiprocessor 时,是多码模式 |
tips | String | N | 扫描矩形下方提示文字 |
mRectColor | String | N | 扫描矩形的四个顶点角颜色,默认#07C160 |
mBorderColor | String | N | 扫描矩形的边框颜色,默认#07C160 |
mBackgroundColor | String | N | 扫描矩形以外的背景色(遮罩层),isDrawBg==true 时,默认#80000000 |
isDrawBg | Boolean | N | 是否绘制遮罩层,默认false ,不显示遮罩层 |
isDrawBorder | Boolean | N | 是否绘制扫描矩形的边框,默认false |
mScanTimes | Number | N | 扫描线的动画时间,默认1500 |
isFlashRequired | Boolean | N | 是否显示闪光灯按钮,默认true |
示例
/**
* 自定义扫码
*/
defineScan() {
customScan({
mode: "fullsize",
tips:"xxx",
mRectColor: '#07C160',
isDrawBg: true,
isDrawBorder: true,
mScanTimes: 1500,
mBackgroundColor: '#07C160'
} as CustomQrOptions, {
success: (res) => {
console.log(res);
this.result = res.result!
this.qrCodeType = res.qrCodeType!
}
} as WowScanKitResult)
},
参考界面:
生成码API
generateCode(codeOptions, cb)
:生成码
cb:回调函数,包含成功/失败的结果
codeOptions {Object}
参数 | 类型 | 是否必传 | 描述 |
---|---|---|---|
content | String | Y | 生成码的内容 |
type | Number | Y | 生成码的类型,如下 |
width | Number | Y | 生成码的宽度 |
height | Number | Y | 生成码的高度 |
codeColor | String | Y | 生成码的颜色,例如:#1890FF |
backgroundColor | String | Y | 生成码的背景色,例如:#FFFFFF |
margin | Number | Y | 生成码的边距 |
type
类型 | 值 |
---|---|
QR | 1 |
Aztec | 2 |
DataMatrix | 4 |
PDF417 | 8 |
Code 39 | 16 |
Code 93 | 32 |
Code 128 | 64 |
EAN-13 | 128 |
EAN-8 | 256 |
ITF14 | 512 |
UPC-A | 1024 |
UPC-E | 2048 |
Codabar | 4096 |
示例
generateCode(
{
type: 1,
content: '加强李信!!',
codeColor: '#1890FF',
backgroundColor: '#FFFFFF',
width: 700,
height: 700,
margin: 1,
}, {
success: (res) => {} // 成功
fali:(err)=>{} // 失败
} as WowScanKitResult)
成功之后返回图片的Base64字符串,需要手动拼接data:image/png;base64,
关于自定义界面扫码
-
基于xml实现,可自行修改xml布局调试自己想要的UI
-
扫描区域的扫描线是一张图片,可以自行替换其它颜色的图片,位于插件目录
wow-scankit/utssdk/app-android/res/drawable/scan_line.png
-
半屏扫码扫描完毕后没有设置返回上一个页面,会在当前的Activit显示结果,如果需要扫码完毕立即返回可以自行修改逻辑或联系我提供修改方法(相机会有稍微压缩)
-
如果自定义界面不符合您的要求,可联系我修改你想要的界面🤞