更新记录

1.0.0（2026-06-24）

  • 新版发布

平台兼容性

uni-app(4.87)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
√ √ × × × × 5.0 12 ×
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
× × × × × × × × × × × ×

uni-app x(4.87)

Chrome Safari Android iOS 鸿蒙 微信小程序
× × 5.0 12 × ×

aries-bdocr 百度 OCR 识别插件

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

功能介绍

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

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

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

平台支持

平台 支持情况 说明
Android App ✅ 支持授权文件鉴权、AK/SK 鉴权
iOS App ✅ 仅支持授权文件鉴权
H5 / 小程序 ❌ 不支持，需使用 App 端
框架 支持情况
uni-app（Vue2 / Vue3） ✅
uni-app x ✅

环境要求

  • 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. 配置百度授权

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

鉴权方式 适用平台 说明
授权文件（推荐） iOS / Android 下载 License 文件，按下方路径放置
AK / SK 仅 Android 在代码中传入 API Key 与 Secret Key

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

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

平台 路径
iOS uni_modules/aries-bdocr/utssdk/app-ios/Resources/aip.license
Android uni_modules/aries-bdocr/utssdk/app-android/assets/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}`)
  }
})

鉴权参数

参数 类型 必填 说明
type string 是 鉴权类型：LicenseFile（授权文件）或 AK_SK
AK string 否 百度 API Key，使用 AK_SK 时必填
SK string 否 百度 Secret Key，使用 AK_SK 时必填
authHandler function 否 鉴权结果回调

鉴权回调 AuthResult

字段 类型 说明
code number 状态码，10000 表示鉴权成功
meg string 描述信息
token string 访问令牌（鉴权成功时返回）

错误码参考

识别

调用 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)

识别参数

参数 类型 必填 说明
ocrType string 是 识别类型，见下表
recognitionHandler function 是 识别结果回调

识别回调 RecognitionResult

字段 类型 说明
code number 状态码，200 表示识别成功
meg string 描述信息
value string 识别结果，成功时为 JSON 字符串，需 JSON.parse 解析
recognitionImgPath string 拍摄图片的本地路径，可用于 <image> 展示

展示图片提示：在页面中展示识别图片时，路径前通常需要加 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)

删除参数

参数 类型 必填 说明
path string 是 图片路径，支持 file:// 前缀
resultBackcall function 是 删除结果回调，true 表示成功

API 参考

插件对外暴露三个方法：

方法 说明
auth(options) 百度 OCR 鉴权，识别前必须调用
recognition(options) 打开相机进行 OCR 识别
removePicture(options) 删除识别产生的本地图片

类型定义见 utssdk/interface.uts：

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

ocrType 识别类型

ocrType 说明 平台备注
idCardFront 身份证正面 —
idCardBack 身份证反面 —
localIdCardFront 身份证正面扫描（自动识别） —
localIdCardBack 身份证反面扫描（自动识别） —
textBasic 通用文字识别（基础版） —
text 通用文字识别（含位置信息） —
textAccurateBasic 通用文字识别（高精度基础版） —
textAccurate 通用文字识别（高精度含位置） —
textEnhanced 通用文字识别（含生僻字） —
webImage 网络图片文字识别 —
bankCard 银行卡 —
drivingLicense 驾驶证 —
vehicleLicense 行驶证 —
plateNumber 车牌 —
businessLicense 营业执照 —
receipt 通用票据 —
valueAddedTax 增值税发票 —
taxiReceipt 出租车票 —
vinCode VIN 码 —
trainTicket 火车票 —
numbers 数字识别 —
qrCode 二维码 —
household 户口本 —
passport 护照 —
writtenText 手写文字 —
exampleDoc 试卷分析 —
weightNote 磅单 —
taxiItinerary 网约车行程单 —
medicalDetail 医疗费用明细 —
vehicleInvoice 机动车销售发票 —
invoice 通用机打发票 —
businessCard 名片 仅 Android
vehicleCertificate 车辆合格证 仅 iOS

权限说明

插件已内置以下权限声明，无需在主项目的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）。

开发文档

联系我们

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

更多好用插件推荐

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>

隐私、权限声明

1. 本插件需要申请的系统权限列表：

相机、相册、文件存储

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件自身不采集任何数据，插件使用的百度文字识别SDK采集数据，请参考其官方说明：https://ai.baidu.com/ai-doc/OCR/ck3h7xws3

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

评论列表 撰写评论 向官方投诉

暂无用户评论。