微信小程序中使用官方OCR插件-Taro Vue3（实践）

由于使用了Taro配合Vue3来集成小程序项目，在使用微信小程序OCR插件的过程中遇到了一些坑，在这里记录一下：

• 非原生小程序组件无法获取到识别后的回调onSuccess。
• 识别之后提示：出现未识别身份证报错

在你的账号添加小程序插件

这个直接参考OCR 开发文档

在Taro中引入小程序组件

查看 官方示例 需要改两个地方

src/app.config.ts

export default {
    //...
    plugins:{
      "ocr-plugin": {
        "version": "3.1.1",
        "provider": "wx4418e3e031e551be" 
      }
    }
}

页面下的配置文件

src/pages/你的页面文件夹名称/index.config.ts

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

使用

vue template 代码

<ocr-navigator @success="success" certificateType="idCard" >
  <button type="primary">身份证正面识别</button>
</ocr-navigator>
<ocr-navigator @success="success" certificateType="idCard" :opposite="true">
  <button type="primary">身份证反面识别</button>
</ocr-navigator>

可以识别成功但是onSuccess未执行，包括使用JSX也是这种问题

解决：需要写一个原生的小程序组件

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

解决方法来源： 参考issue

封装一个ocr-navigator原生组件

ocr-navigator.wxml

<Component>
  <view>
    <ocr-navigator bind:onSuccess="success" certificateType="{{certificateType}}" opposite="{{opposite}}">
      <slot />
    </ocr-navigator>
  </view>
</Component>

ocr-navigator.js

Component({
  properties:{
    certificateType:{
      type:String,
      value: 'idCard'
    },
    opposite:{
      type: Boolean,
      value: true
    }
  },
  methods:{
    success(e){
      this.triggerEvent('success', {
        detail: e.detail
      },{})
    },
  },
})

ocr-navigator.json

{
  "component": true,
  "usingComponents": {
    "ocr-navigator": "plugin://ocr-plugin/ocr-navigator"
  }
}

template 使用示例

  <ocr-component @success="onSuccess" certificateType="idCard" :opposite="false">
    <image :src="idCard_front" alt="身份证正面" mode="aspectFit"/>
  </ocr-component>
  <ocr-component @success="onSuccess" certificateType="idCard" :opposite="true">
   <Image src={idCard_back} alt="身份证反面" mode="aspectFit"/>
  </ocr-component>
</view>

JSX 使用示例

<ocr-component onSuccess={onSuccess}>
  <Image src={idCard_front} alt="身份证正面" mode="aspectFit"/>
</ocr-component>
<ocr-component onSuccess={onSuccess}>
  <Image src={idCard_back} alt="身份证反面" mode="aspectFit"/>
</ocr-component>

其他问题

识别之后提示：出现未识别身份证报错

进入微信OCR识别购买一个免费的即可。

解决方法来源：参考issue