更新记录

1.0.0（2026-06-24）

• 新版发布

平台兼容性

uni-app(4.87)

uni-app x(4.87)

其他

aries-bdocr 百度 OCR 识别插件

基于百度文字识别 SDK 封装的 UTS 原生插件，适用于 uni-app / uni-app x 项目，支持 Vue2 / Vue3，可在 iOS、Android 真机上调用相机完成多种证件与票据的 OCR 识别。

功能介绍

本插件封装了百度 OCR 文字识别能力，调用后会打开原生相机界面进行拍摄识别，主要支持：

• 身份证（含正反面、自动扫描识别）
• 通用文字识别（基础版 / 含位置 / 高精度 / 生僻字 / 网图）
• 银行卡、驾驶证、行驶证、车牌、VIN 码
• 营业执照、各类票据与发票
• 火车票、出租车票、网约车行程单
• 二维码、数字、护照、户口本、手写文字、试卷分析等

更多识别类型见 ocrType 识别类型 章节。

平台支持

环境要求

• HBuilderX：^3.6.8（见 package.json engines 配置）
• 百度智能云：已创建文字识别应用，并获取授权文件或 AK/SK
• 调试方式：必须制作并安装自定义调试基座后才能在真机调试

特别提醒

1. 购买前请先试用并充分自测，购买后无法退款。
2. 试用与调试必须先打自定义基座（重要，说三遍）。
3. 插件集成后，标准基座无法使用，必须打自定义基座或正式打包才有效。
4. 请结合本文档与示例项目 pages/index/index.vue 集成使用。
5. 使用前请先在百度智能云文字识别控制台创建应用。
6. Android 申请的包名、签名证书须与项目打包时一致；iOS 申请的 Bundle ID 须与项目打包时一致，否则会导致授权失败。
7. 如有使用疑问或 Bug，可进交流群联系作者（见文末联系方式）。

快速开始

1. 导入插件

在 DCloud 插件市场选择本插件，点击「试用」或「购买」，导入到目标 uni-app / uni-app x 项目中。

2. 配置百度授权

在百度智能云控制台创建应用后，选择以下任一鉴权方式：

3. 放置授权文件（LicenseFile 方式）

若使用授权文件鉴权，请将 License 文件重命名为 aip.license(因为Android2.x版本的License文件已经修改成了 aip-ocr.license，所以下载后的aip-ocr.license要把名称改成aip.license再放到插件去)，并放到以下目录：

使用 AK/SK 鉴权可跳过此步骤。

4. 制作自定义调试基座

1. 在 HBuilderX 菜单选择：运行 → 运行到手机或模拟器 → 制作自定义调试基座
2. 等待基座制作完成后，选择 运行到自定义调试基座 进行真机调试

5. 在页面中引入并调用

// uni-app 推荐使用 @ 别名
import * as BDOcr from '@/uni_modules/aries-bdocr'

// 1. 先鉴权
BDOcr.auth({
  type: 'LicenseFile',
  authHandler: (res) => {
    console.log(`鉴权状态码：${res.code}，描述：${res.meg}`)
    if (res.code === 10000) {
      // 鉴权成功后再调用识别
    }
  }
})

// 2. 调用识别
BDOcr.recognition({
  ocrType: 'idCardFront',
  recognitionHandler: (res) => {
    if (res.code === 200) {
      console.log('识别结果 JSON：', res.value)
      console.log('识别图片路径：', res.recognitionImgPath)
    } else {
      console.log('识别失败：', res.meg)
    }
  }
})

// uni-app x 需对参数对象添加类型断言
import * as BDOcr from '@/uni_modules/aries-bdocr'

BDOcr.auth({
  type: 'LicenseFile',
  authHandler: (res) => {
    console.log(`鉴权状态码：${res.code}，描述：${res.meg}`)
  }
} as BDOcr.AuthOptions)

BDOcr.recognition({
  ocrType: 'bankCard',
  recognitionHandler: (res) => {
    if (res['code'] == 200) {
      const data = JSON.parse(res.value)
      console.log(data)
    }
  }
} as BDOcr.RecognitionOptions)

鉴权

调用任何识别功能前，必须先完成鉴权。鉴权成功时 res.code === 10000。

授权文件鉴权（推荐）

适用于 iOS 与 Android。

BDOcr.auth({
  type: 'LicenseFile',
  authHandler: (res) => {
    console.log(`状态码：${res.code}，token：${res.token}，描述：${res.meg}`)
  }
})

AK / SK 鉴权（仅 Android）

BDOcr.auth({
  type: 'AK_SK',
  AK: '你的 API Key',
  SK: '你的 Secret Key',
  authHandler: (res) => {
    console.log(`状态码：${res.code}，token：${res.token}，描述：${res.meg}`)
  }
})

