识别能力与场景
设备巡检、扫码点单、票据录入、车牌登记,这些场景在小程序里都离不开识别能力。识别做得好,用户少打字、少出错,整个流程都能快一大截。
小程序的识别能力大体分三类:扫条码和二维码、拍照识物、图片文字识别。扫条码走系统能力,识别快且稳;拍照识物和文字识别通常要接服务端能力,把图片传上去换结果。
选择哪条路,取决于你要识别什么。商品条码、一维码用 wx.scanCode 就好;摄像头实时取景加框,用 camera 组件;复杂的文字识别、证件识别,就要上 OCR 接口。下面按这三条路依次展开。
- 扫码scanCode 与相机组件取景。
- 拍照chooseMedia 采集图片。
- 识别条码、二维码与 OCR 文字。
- 体验清晰度、权限与结果处理。
相机与扫码组件
想在页面里直接扫码,不需要跳系统相机,用 camera 组件把取景画面嵌进页面,再配合扫码库做识别框。camera 组件要声明权限,用户同意后才能取景。
<camera device-position="back" flash="off" binderror="onCameraError">
<cover-view class="scan-frame">对准条码区域</cover-view>
</camera>
camera 组件是原生组件,层级高于普通页面元素,提示文字、取景框要用 cover-view 覆盖。页面里同时只能存在一个 camera 实例,切页面要记得释放组件,避免相机一直被占用。
如果只是偶尔扫一次码,不要求实时取景,直接用 wx.scanCode 调起系统扫码界面更省事。两种方式按场景选,别一上来就堆组件。
条码与二维码识别
商品码、快递单号、活动二维码,这类结构化信息用 wx.scanCode 识别最省心,系统会处理对焦、识别和结果解析,返回码内容和类型。
wx.scanCode({
onlyFromCamera: false,
success: function (res) {
// res.result 是码里的内容,res.scanType 是码类型
const code = res.result;
if (code.indexOf('http') === 0) {
openWebPage(code);
} else {
handlePlainCode(code);
}
},
fail: function () {
showToast('没有识别到条码');
}
});
识别结果要先做安全校验再使用。二维码里可能带链接、带脚本片段,直接打开有风险;建议只放行白名单域名,其他内容一律展示给用户确认,而不是自动跳转。
连续扫码场景,比如盘库、签收,要在一次成功之后短暂加锁,防止同一结果被识别两次;扫完一批再开下一批,体验更可控。
拍照与图片识别
拍照识物、票据拍照这类场景,先让用户拍照或选图,再把图片交给识别服务。图片采集用 chooseMedia,支持相机拍摄和相册选择,一次可以选多张。
wx.chooseMedia({
count: 1,
mediaType: ['image'],
sourceType: ['camera', 'album'],
success: function (res) {
const file = res.tempFiles[0];
uploadAndRecognize(file.tempFilePath);
}
});
图片上传前先压缩,长图、大图会把上传时间和识别成本都拉高。识别类服务一般对最小边长有要求,压缩到合适尺寸再传,既能省流量也能保证识别率。
拍照识别还要注意方向问题:竖拍的照片存在旋转信息,上传前最好用 canvas 或工具库把方向摆正,否则服务端拿到的图可能是横的,识别结果自然不对。
OCR 文字识别
身份证号、发票金额、手写便签,这些非结构化文字要靠 OCR。小程序里做 OCR 有两条路:接服务端识别接口,或者用图像识别类的扩展能力在端上识别。
function recognizeText(imageUrl) {
wx.request({
url: 'https://api.example.com/ocr',
method: 'POST',
data: { image: imageUrl, type: 'general' },
success: function (res) {
// res.data.words 是识别出的文字数组
const words = res.data.words || [];
fillForm(words.join(''));
}
});
}
端上识别的优点是快、不依赖网络,但模型一般偏小,复杂版式、生僻字容易翻车;云端识别的准确率高、版式支持全,代价是要网络、要成本。混合策略:简单文字走本地,重要证照走云端。
隐私要格外注意:OCR 图片可能含身份证、住址等敏感信息,传输用 HTTPS、服务端不落库或脱敏存储,这些都要写进隐私协议,并给用户明确的删除入口。
体验优化与常见坑
| 坑 | 现象 | 应对 |
|---|---|---|
| 权限未申请 | 相机一片黑或直接报错 | 进页面先查授权状态 |
| 光线不足 | 条码识别率骤降 | 提示补光,开启手电筒 |
| 图片模糊 | OCR 结果错乱 | 拍照后给重拍入口 |
| 识别串台 | 连扫时重复结果 | 成功一次加锁再解锁 |
识别类功能最影响体验的其实是反馈:扫描中要有进度提示,成功要震动或音效,失败要告诉用户重拍还是换图。用户不知道自己识别进行到哪一步,就容易反复扫码,反而更慢。
另外,识别结果必须让用户确认后再进入下一步,尤其是会触发下单、登记这类动作的场景。机器识别再准也会有误判,给用户一个纠错的机会,安全又体面。
落地清单
- 简单条码用 wx.scanCode,实时取景用 camera 组件。
- 识别结果先安全校验,陌生链接不自动跳转。
- 拍照上传前压缩图片、摆正方向。
- OCR 分本地与云端两档,敏感图片走加密链路。
- 识别过程给足反馈,结果让用户确认。
识别不是终点,让识别结果安全、准确地进入业务,才是完整闭环。