微信小程序使用 ocr 身份证识别

最新推荐文章于 2025-06-14 15:33:54 发布

归来巨星

最新推荐文章于 2025-06-14 15:33:54 发布

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端小程序文章标签：小程序微信 html5

本文链接：https://blog.youkuaiyun.com/clli_Chain/article/details/120032831

前端同时被 2 个专栏收录

52 篇文章

订阅专栏

小程序

8 篇文章

订阅专栏

本文介绍了如何在项目中集成并使用微信OCR识别插件，详细步骤包括购买插件、配置app.json和json页面文件，以及在页面中调用插件进行身份证正反面识别。通过点击按钮触发相机拍照，实现自动识别并返回回调信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、打开服务平台开启插件

在这里插入图片描述

二、搜索ocr，单击开发者资源、找到对应的微信ocr识别，进行购买一天有100次调用。

在这里插入图片描述

三、在项目中引入

打开根目录app.json

  "plugins": {
    "ocr-plugin": {
      "version": "3.0.6",
      "provider": "wx4418e3e031e551be"
    }
  },

对应的
version : 版本
provider : 插件Appid

引入后会让你进行下载，下载之后对应的我们打开右上角详细后呈现的效果
在这里插入图片描述
在使用到身份证识别的 json 页面文件中引入当前这个插件

{
  "usingComponents": {
    "ocr-navigator": "plugin://ocr-plugin/ocr-navigator"
  }
}

在对应页面中我们就可以直接使用对应的插件进行使用了

  <ocr-navigator bind:onSuccess="successCallback" certificateType="idCard" opposite="{{false}}">
    <van-button type="primary">身份证正面识别</van-button>
  </ocr-navigator>

对应的 js文件中，绑定好我们的成功回调事件
在这里插入图片描述
当我们去点击身份证正面识别按钮的时候也就会拉起相机进行拍照识别，成功后就会返还回调信息

而对应上方如果要进行识别身份证反面
只需要将标签中 opposite 移除或者将值设置为 true即可，默认识别就是识别身份证反面