鉴权参数

鉴权回调 AuthResult

错误码参考

• iOS 错误码：https://ai.baidu.com/ai-doc/OCR/Ikibizx02
• Android 错误码：https://ai.baidu.com/ai-doc/OCR/3kibizyl9

识别

调用 recognition 后会打开原生相机界面，用户拍摄完成后在回调中返回识别结果。

uni-app 示例

BDOcr.recognition({
  ocrType: 'localIdCardFront',
  recognitionHandler: (res) => {
    if (res.code === 200) {
      const content = res.value                    // 识别结果 JSON 字符串
      const recognitionImgPath = res.recognitionImgPath  // 拍摄图片本地路径

      if (recognitionImgPath != null && recognitionImgPath !== '') {
        this.imgPath = `file://${recognitionImgPath}`
      }
      this.recognitionValue = content

      const data = JSON.parse(content)
      console.log('识别成功', data)
    } else {
      console.log('识别失败', res.meg)
      this.recognitionValue = res.meg
    }
    uni.hideLoading()
  }
})

uni-app x 示例

BDOcr.recognition({
  ocrType: 'bankCard',
  recognitionHandler: (res) => {
    if (res['code'] == 200) {
      const content = res.value
      const recognitionImgPath = res.recognitionImgPath
      this.imgPath = `file://${recognitionImgPath}`
      this.recognitionValue = content
      const data = JSON.parse(content)
      console.log(data)
    } else {
      this.recognitionValue = res.meg
    }
    uni.hideLoading()
  }
} as BDOcr.RecognitionOptions)

识别参数

识别回调 RecognitionResult

展示图片提示：在页面中展示识别图片时，路径前通常需要加 file:// 前缀，例如 `file://${recognitionImgPath}`。

删除识别图片

识别完成后，可调用 removePicture 删除本地缓存的识别图片。

BDOcr.removePicture({
  path: this.imgPath,   // 支持 file:// 前缀或纯路径
  resultBackcall: (res) => {
    if (res) {
      uni.showToast({ title: '删除成功', icon: 'none' })
      this.imgPath = ''
    } else {
      uni.showToast({ title: '删除失败', icon: 'none' })
    }
  }
})

// uni-app x
BDOcr.removePicture({
  path: this.imgPath,
  resultBackcall: (res) => {
    uni.showToast({ title: res ? '删除成功' : '删除失败', icon: 'none' })
  }
} as BDOcr.DeleteFileParams)

删除参数

API 参考

插件对外暴露三个方法：

类型定义见 utssdk/interface.uts：

• AuthOptions / AuthResult
• RecognitionOptions / RecognitionResult
• DeleteFileParams
• AuthType："LicenseFile" | "AK_SK"
• RecognitionType：所有支持的 ocrType 枚举

ocrType 识别类型

权限说明

插件已内置以下权限声明，无需在主项目的manifest中额外配置。打包时会自动合并到应用中。若需在应用商店上架，请在隐私政策中说明相机与存储权限的用途。

Android

• CAMERA — 调用相机拍摄
• INTERNET — 联网识别
• READ_EXTERNAL_STORAGE / WRITE_EXTERNAL_STORAGE — 读写识别图片（低版本 Android）
• READ_MEDIA_IMAGES / READ_MEDIA_VIDEO — 读取媒体文件（Android 13+）

iOS

插件 info.plist 中已配置：

• NSCameraUsageDescription — 相机访问说明
• NSPhotoLibraryUsageDescription — 相册访问说明

如需自定义权限描述文案，可在项目 manifest.json 的 iOS 配置中覆盖。

常见问题

Q1：标准基座运行报错或无法识别？

本插件为 UTS 原生插件，必须使用自定义调试基座或正式打包，标准基座不包含插件原生代码。

Q2：鉴权失败，提示授权错误？

请检查：

1. 百度控制台应用的 包名 / Bundle ID 是否与当前项目一致
2. Android 的 签名证书 SHA1 是否与申请授权时一致
3. aip.license 是否放在正确目录且文件名无误
4. 是否已重新制作自定义基座（修改授权文件后需重新打基座）

Q3：iOS 能否使用 AK/SK 鉴权？

当前版本 iOS 仅支持授权文件（LicenseFile）鉴权，请使用 aip.license 方式。

Q4：识别成功但页面不显示图片？

确认图片路径是否添加了 file:// 前缀，并检查 recognitionImgPath 是否为空。

Q5：识别结果的字段名是什么？

成功时 res.value 为 JSON 字符串，具体字段结构因识别类型而异，请参考百度 OCR 官方文档中对应接口的返回说明。

Q6：H5 或小程序能否使用？

不可以。本插件依赖原生相机与百度 SDK，仅支持 App 端（iOS / Android）。

