更新记录

1.0.0（2026-03-02） 下载此版本

更新手写插件

平台兼容性

uni-app(3.6.17)

手写签名识别组件说明文档

一、组件概述

一个基于 uni-app + Vue3 组合式 API 开发的手写签名识别弹窗组件，支持手写绘制、画布操作（清除/撤销）、签名预览、手写内容 OCR 识别及识别状态管理等核心功能，可灵活集成到各类需要手写签名/手写内容识别的业务场景中。

二、核心功能

1. 手写绘制：支持在画布上自由书写，可设置画笔颜色、粗细，触摸事件（开始/移动/结束）处理流畅；
2. 画布操作：提供清除画布、撤销上一步书写的功能；
3. 预览生成：自动将画布内容转为临时图片路径，支持预览展示；
4. OCR 识别：支持手动/自动触发识别，内置超时控制，识别状态（识别中/成功/失败/超时）可视化；
5. 交互控制：弹窗形式展示，支持确认/取消操作，识别结果校验（未识别/识别失败时禁止确认）；
6. 事件通信：通过自定义事件与父组件解耦，识别逻辑由父组件实现，组件仅负责触发和状态管理。

三、使用方式

1. 基础引入

<template>
  <view>
    <!-- 引入签名识别组件 -->
    <at-sign 
      ref="signRef"
      :auto-recognize="true"
      :recognition-timeout="15000"
      :is-ocr="true"
      @confirm="handleConfirm"
      @cancel="handleCancel"
      @recognize="handleRecognize"
      @recognizeStart="handleRecognizeStart"
      @recognizeComplete="handleRecognizeComplete"
    />

    <!-- 打开组件按钮 -->
    <button @tap="openSign">打开签名识别</button>
  </view>
</template>

<script setup>
import AtSign from '@/uni_modules/at-sign/components/at-sign.vue';
import { ref } from 'vue';

const signRef = ref(null);

// 打开签名弹窗
const openSign = () => {
  signRef.value.open();
};

// 确认签名回调
const handleConfirm = (result) => {
  console.log('签名确认：', result);
  // result 包含：imagePath(签名图片路径)、text(识别结果)、paths(书写路径数据)、timestamp(时间戳)
};

// 取消签名回调
const handleCancel = () => {
  console.log('签名取消');
};

// 触发识别回调（父组件实现具体识别逻辑）
const handleRecognize = async (imagePath, paths) => {
  try {
    // 调用OCR接口识别图片内容
    const res = await uni.request({
      url: '你的OCR识别接口',
      method: 'POST',
      data: { imagePath }
    });
    // 设置识别结果到组件
    signRef.value.setRecognitionResult({
      success: true,
      text: res.data.result // 识别出的文字
    });
  } catch (err) {
    // 识别失败
    signRef.value.setRecognitionResult({
      success: false,
      message: '识别失败：' + err.message
    });
  }
};

// 开始识别回调
const handleRecognizeStart = () => {
  console.log('开始识别');
};

// 识别完成回调
const handleRecognizeComplete = (data) => {
  console.log('识别完成：', data);
};
</script>

2. Props 配置项

3. 自定义事件

4. 暴露的方法（defineExpose）

5. 状态变量（暴露）

四、样式说明

五、注意事项

1. 画布初始化：组件打开时通过 uni.createSelectorQuery 获取画布节点，需确保弹窗 visible 为 true 后再初始化（组件已通过 nextTick 处理）；
2. 图片生成：uni.canvasToTempFilePath 生成的临时路径仅在当前会话有效，如需持久化需上传至服务器；
3. 识别逻辑：组件仅触发识别事件，不包含具体OCR识别实现，需父组件对接第三方OCR接口（如阿里云OCR、腾讯云OCR等）；
4. 跨端兼容：基于 uni-app 开发，兼容微信小程序、App、H5 等端，但需注意不同端 canvas 接口的细微差异（组件已做基础兼容）；
5. 性能优化：书写路径过多时，重绘画布可能存在性能问题，可根据业务限制最大书写步数。

总结

1. 该组件是一个高可复用的手写签名识别弹窗，核心能力为手写绘制、画布管理和识别状态管控，识别逻辑解耦给父组件实现，灵活性高；
2. 使用时需通过 ref 调用 open() 打开弹窗，监听 recognize 事件实现OCR接口对接，通过 setRecognitionResult 回传识别结果；
3. 关键配置项 isOcr 控制是否开启识别校验，autoRecognize 控制是否自动识别，可根据业务场景灵活调整。