在taro 框架中使用React + 使用原生的支付宝ocr插件实现证件号码识别（demo）

1.申请支付宝开发者平台申请ocr开放功能，获得provider

2. 在支付宝开发者平台查看原生ocr使用的代码示例 文档的地址：小程序文档 - 支付宝文档中心

3. 在app.config.js中使用 

//app.config.js 来引入插件
plugins = {

ocr: {

version: "*",

provider: "20********78316", //插件的标识

},

};

。。。。
。。。。
。。。。

export default {
  pages,
  subpackages: subpackages,//分包
  plugins: plugins,//插件
  window: {
    backgroundTextStyle: "light",
    navigationBarBackgroundColor: "#fff",
    navigationBarTitleText: "XXX",
    navigationBarTextStyle: "black",
  },
};

4.使用支付宝原生代码编写ocr识别页面

//index.axml

<view >

<!-- pages/ocr/ocr.axml -->
<ocr-id
  type="{{type}}"
  title="{{ocrTitle}}"
  onComplete="onCompleteOcr"
  imageOutput="{{imageOutput}}"
/>

</view>

//index.js

// pages/ocr/ocr.js
import Taro from "@tarojs/taro";

Page({
  data: {
    type: "avatar", //type参数为”emblem“，或”avatar“
    imageOutput: "roi", //imageOutput参数为“global”或者“roi”
    ocrTitle: "请把身份证人像面放置在取像框",
  },
  onLoad() {
    // console.info(`Page onLoad with query: ${JSON.stringify(query)}`);
    // const { type } = query;
    // this.setData({ type });
  },
  onCompleteOcr(data) {
    console.info("result=====>", JSON.stringify(data.result[0].body));

    let pages = Taro.getCurrentPages(); // 获取当前的页面栈
    let prevPage = pages[pages.length - 2]; //  获取上一页面
    let body = data.result[0].body;

    prevPage.setData({
      //设置上一个页面的值
      resultocr: body,
    });
    Taro.navigateBack({
      delta: 1, //表示回到上一页面
    });
  },
});

//index.json

{
  "defaultTitle": "身份证件号码识别",
  "usingComponents": {
    "ocr-id": "plugin://ocr/ocr-id" //支付宝ocr识别插件地址
 }
}

5. 在需要的界面直接调用插件即可

//跳转ocr界面

                jump({
                  url: "/pages/ocr-alipay/index",
                  payload: {
                    text: "OCR",
                  },
                });


//ocr识别成功获取数据

 componentDidShow() {
    if (isALIPAY) {
      let pages = Taro.getCurrentPages();
      let currPage = pages[pages.length - 1]; // 获取当前页面
      console.log("======currPage.data=========", currPage.data);
      var body = currPage.data.resultocr;
      console.log("======ocr返回=========", body);
      var that = this;
      if (Array.isArray(body)) {
        console.log("======ocr返回=========", body[0]);
        if (body[0]) {
          Taro.showModal({
            title: "确认信息",
            content: "姓名:" + body[0].name + "\n 身份证号:" + body[0].num,
            confirmText: "确认",
            confirmColor: "#4b9df9",
            cancelText: "重新识别",
            cancelColor: "#4b9df9",
            showCancel: true, //是否显示取消按钮
            success(res) {
              if (res.confirm || res.errMsg === "confirm") {
                that.setState({
                  djxmstr: body[0].name,
                  djzjhmstr: body[0].num,
                });
                currPage.setData({
                  //设置上一个页面的值
                  resultocr: "",
                });
              } else {
                currPage.setData({
                  //设置上一个页面的值
                  resultocr: "",
                });
                jump({
                  url: "/pages/ocr-alipay/index",
                  payload: {
                    text: "OCR",
                  },
                });
              }
            },
          });
        }
      }
    }

  }

结语：创作不易，请多多支持！