开发文档

• UTS 语法
• UTS API 插件
• UTS uni-app 兼容模式组件
• UTS 标准模式组件
• Hello UTS 示例
• 百度文字识别官方文档

联系我们

• 使用问题、Bug 反馈请通过插件市场交流群联系作者

更多好用插件推荐

• 高德定位连续定位后台定位保活定位
• 百度汽车摩托车导航插件
• 百度鹰眼轨迹插件支持后台采集、保活
• 百度定位插件、连续定位、保活、坐标系转换、支持双端
• 计步器插件，支持Android、iOS双端
• uts经典蓝牙插件、蓝牙电子秤
• 获取唯一标识、ServiceID、卸载更新不变iOS+Android
• Android经典蓝牙
• 华为ScanKit统一扫码插件支持iOS+Android原生插件
• 【华为扫码】统一扫码插件支持多码连续扫码支持半屏扫码uts插件iOS+Android+HarmonyOS
• 截屏、录屏、防截屏、录屏iOS、Android
• 人脸采集插件 最新百度SDK 离线人脸采集、活体检测
• 页面截长图、截取WebView内容，生成长截图Android+iOS
• Android无预览拍照、录制、静默拍照、静默录制、抓拍插件支持
• uni高德地图功能拓展地图截图
• 科大讯飞离线合成插件支持iOS、android
• iOS保活Android保活鸿蒙保活定位插件系统定位
• 高德定位、猎鹰轨迹插件
• 海康威视综合安防平台视频播放插件
• 支持NFC读写功能检测支持Android iOS HarmonyOS
• 自定义相机

uniapp完整示例

