uni-app微信小程序ocr插件调用及配置，配置小程序其它插件也可以参考此文

最新推荐文章于 2024-04-19 15:26:50 发布

qq_31481269

最新推荐文章于 2024-04-19 15:26:50 发布

阅读量3.9k

点赞数 3

文章标签：微信小程序前端小程序

本文链接：https://blog.csdn.net/qq_31481269/article/details/125562249

版权

1.进入小程序管理后台，在设置->第三方设置->插件管理中添加ocr插件

2.点击ocr插件详情--》在基本信息中获取AppID,在开发文档中获取需要配置的参数，在此之前可以在开放设区中购买，详情见微信OCR识别 | 微信服务市场

plugins中的provider中的值就是AppId

"plugins": {
    "ocr-plugin": {
      "version": "3.1.1",
      "provider": "XXXXXXX"
    }
  }

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

3.在uni-app中的manifest.json中设置mp-weixin

"mp-weixin" : {
/* 微信小程序特有相关 */
"appid" : "wx7136456978135ba2",
       "plugins": {
       "ocr-plugin": {
       "version": "3.1.1",
       "provider": "wx4418e3e031e551be"
       }
       },
"setting" : {
"urlCheck" : false
},
"usingComponents" : {
           "ocr-navigator": "plugin://ocr-plugin/ocr-navigator"
       },
"permission" : {}
},

4.在page.json中设置

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

5.调用ocr相关的插件代码,ocr相关功能请参考ocr.bankcard | 微信开放文档

<ocr-navigator @onSuccess="handleSuccessTop" certificateType="idCard" :opposite="false">
                   <view class="view-code-item">
                       <div class="code-item">
                           <image :src="idCardTop" class="code"></image>
                           <image src='/static/images/camera.png' class="camera"></image>
                       </div>
                       <text>点击上传正面</text>
                   </view>
                   </ocr-navigator>