更新记录

0.1.0（2026-07-22） 下载此版本

• 新增普通手写签名、单击圆点和圆角线条。
• 新增撤销、重做、清空、空签名判断和笔画数据恢复。
• 新增背景颜色、背景图片及 stretch、contain、cover、center 显示模式。
• 新增单个文字水印和平铺文字水印。
• 新增自动裁剪、PNG Base64 和临时文件路径导出。
• 新增可选中英文内置工具栏。
• 新增 uni-app Vue2/Vue3 和 uni-app x 双组件实现。

平台兼容性

uni-app(4.61)

uni-app x(4.61)

wsigningpad 跨端手写签字板

wsigningpad 是一个无第三方依赖的手写签字板组件。组件仅在本地处理签名，不自动上传、不保存到相册，也不申请系统权限。

当前版本先提供普通圆角线条，不包含毛笔、压感和自定义字体。

支持范围

说明：uni-app x 本身不支持 Vue 2。当前最低 HBuilderX 版本按 4.61 设置，开发阶段使用 HBuilderX 5.15 完成编译检查。

当前开发验证情况：

• uni-app x：Android、iOS、HarmonyOS、微信小程序均已通过 HBuilderX 5.15 编译检查。
• uni-app Vue 3：Web、Android、iOS、HarmonyOS、微信小程序均已通过 HBuilderX 5.15 编译检查。
• uni-app Vue 2：Web、Android 已通过 HBuilderX 5.15 编译检查；微信小程序编译器在不引用本组件的最小 Vue 2 工程中也会发生内部异常，因此该组合仍需换用稳定版 HBuilderX 及微信真机补充验证。

编译通过只代表源码和平台 API 能完成构建，正式发布前仍应分别完成四端真机书写、背景加载和图片导出回归。

基本用法

组件符合 easycom 目录规范，导入插件后可以直接使用：

<template>
    <view>
        <wsigningpad
            ref="signingPad"
            :height="320"
            :show-toolbar="true"
            watermark-text="仅用于本次业务"
            @save="handleSave"
            @error="handleError"
        ></wsigningpad>
    </view>
</template>

<script>
export default {
    methods: {
        /** 接收签名导出结果。 */
        handleSave(result) {
            console.log(result.tempFilePath)
        },

        /** 处理组件错误。 */
        handleError(error) {
            console.error(error.code, error.message)
        }
    }
}
</script>

uni-app x 事件参数

uni-app x 页面应使用 UTSJSONObject 接收组件事件对象，不要在页面中重新声明同名的 SignatureResult、SignatureError 等类型，否则 Android 可能生成两个不同的运行时类型并发生强制转换异常。

<script setup lang="uts">
/** 接收签名导出结果。 */
const handleSave = (result : UTSJSONObject) => {
    const tempFilePath = result.getString('tempFilePath', '')
    const width = result.getNumber('width', 0)
    console.log(tempFilePath, width)
}

/** 接收组件错误。 */
const handleError = (error : UTSJSONObject) => {
    uni.showToast({
        title: error.getString('message', '签字板发生错误'),
        icon: 'none'
    })
}
</script>

背景图片

<wsigningpad
    background-image="/static/form.png"
    background-image-mode="contain"
    :background-image-opacity="1"
    :background-image-export="true"
/>

backgroundImageMode 支持：

• stretch：拉伸铺满画布。
• contain：保持比例完整显示，可能留白。
• cover：保持比例铺满，可能裁剪。
• center：按图片原始尺寸居中。

网络背景图应先配置对应平台的合法域名。背景加载失败会触发 error 事件；开启 backgroundRequired 后，背景加载失败会阻止书写和导出。

文字水印

<wsigningpad
    watermark-text="内部资料"
    watermark-mode="repeat"
    watermark-color="#999999"
    :watermark-opacity="0.2"
    :watermark-angle="-20"
    :watermark-gap-x="140"
    :watermark-gap-y="90"
/>

watermarkMode 支持 single 和 repeat。单个水印可通过 watermarkPosition 设置为 top-left、top-right、center、bottom-left 或 bottom-right。

属性

方法

通过组件 ref 调用：

事件

导出结果

{
    tempFilePath: '',
    base64: 'data:image/png;base64,...',
    fileType: 'png',
    width: 320,
    height: 120,
    strokeCount: 3,
    pointCount: 86,
    bounds: {
        x: 10,
        y: 20,
        width: 320,
        height: 120
    }
}

uni-app x App 和微信小程序会将最新一次导出结果写入应用用户目录下的同名 PNG 文件；再次保存会覆盖该临时业务文件。如果需要长期保留，请由业务侧复制或上传。

注意事项

• 组件生成的是手写图片，不等同于具备证书、时间戳和防篡改能力的电子签名系统。
• 组件放在弹窗或隐藏容器中时，应在弹窗完全显示后调用 resize()。
• isEmpty() 只判断签名笔画，背景图和水印不会被当作签名。
• PNG 是当前统一支持的导出格式，JPEG 暂未开放。
• 组件不会自动上传签名，也不会输出 Base64 到控制台。