<template>
    <view class="page">
        <view class="auth-section">
            <text class="section-title">鉴权</text>
            <view class="auth-row">
                <view class="item auth-item" @click="authFile">
                    <text class="title auth-title">授权文件授权（推荐）</text>
                </view>
                <view class="item auth-item" @click="akAuth">
                    <text class="title auth-title">AK—SK 授权（Android）</text>
                </view>
            </view>
        </view>

        <view class="section recognition-section">
            <text class="section-title">识别类型（共 {{ recognitionTypes.length }} 种）</text>
            <scroll-view class="recognition-scroll" scroll-y="true">
                <view class="recognition-grid">
                    <view class="recognition-item" v-for="(item, index) in recognitionTypes" :key="index"
                        @click="onRecognitionItemClick(item)">
                        <text class="recognition-label">{{ item.label }}</text>
                        <text class="type-tag">{{ item.type }}</text>
                    </view>
                </view>
            </scroll-view>
        </view>

        <view class="section result-section">
            <text class="section-title">识别结果</text>
            <view class="item result-action" @click="deleteImage">
                <text class="title">删除识别图片</text>
            </view>
            <scroll-view class="result-scroll" scroll-y="true">
                <text class="result-label">当前类型：{{ currentOcrType }}</text>
                <image v-if="imgPath != ''" :src="imgPath" mode="aspectFit" class="result-image"></image>
                <text class="recognition_text">{{ recognitionValue }}</text>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    import * as BDOcr from '@/uni_modules/aries-bdocr'

    export default {
        data() {
            return {
                imgPath: "",
                recognitionValue: "",
                currentOcrType: "未识别",
                recognitionTypes: [{
                        label: "通用文字（基础版）",
                        type: "textBasic"
                    },
                    {
                        label: "通用文字（含位置）",
                        type: "text"
                    },
                    {
                        label: "通用文字（高精度基础）",
                        type: "textAccurateBasic"
                    },
                    {
                        label: "通用文字（高精度含位置）",
                        type: "textAccurate"
                    },
                    {
                        label: "通用文字（含生僻字）",
                        type: "textEnhanced"
                    },
                    {
                        label: "网图识别",
                        type: "webImage"
                    },
                    {
                        label: "身份证正面",
                        type: "idCardFront"
                    },
                    {
                        label: "身份证正面（自动）",
                        type: "localIdCardFront"
                    },
                    {
                        label: "身份证反面",
                        type: "idCardBack"
                    },
                    {
                        label: "身份证反面（自动）",
                        type: "localIdCardBack"
                    },
                    {
                        label: "银行卡",
                        type: "bankCard"
                    },
                    {
                        label: "驾驶证",
                        type: "drivingLicense"
                    },
                    {
                        label: "行驶证",
                        type: "vehicleLicense"
                    },
                    {
                        label: "车牌",
                        type: "plateNumber"
                    },
                    {
                        label: "营业执照",
                        type: "businessLicense"
                    },
                    {
                        label: "通用票据",
                        type: "receipt"
                    },
                    {
                        label: "增值税发票",
                        type: "valueAddedTax"
                    },
                    {
                        label: "出租车票",
                        type: "taxiReceipt"
                    },
                    {
                        label: "VIN 码",
                        type: "vinCode"
                    },
                    {
                        label: "火车票",
                        type: "trainTicket"
                    },
                    {
                        label: "数字识别",
                        type: "numbers"
                    },
                    {
                        label: "二维码",
                        type: "qrCode"
                    },
                    {
                        label: "户口本",
                        type: "household"
                    },
                    {
                        label: "护照",
                        type: "passport"
                    },
                    {
                        label: "手写文字",
                        type: "writtenText"
                    },
                    {
                        label: "试卷分析",
                        type: "exampleDoc"
                    },
                    {
                        label: "磅单",
                        type: "weightNote"
                    },
                    {
                        label: "网约车行程单",
                        type: "taxiItinerary"
                    },
                    {
                        label: "医疗费用明细",
                        type: "medicalDetail"
                    },
                    {
                        label: "机动车销售发票",
                        type: "vehicleInvoice"
                    },
                    {
                        label: "机打发票",
                        type: "invoice"
                    },
                    {
                        label: "车辆合格证",
                        type: "vehicleCertificate"
                    }
                ]
            }
        },
        methods: {
            authFile() {
                BDOcr.auth({
                    type: "LicenseFile",
                    authHandler: (res) => {
                        console.log(`鉴权状态码：${res.code}----提示：${res.meg}`)
                        uni.showToast({
                            title: res.code == 10000 ? "鉴权成功" : res.meg,
                            icon: "none"
                        })
                    }
                })
            },
            akAuth() {
                BDOcr.auth({
                    type: "AK_SK",
                    AK: "fC2ttd4bvLW2Z7qI7PSeQfe2",
                    SK: "k3gm3z3AzKbf9kWDV8E57YeE4CpP9PSo",
                    authHandler: (res) => {
                        console.log(`鉴权状态码：${res.code}----提示：${res.meg}`)
                        uni.showToast({
                            title: res.code == 10000 ? "鉴权成功" : res.meg,
                            icon: "none"
                        })
                    }
                })
            },
            onRecognitionItemClick(item) {
                switch (item.type) {
                    case "textBasic":
                        this.recognizeTextBasic();
                        break
                    case "text":
                        this.recognizeText();
                        break
                    case "textAccurateBasic":
                        this.recognizeTextAccurateBasic();
                        break
                    case "textAccurate":
                        this.recognizeTextAccurate();
                        break
                    case "textEnhanced":
                        this.recognizeTextEnhanced();
                        break
                    case "webImage":
                        this.recognizeWebImage();
                        break
                    case "idCardFront":
                        this.recognizeIdCardFront();
                        break
                    case "localIdCardFront":
                        this.recognizeLocalIdCardFront();
                        break
                    case "idCardBack":
                        this.recognizeIdCardBack();
                        break
                    case "localIdCardBack":
                        this.recognizeLocalIdCardBack();
                        break
                    case "bankCard":
                        this.recognizeBankCard();
                        break
                    case "drivingLicense":
                        this.recognizeDrivingLicense();
                        break
                    case "vehicleLicense":
                        this.recognizeVehicleLicense();
                        break
                    case "plateNumber":
                        this.recognizePlateNumber();
                        break
                    case "businessLicense":
                        this.recognizeBusinessLicense();
                        break
                    case "receipt":
                        this.recognizeReceipt();
                        break
                    case "valueAddedTax":
                        this.recognizeValueAddedTax();
                        break
                    case "taxiReceipt":
                        this.recognizeTaxiReceipt();
                        break
                    case "vinCode":
                        this.recognizeVinCode();
                        break
                    case "trainTicket":
                        this.recognizeTrainTicket();
                        break
                    case "numbers":
                        this.recognizeNumbers();
                        break
                    case "qrCode":
                        this.recognizeQrCode();
                        break
                    case "household":
                        this.recognizeHousehold();
                        break
                    case "passport":
                        this.recognizePassport();
                        break
                    case "writtenText":
                        this.recognizeWrittenText();
                        break
                    case "exampleDoc":
                        this.recognizeExampleDoc();
                        break
                    case "weightNote":
                        this.recognizeWeightNote();
                        break
                    case "taxiItinerary":
                        this.recognizeTaxiItinerary();
                        break
                    case "medicalDetail":
                        this.recognizeMedicalDetail();
                        break
                    case "vehicleInvoice":
                        this.recognizeVehicleInvoice();
                        break
                    case "invoice":
                        this.recognizeInvoice();
                        break
                    case "vehicleCertificate":
                        this.recognizeVehicleCertificate();
                        break
                    default:
                        break
                }
            },
            doRecognition(ocrType) {
                this.currentOcrType = ocrType
                this.recognitionValue = "识别中..."
                this.imgPath = ""
                BDOcr.recognition({
                    ocrType: ocrType,
                    recognitionHandler: (res) => {
                        if (res["code"] == 200) {
                            const content = res.value
                            const recognitionImgPath = res.recognitionImgPath
                            if (recognitionImgPath != null && recognitionImgPath != "") {
                                this.imgPath = `file://${recognitionImgPath}`
                            }
                            this.recognitionValue = content
                            try {
                                const data = JSON.parse(content)
                                console.log(`[${ocrType}] 识别成功`, data)
                            } catch (e) {
                                console.log(`[${ocrType}] 识别成功`, content)
                            }
                        } else {
                            console.log(`[${ocrType}] 识别失败`, res)
                            this.recognitionValue = res.meg
                        }
                        uni.hideLoading()
                    }
                })
            },
            recognizeTextBasic() {
                this.doRecognition("textBasic")
            },
            recognizeText() {
                this.doRecognition("text")
            },
            recognizeTextAccurateBasic() {
                this.doRecognition("textAccurateBasic")
            },
            recognizeTextAccurate() {
                this.doRecognition("textAccurate")
            },
            recognizeTextEnhanced() {
                this.doRecognition("textEnhanced")
            },
            recognizeWebImage() {
                this.doRecognition("webImage")
            },
            recognizeIdCardFront() {
                this.doRecognition("idCardFront")
            },
            recognizeLocalIdCardFront() {
                this.doRecognition("localIdCardFront")
            },
            recognizeIdCardBack() {
                this.doRecognition("idCardBack")
            },
            recognizeLocalIdCardBack() {
                this.doRecognition("localIdCardBack")
            },
            recognizeBankCard() {
                this.doRecognition("bankCard")
            },
            recognizeDrivingLicense() {
                this.doRecognition("drivingLicense")
            },
            recognizeVehicleLicense() {
                this.doRecognition("vehicleLicense")
            },
            recognizePlateNumber() {
                this.doRecognition("plateNumber")
            },
            recognizeBusinessLicense() {
                this.doRecognition("businessLicense")
            },
            recognizeReceipt() {
                this.doRecognition("receipt")
            },
            recognizeValueAddedTax() {
                this.doRecognition("valueAddedTax")
            },
            recognizeTaxiReceipt() {
                this.doRecognition("taxiReceipt")
            },
            recognizeVinCode() {
                this.doRecognition("vinCode")
            },
            recognizeTrainTicket() {
                this.doRecognition("trainTicket")
            },
            recognizeNumbers() {
                this.doRecognition("numbers")
            },
            recognizeQrCode() {
                this.doRecognition("qrCode")
            },
            recognizeHousehold() {
                this.doRecognition("household")
            },
            recognizePassport() {
                this.doRecognition("passport")
            },
            recognizeWrittenText() {
                this.doRecognition("writtenText")
            },
            recognizeExampleDoc() {
                this.doRecognition("exampleDoc")
            },
            recognizeWeightNote() {
                this.doRecognition("weightNote")
            },
            recognizeTaxiItinerary() {
                this.doRecognition("taxiItinerary")
            },
            recognizeMedicalDetail() {
                this.doRecognition("medicalDetail")
            },
            recognizeVehicleInvoice() {
                this.doRecognition("vehicleInvoice")
            },
            recognizeInvoice() {
                this.doRecognition("invoice")
            },
            recognizeVehicleCertificate() {
                this.doRecognition("vehicleCertificate")
            },
            deleteImage() {
                if (this.imgPath == "") {
                    uni.showToast({
                        title: "暂无图片",
                        icon: "none"
                    })
                    return
                }
                BDOcr.removePicture({
                    path: this.imgPath,
                    resultBackcall: (res) => {
                        uni.showToast({
                            title: res ? "删除成功" : "删除失败",
                            icon: "none"
                        })
                        if (res) {
                            this.imgPath = ""
                        }
                    }
                })
            }
        }
    }
