uni-app 微信 OCR 扫描身份证 集成微信插件

第三方教程 1：https://blog.csdn.net/qq_32340877/article/details/124763581

第三方教程 2：https://blog.csdn.net/txl910514/article/details/120014020

坑：

1、必须用 @onSuccess，不能用 v-bind:onSuccess，从 Vue 语法来说是一样的，但不知道为啥在 uni-app 中后者就是不生效。

2、必须发布小程序查看才可以有效果，在本地总是解析身份证失败。

 

微信扫码识别身份证服务：

https://fuwu.weixin.qq.com/service/detail/0006eeb6160ce8429fb8cd3995b815

 

需要在小程序后台，加入购买插件「OCR支持」：第三方服务 - 服务 - 开发者资源 - 搜索「微信OCR识别」

（token自行替换）：https://mp.weixin.qq.com/wxamp/basicprofile/thirdauth?token=1815204188&lang=zh_CN

 

---

 

（重要）查看开发文档和配置详情资料：

https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx4418e3e031e551be&token=2134539181&lang=zh_CN

 

第一步：mainifest.json 编辑以下内容

    "mp-weixin": {
        "appid": "wx******************",
        "setting": {
            "urlCheck": false,
            "minified": true
        },
        "plugins": {
            "ocr-plugin": {
                "version": "3.1.1",
                "provider": "wx******************"
            }
        }
    },

 

第二步：package.json 编辑找到 globalStyle，加入 usingComponents 配置。具体要参考文档。

"globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8",
        "usingComponents": {
            "ocr-navigator": "plugin://ocr-plugin/ocr-navigator"
        }
    }

 

 第三步：index.vue 准备代码

<ocr-navigator @onSuccess="success" certificateType="idCard" :opposite="false">
    <button type="primary">身份证正面识别</button>
</ocr-navigator>
------------------------------------------------------------------------------------
success(...args) {
    console.log(20220610120236, ...args)
},

 

打印资料如下格式：