When the user id card information needs to be collected in the project, the OCR plug-in provided by wechat mini program can be used to scan and obtain the information. The implementation steps and methods are as follows:

1. Access the applets platform and add plug-ins

After adding, you need to receive the free amount, which is 100 times a day. If you have more, you need to buy it. Link address:

Fuwu.weixin.qq.com/detail/000c…

Click the link to enter the following interface and perform corresponding operations:

2. Configure the parameters in the project

2.1 Add a declaration to the app.json file of the small program

Plugins: {"ocr-plugin": {"version": "3.0.6", "provider": "wx4418e3e031e551be"}}Copy the code







2.2 Add a declaration to the JSON of the page to be used

{
  "usingComponents": {
    "ocr-navigator": "plugin://ocr-plugin/ocr-navigator"
  }
}
Copy the code

2.3 Add the following code in the required position:

<view class="app"> <view> <ocr-navigator bind:onSuccess="success_1" certificateType="idCard" opposite="{{false}}"> <button type="primary"> </button> </ocr-navigator> <view class="mt20"> < text > {{name}} < / text > < view > < view > gender: < text > {{sex}} < / text > < view > < view > born: < text > {{birthday}} < / text > < view > < view > national: < text > {{national}} < / text > < view > < view > address: < text > {{address}} < / text > < view > < view > citizen id number: <text>{{idCardNO}}</text></view> </view> </view> <view> <ocr-navigator bind:onSuccess="success_2" <button class="second" type="primary"> </button> </ocr-navigator> <view class="mt20"> <view> <text>{{validTime}}</text> </view> </view> </view> </view>Copy the code

2.4 Perform data assignment in THE JS file

// pages/ my.js Page({data: {name: "", // name: "", // name: "", // name: "", // name: "", // name: "", // name: "", // name: "", // name:" ImgPath :"", // id id id id id id id id id id id id id id id id "', // Valid date}, Success_1 (e) {this.setData({name: e.daile.name.text, sex: e.daile.gender. Text, birthday: e.detail.birth.text, national: e.detail.nationality.text, address: e.detail.address.text, idCardNO: e.detail.id.text, imgPath: e.detail.image_path }) }, success_2(e) { this.setData({ validTime: e.detail.valid_date.text, organazation: e.detail.authority.text }) } })Copy the code

2.5 ocr-navigator label properties: certificateType identifies card types, including: idcard: idcard drivingLicense: driverslicense drivingLicense: driverslicense card: BankCard businessLicense: businessLicense

Opposite: indicates positive or negative.