</script>

<style>
    .page {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 20rpx;
        box-sizing: border-box;
        height: 100%;
    }

    .auth-section {
        flex-shrink: 0;
        margin-bottom: 16rpx;
        background-color: aliceblue;
    }

    .auth-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .auth-item {
        width: 48%;
        margin-top: 0;
    }

    .auth-title {
        font-size: 28rpx;
    }

    .section {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .recognition-section {
        flex: 1.2;
        margin-bottom: 16rpx;
    }

    .result-section {
        flex: 1;
        background-color: aliceblue;
    }

    .section-title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
        flex-shrink: 0;
    }

    .item {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: bisque;
        height: 88rpx;
        margin-top: 16rpx;
        border-radius: 8rpx;
    }

    .result-action {
        margin-top: 0;
        margin-bottom: 10rpx;
        flex-shrink: 0;
    }

    .recognition-scroll {
        flex: 1;
        height: 500rpx;
    }

    .recognition-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-bottom: 16rpx;
    }

    .recognition-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 32%;
        min-height: 60rpx;
        margin-top: 8rpx;
        padding: 8rpx 4rpx;
        background-color: bisque;
        border-radius: 8rpx;
        box-sizing: border-box;
    }

    .recognition-label {
        font-size: 24rpx;
        color: #333;
        text-align: center;
        line-height: 1.2;
    }

    .type-tag {
        font-size: 20rpx;
        color: #666;
        margin-top: 4rpx;
        text-align: center;
    }

    .title {
        font-size: 16px;
        color: #333;
    }

    .result-scroll {
        flex: 1;
        height: 0;
        padding-bottom: 20rpx;
        box-sizing: border-box;
    }

    .result-label {
        display: flex;
        font-size: 14px;
        color: #666;
        margin-top: 10rpx;
    }

    .result-image {
        width: 100%;
        height: 240rpx;
        margin-top: 16rpx;
        background-color: beige;
    }

    .recognition_text {
        display: flex;
        width: 100%;
        margin-top: 16rpx;
        font-size: 14px;
        color: #333;
        word-break: break-all;
        line-height: 1.5;
    }
