识别能力与场景

设备巡检、扫码点单、票据录入、车牌登记,这些场景在小程序里都离不开识别能力。识别做得好,用户少打字、少出错,整个流程都能快一大截。

小程序的识别能力大体分三类:扫条码和二维码、拍照识物、图片文字识别。扫条码走系统能力,识别快且稳;拍照识物和文字识别通常要接服务端能力,把图片传上去换结果。

选择哪条路,取决于你要识别什么。商品条码、一维码用 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、服务端不落库或脱敏存储,这些都要写进隐私协议,并给用户明确的删除入口。