前言
之前的一个项目遭到用户吐槽:“你们这个 App 扫码的正确率太低了,尤其是安卓的设备。经常性的扫码扫不出来,就算是扫出来了,也是错误的成果!”
因为之前是扫描二维码的需求,所以没有对扫描条形码做严厉的测验,客户提示说是条形码扫描功率低下。随即,我用自己的手机测验了一下,在安卓手机上确实有这样的问题,扫码精确率确实是低,尤其是条形码,扫码功率慢且不精确。扫描二维码的的功率还算可以,说的过去。
同一个 API,在小程序、Android、iOS 上的也会有差异,小程序和 iOS 设备上的扫码功率也属正常,唯一 Android 的机器略显尴尬。那么本篇文章我将和大家一同看一下怎么在安卓的机器上提高一下扫码正确率吧!
怎么优化
经过分析以上的这个问题,咱们先分析一下是什么原因导致的这种反常现象:
- 经过官方的 API 调用的扫码,是否官方就现已存在着这个问题?是否现已有了处理方案?
- 如果是咱们自己开发一个原生的插件是否能处理领先的难题?
经过以上的分析,咱们分别从官方的视点和自定义的视点考虑一下这个问题的处理方案。
官方策略
调起客户端扫码,主要运用的是uni.scanCode(OBJECT)
这个 API,检查官方的 API 阐明,发现也没有特殊的差异性阐明,也便是说:官方以为在 App 和小程序上的支持应该是一致的。
那咱们就持续在看一下是不是咱们运用的参数有问题?
从上面图片可以看出,对 App 来说,可以装备影响扫码的 API 有:
-
scanType
:扫码类型 -
autoDecodeCharset
:是否启用主动辨认字符编码功能,默以为否 -
autoZoom
:是否启用主动扩大,默认启用
// 调起条码扫描
uni.scanCode({
scanType: ["qrCode", "barCode", "pdf417"],
autoDecodeCharset: true,
success: function (res) {
console.log("条码类型:" res.scanType);
console.log("条码内容:" res.result);
},
});
如上代码所示:scanType
增加支持了qrCode
和barCode
两种类型,也便是支持二维码、条形码、PDF417
条码
重新打包后测验,发现改进作用甚微,可以说是没有改变,依然扫码功率低下。
已然,运用官方的 API 优化并没有明显的改进作用,咱们考虑一下其他办法呢?比方:运用封装的原生 API 办法。
自定义策略
经过查找材料了解到:App-vue 如果想自定义扫码,有以下几种办法:
- 运用 Html 5 的 Barcode 模块办理条码(一维码和二维码)扫描辨认 检查链接。
- 自己封装一个安卓原生扫码 API:运用 zxing 插件等。
直接阐明我自己的做法,采用了自定义封装的(zxing)安卓原生扫码 API,可以说是处理了扫码低下的问题: 首要,时间和精力有限,没有自己封装,而是从插件运用商场查找到一个开发者现已封装好的扫码原生插件,直接运用的,下面经过以下几个过程看一下是怎么运用的:
1. 导入插件
将插件下载后放入 uni-app 的 nativeplugins 目录下,下载地址
2. 在 manifest.json 中装备插件
如下图所示,在 manifest.json 图形化装备菜单中点击 App 原生插件装备,挑选本地插件进行装备
3. 增加权限
要运用安卓手机正常调用起摄像头进行扫码,需求增加对应的权限,这是必不可少的。
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.FLASHLIGHT" />
4. 参数格局阐明
参数名 | 阐明 | 默认值 | 可选值 |
---|---|---|---|
scanType | 扫码类型 | null | PDF_417、CODE_128 等 |
prompt | 扫码提示语 | – | – |
locked | 方向是否锁定、旋转 | true | true 或 false |
5. 回来格局阐明
参数名 | 参数阐明 |
---|---|
success | 扫码状态 |
scanType | 回来的扫码类型 |
result | 扫码成果信息 |
6. 运用办法
// 引入插件
const myScanCode = uni.requireNativePlugin("My-ScanCode");
// 插件装备参数
const options = {
scanType: ["CODE_128", "QR_CODE"],
prompt: "提示:将条形码/二维码图片对准扫描框即可主动扫描",
locked: true,
};
// 开端扫码
myScanCode.scanCode(options, (res) => {
if (res.success === "true") {
// 扫码成功
} else {
// 扫码反常
}
});
经过以上的几个过程,咱们就将原生扫码插件引入到咱们项目中,而且装备成功后正常运用了。
注意事项
因为本次优化仅限于对安卓渠道的优化,咱们运用的插件也是针对于安卓渠道的,因此需求渠道差异化编码,让代码在安卓环境下进行,其他比方小程序、iOS 环境仍是持续运用uni.scanCode
这个 API
export default {
start: function () {
return new Promise((resolve, reject) => {
// #ifdef APP-PLUS
if (uni.getSystemInfoSync().platform === "android") {
const myScanCode = uni.requireNativePlugin("My-ScanCode");
const options = {
scanType: ["CODE_128", "QR_CODE"],
prompt: "提示:将条形码/二维码图片对准扫描框即可主动扫描",
locked: true,
};
myScanCode.scanCode(options, (res) => {
if (res.success === "true") {
resolve(res.result);
} else {
reject(res);
}
});
} else {
uni.scanCode({
onlyFromCamera: true,
scanType: ["barCode", "qrCode"],
success(res) {
resolve(res.result);
},
});
}
// #endif
// #ifndef APP-PLUS
uni.scanCode({
onlyFromCamera: true,
scanType: ["barCode", "qrCode"],
success(res) {
resolve(res.result);
},
});
// #endif
});
},
};
经过以上的差异性编码优化,就可以放心的运用了,不必忧虑兼容性问题了,运用办法如下:
scanCode.start().then((res) => {
// 扫码成功后逻辑处理
});
总结
以上便是之前在项目中遇到的扫码问题。尽管时隔现已很长时间了,但是目前的代码运行良好,二维码和条形码的辨认才能也有个质的提高。
因为当时开发较早,插件商场的插件寥寥无几,而且后来也发现了一款更优异的原生扫码插件,拥有更优异且强大的辨认才能和辨认速度,对弱光、反光、模糊的二维码也具有优异的辨认才能,后续的文章我将会持续对它进行阐明,看一下其他优异的扫码插件是怎么运用的。