</style>

uniapp-x完整示例

<template>
    <view class="page">
        <view class="auth-section">
            <text class="section-title">鉴权</text>
            <view class="auth-row">
                <view class="item auth-item" @click="authFile">
                    <text class="title auth-title">授权文件授权（推荐）</text>
                </view>
                <view class="item auth-item" @click="akAuth">
                    <text class="title auth-title">AK—SK 授权（Android）</text>
                </view>
            </view>
        </view>

        <view class="section recognition-section">
            <text class="section-title">识别类型（共 {{ recognitionTypes.length }} 种）</text>
            <scroll-view class="recognition-scroll" scroll-y="true">
                <view class="recognition-grid">
                    <view
                        class="recognition-item"
                        v-for="(item, index) in recognitionTypes"
                        :key="index"
                        @click="onRecognitionItemClick(item)"
                    >
                        <text class="recognition-label">{{ item.label }}</text>
                        <text class="type-tag">{{ item.type }}</text>
                    </view>
                </view>
            </scroll-view>
        </view>

        <view class="section result-section">
            <text class="section-title">识别结果</text>
            <view class="item result-action" @click="deleteImage">
                <text class="title">删除识别图片</text>
            </view>
            <scroll-view class="result-scroll" scroll-y="true">
                <text class="result-label">当前类型：{{ currentOcrType }}</text>
                <image
                    v-if="imgPath != ''"
                    :src="imgPath"
                    mode="aspectFit"
                    class="result-image"
                ></image>
                <text class="recognition_text">{{ recognitionValue }}</text>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    import * as BDOcr from '@/uni_modules/aries-bdocr'

    type RecognitionItem = {
        label : string,
        type : string
    }

    export default {
        data() {
            return {
                imgPath: "",
                recognitionValue: "",
                currentOcrType: "未识别",
                recognitionTypes: [
                    { label: "通用文字（基础版）", type: "textBasic" },
                    { label: "通用文字（含位置）", type: "text" },
                    { label: "通用文字（高精度基础）", type: "textAccurateBasic" },
                    { label: "通用文字（高精度含位置）", type: "textAccurate" },
                    { label: "通用文字（含生僻字）", type: "textEnhanced" },
                    { label: "网图识别", type: "webImage" },
                    { label: "身份证正面", type: "idCardFront" },
                    { label: "身份证正面（自动）", type: "localIdCardFront" },
                    { label: "身份证反面", type: "idCardBack" },
                    { label: "身份证反面（自动）", type: "localIdCardBack" },
                    { label: "银行卡", type: "bankCard" },
                    { label: "驾驶证", type: "drivingLicense" },
                    { label: "行驶证", type: "vehicleLicense" },
                    { label: "车牌", type: "plateNumber" },
                    { label: "营业执照", type: "businessLicense" },
                    { label: "通用票据", type: "receipt" },
                    { label: "增值税发票", type: "valueAddedTax" },
                    { label: "出租车票", type: "taxiReceipt" },
                    { label: "VIN 码", type: "vinCode" },
                    { label: "火车票", type: "trainTicket" },
                    { label: "数字识别", type: "numbers" },
                    { label: "二维码", type: "qrCode" },
                    { label: "户口本", type: "household" },
                    { label: "护照", type: "passport" },
                    { label: "手写文字", type: "writtenText" },
                    { label: "试卷分析", type: "exampleDoc" },
                    { label: "磅单", type: "weightNote" },
                    { label: "网约车行程单", type: "taxiItinerary" },
                    { label: "医疗费用明细", type: "medicalDetail" },
                    { label: "机动车销售发票", type: "vehicleInvoice" },
                    { label: "机打发票", type: "invoice" },
                    { label: "车辆合格证", type: "vehicleCertificate" }
                ] as RecognitionItem[]
            }
        },
        methods: {
            authFile() {
                BDOcr.auth({
                    type: "LicenseFile",
                    authHandler: (res) => {
                        console.log(`鉴权状态码：${res.code}----提示：${res.meg}`)
                        uni.showToast({
                            title: res.code == 10000 ? "鉴权成功" : res.meg,
                            icon: "none"
                        })
                    }
                } as BDOcr.AuthOptions)
            },
            akAuth() {
                BDOcr.auth({
                    type: "AK_SK",
                    AK: "fC2ttd4bvLW2Z7qI7PSeQfe2",
                    SK: "k3gm3z3AzKbf9kWDV8E57YeE4CpP9PSo",
                    authHandler: (res) => {
                        console.log(`鉴权状态码：${res.code}----提示：${res.meg}`)
                        uni.showToast({
                            title: res.code == 10000 ? "鉴权成功" : res.meg,
                            icon: "none"
                        })
                    }
                } as BDOcr.AuthOptions)
            },
            onRecognitionItemClick(item : RecognitionItem) {
                switch (item.type) {
                    case "textBasic": this.recognizeTextBasic(); break
                    case "text": this.recognizeText(); break
                    case "textAccurateBasic": this.recognizeTextAccurateBasic(); break
                    case "textAccurate": this.recognizeTextAccurate(); break
                    case "textEnhanced": this.recognizeTextEnhanced(); break
                    case "webImage": this.recognizeWebImage(); break
                    case "idCardFront": this.recognizeIdCardFront(); break
                    case "localIdCardFront": this.recognizeLocalIdCardFront(); break
                    case "idCardBack": this.recognizeIdCardBack(); break
                    case "localIdCardBack": this.recognizeLocalIdCardBack(); break
                    case "bankCard": this.recognizeBankCard(); break
                    case "drivingLicense": this.recognizeDrivingLicense(); break
                    case "vehicleLicense": this.recognizeVehicleLicense(); break
                    case "plateNumber": this.recognizePlateNumber(); break
                    case "businessLicense": this.recognizeBusinessLicense(); break
                    case "receipt": this.recognizeReceipt(); break
                    case "valueAddedTax": this.recognizeValueAddedTax(); break
                    case "taxiReceipt": this.recognizeTaxiReceipt(); break
                    case "vinCode": this.recognizeVinCode(); break
                    case "trainTicket": this.recognizeTrainTicket(); break
                    case "numbers": this.recognizeNumbers(); break
                    case "qrCode": this.recognizeQrCode(); break
                    case "household": this.recognizeHousehold(); break
                    case "passport": this.recognizePassport(); break
                    case "writtenText": this.recognizeWrittenText(); break
                    case "exampleDoc": this.recognizeExampleDoc(); break
                    case "weightNote": this.recognizeWeightNote(); break
                    case "taxiItinerary": this.recognizeTaxiItinerary(); break
                    case "medicalDetail": this.recognizeMedicalDetail(); break
                    case "vehicleInvoice": this.recognizeVehicleInvoice(); break
                    case "invoice": this.recognizeInvoice(); break
                    case "vehicleCertificate": this.recognizeVehicleCertificate(); break
                    default: break
                }
            },
            doRecognition(ocrType : string) {
                this.currentOcrType = ocrType
                this.recognitionValue = "识别中..."
                this.imgPath = ""
                BDOcr.recognition({
                    ocrType: ocrType,
                    recognitionHandler: (res) => {
                        if (res["code"] == 200) {
                            const content = res.value
                            const recognitionImgPath = res.recognitionImgPath
                            if (recognitionImgPath != null && recognitionImgPath != "") {
                                this.imgPath = `file://${recognitionImgPath}`
                            }
                            this.recognitionValue = content
                            try {
                                const data = JSON.parse(content)
                                console.log(`[${ocrType}] 识别成功`, data)
                            } catch (e) {
                                console.log(`[${ocrType}] 识别成功`, content)
                            }
                        } else {
                            console.log(`[${ocrType}] 识别失败`, res)
                            this.recognitionValue = res.meg
                        }
                        uni.hideLoading()
                    }
                } as BDOcr.RecognitionOptions)
            },
            recognizeTextBasic() { this.doRecognition("textBasic") },
            recognizeText() { this.doRecognition("text") },
            recognizeTextAccurateBasic() { this.doRecognition("textAccurateBasic") },
            recognizeTextAccurate() { this.doRecognition("textAccurate") },
            recognizeTextEnhanced() { this.doRecognition("textEnhanced") },
            recognizeWebImage() { this.doRecognition("webImage") },
            recognizeIdCardFront() { this.doRecognition("idCardFront") },
            recognizeLocalIdCardFront() { this.doRecognition("localIdCardFront") },
            recognizeIdCardBack() { this.doRecognition("idCardBack") },
            recognizeLocalIdCardBack() { this.doRecognition("localIdCardBack") },
            recognizeBankCard() { this.doRecognition("bankCard") },
            recognizeDrivingLicense() { this.doRecognition("drivingLicense") },
            recognizeVehicleLicense() { this.doRecognition("vehicleLicense") },
            recognizePlateNumber() { this.doRecognition("plateNumber") },
            recognizeBusinessLicense() { this.doRecognition("businessLicense") },
            recognizeReceipt() { this.doRecognition("receipt") },
            recognizeValueAddedTax() { this.doRecognition("valueAddedTax") },
            recognizeTaxiReceipt() { this.doRecognition("taxiReceipt") },
            recognizeVinCode() { this.doRecognition("vinCode") },
            recognizeTrainTicket() { this.doRecognition("trainTicket") },
            recognizeNumbers() { this.doRecognition("numbers") },
            recognizeQrCode() { this.doRecognition("qrCode") },
            recognizeHousehold() { this.doRecognition("household") },
            recognizePassport() { this.doRecognition("passport") },
            recognizeWrittenText() { this.doRecognition("writtenText") },
            recognizeExampleDoc() { this.doRecognition("exampleDoc") },
            recognizeWeightNote() { this.doRecognition("weightNote") },
            recognizeTaxiItinerary() { this.doRecognition("taxiItinerary") },
            recognizeMedicalDetail() { this.doRecognition("medicalDetail") },
            recognizeVehicleInvoice() { this.doRecognition("vehicleInvoice") },
            recognizeInvoice() { this.doRecognition("invoice") },
            recognizeVehicleCertificate() { this.doRecognition("vehicleCertificate") },
            deleteImage() {
                if (this.imgPath == "") {
                    uni.showToast({ title: "暂无图片", icon: "none" })
                    return
                }
                BDOcr.removePicture({
                    path: this.imgPath,
                    resultBackcall: (res) => {
                        uni.showToast({
                            title: res ? "删除成功" : "删除失败",
                            icon: "none"
                        })
                        if (res) {
                            this.imgPath = ""
                        }
                    }
                } as BDOcr.DeleteFileParams)
            }
        }
    }
