更新记录

1.0.0（2026-06-12） 下载此版本

• 首次发布
• 支持 H5 / 微信小程序 / App 全屏手写签名
• 支持横屏、竖屏两种签名模式
• 提供弹层调用 openSignature 与页面调用 openSignaturePage
• 支持自定义笔触颜色、线宽、背景色

平台兼容性

uni-app(4.0)

nny-signature 全屏手写签名组件

支持 H5、微信小程序、App（Vue） 的全屏手写签名组件。提供弹层与独立页面两种调用方式，支持横屏 / 竖屏签名、笔触自定义与 PNG 图片导出。

平台支持

安装

1. 从 uni 插件市场 导入本插件，或复制 uni_modules/nny-signature 到项目
2. 使用 HBuilderX 3.5.0+，Vue 3 项目
3. 导入时若提示合并 pages_init.json，请确认注册签名页面路由
4. 在 pages.json 中配置 easycom（若未自动识别）：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^nny-(.*)": "@/uni_modules/nny-signature/components/nny-$1/nny-$1.vue"
    }
  }
}

快速开始

方式一：弹层调用（推荐）

在 App.vue 或任意页面根节点挂载组件一次，然后通过 API 打开：

<template>
  <view>
    <button @click="handleSign">去签名</button>
    <nny-signature />
  </view>
</template>

<script setup>
import { openSignature } from '@/uni_modules/nny-signature/js_sdk/index.js'

async function handleSign() {
  try {
    const result = await openSignature({ orientation: 'landscape' })
    console.log('签名图片', result.tempFilePath)
    // H5 额外返回 result.base64
  } catch (err) {
    if (!err?.cancelled) console.error(err)
  }
}
</script>

方式二：独立页面调用

import { openSignaturePage } from '@/uni_modules/nny-signature/js_sdk/index.js'

const result = await openSignaturePage({
  orientation: 'portrait',
  title: '请签名'
})

方式三：页面内嵌

<nny-signature
  embed
  :show="visible"
  orientation="landscape"
  title="手写签名"
  pen-color="#1a1a1a"
  :line-width="4"
  background-color="#ffffff"
  @confirm="onConfirm"
  @cancel="onCancel"
/>

API

openSignature(options)

弹层模式打开签名，返回 Promise。

返回值

{
  tempFilePath: string  // 图片路径；H5 为 base64 dataURL
  base64?: string      // 仅 H5
}

用户点击返回时 Promise 以 { cancelled: true } 拒绝。

openSignaturePage(options)

参数与 openSignature 相同，通过 uni.navigateTo 打开独立签名页。

组件 Props（embed 模式）

组件事件

pages.json 配置

若导入时未自动合并路由，请手动添加：

{
  "pages": [
    {
      "path": "uni_modules/nny-signature/pages/signature/signature",
      "style": {
        "navigationBarTitleText": "手写签名",
        "navigationStyle": "custom",
        "pageOrientation": "auto",
        "disableScroll": true
      }
    }
  ]
}

微信小程序说明

• 画布下方按钮使用 cover-view，可穿透原生 canvas 响应点击
• 横屏模式会调用 wx.setPageOrientation，关闭签名页后自动恢复竖屏

App 说明

• 使用 canvas-id + createCanvasContext 绘制，兼容性更好
• 横竖屏切换会调用 plus.screen.lockOrientation

目录结构

uni_modules/nny-signature/
├── components/nny-signature/   # 签名组件
├── js_sdk/                     # API 与画布引擎
├── pages/signature/            # 独立签名页
├── package.json
├── readme.md
├── changelog.md
├── license.md
└── pages_init.json

常见问题

Q: 一直显示「画布准备中」？
A: 多为画布未获取到有效尺寸，请确认签名页已全屏展示且未在隐藏容器中初始化。

Q: 小程序按钮点不了？
A: 请使用本插件内置 cover-view 工具栏，不要在 canvas 上叠普通 view。

Q: H5 横屏坐标偏移？
A: 组件已内置舞台旋转坐标映射，请勿额外旋转页面根节点。

更新日志

见 changelog.md