Uniapp实现电子签名板

Uniapp实现电子签名板

界面效果

核心功能说明

1. 全端兼容

   • 支持 APP（iOS/Android）
   • 支持 微信 / 支付宝 / 百度 等小程序
   • 支持 H5 网页

2. 画笔优化

   • 线条圆润无锯齿
   • 手写流畅不卡顿
   • 可自定义线条粗细、颜色

3. 常用操作

   • 手写签名
   • 清空签名
   • 保存为本地图片
   • 返回签名路径给上级页面

可自定义配置

修改参数：

// 线条宽度
this.ctx.setLineWidth(3); 
// 签名颜色
this.ctx.setStrokeStyle('#000000'); 
// 画布高度
canvasHeight: 300,

调用方式（其他页面打开签名板）

// 打开签名页
uni.navigateTo({
  url: '/pages/signature/signature'
})

// 监听签名返回结果
uni.$on('signDone', (path) => {
  console.log('获取签名：', path)
  // 直接赋值给表单/图片显示
})

详细代码

<template>
  <view class="home">
    <!-- 顶部标题 -->
    <view class="header">
      <text class="title">电子签名</text>
      <text class="subtitle">Professional Signature</text>
    </view>

    <!-- 签名预览卡片 -->
    <view class="preview-card" @click="goSignature" :class="{ empty: !signImg }">
      <image v-if="signImg" :src="signImg" class="preview-img" mode="widthFix" />
      <view v-else class="empty-box">
        <text class="empty-text">点击开始签名</text>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="btn-wrapper">
      <button class="btn-sign" @click="goSignature">
        <text>创建手写签名</text>
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const signImg = ref('')

// 进入签名页
const goSignature = () => {
  uni.navigateTo({
    url: '/pages/signature/signature'
  })
}

// 监听签名返回
onMounted(() => {
  uni.$on('signDone', (path) => {
    signImg.value = path
  })
})
</script>

<style scoped>
.home {
  padding: 40rpx 30rpx;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4eaf5 100%);
}

/* 标题 */
.header {
  margin: 60rpx 0 80rpx;
  text-align: center;
}
.title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 20rpx;
}
.subtitle {
  font-size: 26rpx;
  color: #7f8c8d;
}

/* 签名预览卡片 */
.preview-card {
  width: 100%;
  height: 360rpx;
  background: #ffffff;
  border-radius: 24rpx;
  box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
}
.preview-card.empty {
  border: 2rpx dashed #dcdfe6;
  background: rgba(255, 255, 255, 0.7);
}
.preview-img {
  max-width: 90%;
  max-height: 90%;
}

/* 空状态 */
.empty-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.empty-text {
  font-size: 30rpx;
  color: #999;
}

/* 按钮 */
.btn-wrapper {
  margin-top: 80rpx;
  display: flex;
  justify-content: center;
}
.btn-sign {
  width: 80%;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  background: linear-gradient(90deg, #42b983, #359e71);
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
  box-shadow: 0 12rpx 28rpx rgba(66, 185, 131, 0.3);
  border: none;
}
</style>