</script>

<style>
    .page {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 20rpx;
        box-sizing: border-box;
    }

    .auth-section {
        flex-shrink: 0;
        margin-bottom: 16rpx;
    }

    .auth-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .auth-item {
        width: 48%;
        margin-top: 0;
    }

    .auth-title {
        font-size: 28rpx;
    }

    .section {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .recognition-section {
        flex: 1.2;
        margin-bottom: 16rpx;
    }

    .result-section {
        flex: 1;
    }

    .section-title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
        flex-shrink: 0;
    }

    .item {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: bisque;
        height: 88rpx;
        margin-top: 16rpx;
        border-radius: 8rpx;
    }

    .result-action {
        margin-top: 0;
        margin-bottom: 10rpx;
        flex-shrink: 0;
    }

    .recognition-scroll {
        flex: 1;
        height: 0;
    }

    .recognition-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-bottom: 16rpx;
    }

    .recognition-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 32%;
        min-height: 60rpx;
        margin-top: 8rpx;
        padding: 8rpx 4rpx;
        background-color: bisque;
        border-radius: 8rpx;
        box-sizing: border-box;
    }

    .recognition-label {
        font-size: 24rpx;
        color: #333;
        text-align: center;
        line-height: 1.2;
    }

    .type-tag {
        font-size: 20rpx;
        color: #666;
        margin-top: 4rpx;
        text-align: center;
    }

    .title {
        font-size: 16px;
        color: #333;
    }

    .result-scroll {
        flex: 1;
        height: 0;
        padding-bottom: 20rpx;
        box-sizing: border-box;
    }

    .result-label {
        display: flex;
        font-size: 14px;
        color: #666;
        margin-top: 10rpx;
    }

    .result-image {
        width: 100%;
        height: 240rpx;
        margin-top: 16rpx;
        background-color: beige;
    }

    .recognition_text {
        display: flex;
        width: 100%;
        margin-top: 16rpx;
        font-size: 14px;
        color: #333;
        word-break: break-all;
        line-height: 1.5;
    }
</style>