更新记录

0.1.0（2026-10-27）

首个版本。

• canvas 双路径渲染：H5/微信小程序 2d 高清（DPR 缩放、物理像素导出），App 与其他小程序兼容路径
• 笔迹平滑：最小距离采样 + 二次贝塞尔中点平滑，单点成墨点
• 撤销 / 清空 / 空白检测
• 导出：白底/米黄/透明 PNG；H5 返回 base64，小程序/App 返回临时文件
• 内置全屏签署覆盖层，Promise 化回调
• 毛绒 / 简洁双皮肤
• Vue2 / Vue3 双版本兼容；纯本地运行，无网络请求与数据采集

平台兼容性

uni-app(3.8.7)

uni-app x

赢冬签名板（yd-signature）

试用提示：DCloud 平台的付费前端组件试用机制仅支持 uni-app x 项目，uni-app 项目无法运行试用。uni-app 项目请直接购买授权；接入疑问欢迎评论区留言，会及时回复。

开箱即用的 uni-app 电子签名组件：笔迹平滑、撤销清空、空白检测、透明/底色 PNG 导出、内置全屏签署模式，毛绒/简洁双皮肤，Vue2/Vue3 双版本兼容。

纯本地运行：不请求网络、不采集任何数据、无第三方依赖。

快速开始

组件位于 uni_modules/yd-signature，导入插件后直接使用（easycom 自动注册，无需 import）：

<template>
  <yd-signature
    ref="sig"
    pen-color="#0F172A"
    :pen-width="3.5"
    bg-color="#FFFFFF"
    height="220px"
    skin="fluffy"
    @exported="onExported"
  />
</template>

<script>
export default {
  methods: {
    onExported(res) {
      // H5：res.base64 为 dataURL；小程序/App：res.tempFilePath 为临时文件
      console.log(res.tempFilePath)
    }
  }
}
</script>

全屏签署（合同/知情同意书场景）

this.$refs.sig.openFullscreen({ title: '《知情同意书》签署' })
  .then((res) => {
    // 用户确认并导出成功
  })
  .catch((err) => {
    // err.errCode === 'YD_SIG_CANCEL' 表示用户取消
  })

Props

事件

方法（ref 调用）

平台差异与失败处理

• H5 / 微信小程序：canvas 2d 上下文渲染，支持设备像素比缩放，导出为物理像素级清晰 PNG；H5 导出返回 base64（tempFilePath 同为 dataURL，可直接用于 <image> 与上传）。
• App / 支付宝 / 抖音等小程序：uni.createCanvasContext 兼容路径，导出用 destWidth/destHeight 放大（export-scale 倍），返回临时文件路径。
• 签名为空导出：reject { errCode: 'YD_SIG_EMPTY' }；全屏层内确认空签名会 toast 提示并保留界面。
• 用户取消全屏：reject { errCode: 'YD_SIG_CANCEL' }，接入方按需静默或提示。
• 笔宽/坐标均为逻辑像素，跨端视觉一致；底色会合成为导出图的一部分（transparent 除外）。
• 横屏签署建议直接使用内置全屏覆盖层（自动处理状态栏与安全区），无需页面横屏配置。

常见问题

• 多实例：支持同页多个组件实例，画布 ID 自动隔离。
• 深色界面：设置 bg-color 为深色、pen-color 为浅色即可；建议主题切换时联动改 pen-color（参考 Demo 的主题联动）。
• 笔迹断续：组件内置最小距离采样与圆头笔帽，正常书写无断笔；如覆盖在 scroll-view 内请给签名区预留独立高度，避免滚动抢占手势。