告别手写烦恼：30分钟实现微信小程序电子签功能-优快云博客

告别手写烦恼：30分钟实现微信小程序电子签功能

【免费下载链接】vant-weapp 项目地址: https://gitcode.com/gh_mirrors/van/vant-weapp

你是否还在为小程序中的手写签名功能开发而头疼？用户签署体验差、签名易失真、实现步骤繁琐？本文将带你基于vant-weapp的Canvas组件，快速构建专业级电子签功能，让你30分钟内完成从开发到上线的全流程。

为什么选择vant-weapp实现电子签

在小程序开发中，电子签名功能通常需要处理手写轨迹捕捉、图像优化、文件导出等关键环节。vant-weapp作为轻量级的小程序UI组件库，其内置的Canvas相关组件（如Circle组件）提供了基础绘图能力，通过二次开发可快速实现签名功能。

官方文档：docs/markdown/quickstart.md

核心实现原理

电子签名功能的核心是通过Canvas（画布）组件捕捉用户的触摸轨迹，并将轨迹渲染为图像。vant-weapp的Circle组件已封装了基础的Canvas操作，我们可以基于此扩展手写功能。

Canvas组件基础

vant-weapp的Circle组件使用了小程序原生Canvas组件，其核心代码如下：

lib/circle/index.wxml

<canvas class="van-circle__canvas" type="{{ type }}" 
  style="width: {{ utils.addUnit(size) }};height:{{ utils.addUnit(size) }}" 
  id="van-circle" canvas-id="van-circle">
</canvas>

该组件通过canvas-id标识画布，支持2D绘图上下文操作，为电子签名提供了基础能力。

实现步骤

1. 环境准备

首先确保已安装vant-weapp组件库，具体安装步骤可参考官方快速上手文档：

docs/markdown/quickstart.md

核心安装命令：

# 通过npm安装
npm i @vant/weapp -S --production

# 通过yarn安装
yarn add @vant/weapp --production

2. 创建签名组件

在页面中引入Canvas组件，并设置宽高和触摸事件监听：

<canvas 
  class="signature-canvas"
  canvas-id="signature"
  bindtouchstart="handleTouchStart"
  bindtouchmove="handleTouchMove"
  bindtouchend="handleTouchEnd"
  style="width: 100%; height: 300px; border: 1px solid #eee;">
</canvas>

3. 实现签名逻辑

在页面JS文件中实现触摸事件处理，捕捉用户手写轨迹：

Page({
  data: {
    context: null,
    isDrawing: false
  },

  onReady() {
    // 获取Canvas上下文
    this.setData({
      context: wx.createCanvasContext('signature', this)
    })
    
    // 设置线条样式
    const ctx = this.data.context
    ctx.setLineWidth(2)
    ctx.setLineCap('round')
    ctx.setLineJoin('round')
    ctx.setStrokeStyle('#000')
  },

  handleTouchStart(e) {
    // 触摸开始，记录起点
    const { x, y } = e.touches[0]
    this.data.context.beginPath()
    this.data.context.moveTo(x, y)
    this.setData({ isDrawing: true })
  },

  handleTouchMove(e) {
    // 触摸移动，绘制线条
    if (!this.data.isDrawing) return
    
    const { x, y } = e.touches[0]
    this.data.context.lineTo(x, y)
    this.data.context.stroke()
    this.data.context.draw(true)
  },

  handleTouchEnd() {
    // 触摸结束，保存绘制
    this.data.context.draw()
    this.setData({ isDrawing: false })
  },

  saveSignature() {
    // 保存签名为图片
    wx.canvasToTempFilePath({
      canvasId: 'signature',
      success: (res) => {
        // res.tempFilePath 为签名图片临时路径
        console.log('签名图片路径:', res.tempFilePath)
        // 可在此上传至服务器或本地保存
      }
    }, this)
  }
})

4. 集成vant-weapp按钮组件

使用vant-weapp的Button组件添加操作按钮，优化用户体验：

<van-button type="primary" bindtap="saveSignature" class="save-btn">
  保存签名
</van-button>
<van-button type="default" bindtap="clearSignature" class="clear-btn">
  清除重写
</van-button>

lib/button/index.wxml

功能优化与扩展

1. 签名板清空功能

添加清空画布的方法：

clearSignature() {
  const ctx = this.data.context
  ctx.clearRect(0, 0, 375, 300) // 清除画布
  ctx.draw()
}

2. 签名图片质量优化

通过设置canvasToTempFilePath的参数优化图片质量：

wx.canvasToTempFilePath({
  canvasId: 'signature',
  quality: 1.0, // 图片质量，范围0-1
  destWidth: 750, // 输出图片宽度
  destHeight: 600, // 输出图片高度
  success: (res) => {
    // 处理图片
  }
}, this)

3. 适配不同屏幕尺寸

使用vant-weapp的utils工具处理尺寸单位：

lib/wxs/utils.wxs

// 在页面onLoad时获取屏幕宽度
onLoad() {
  const { windowWidth } = wx.getSystemInfoSync()
  this.setData({ canvasWidth: windowWidth })
}

完整示例代码结构

example/
├── pages/
│   └── signature/
│       ├── index.js      // 签名页面逻辑
│       ├── index.json    // 页面配置
│       ├── index.wxml    // 页面结构
│       └── index.wxss    // 页面样式

example/app.json

注意事项

Canvas组件的canvas-id必须唯一，避免冲突
在自定义组件中使用Canvas时，需指定组件实例
小程序基础库版本建议在2.9.0以上，以支持Canvas 2D上下文
处理不同设备的屏幕分辨率差异，确保签名清晰度

总结

通过vant-weapp的Canvas相关组件，我们可以快速实现专业的电子签名功能。本文介绍的方案具有以下优势：

开发成本低：基于现有组件扩展，减少重复造轮子
用户体验好：支持平滑绘制，笔迹自然
扩展性强：可轻松添加签名保存、上传、清空等功能
兼容性高：适配主流微信小程序基础库版本

现在，你已经掌握了使用vant-weapp实现电子签功能的全部要点，赶快在你的小程序项目中应用起来吧！

告别手写烦恼：30分钟实现微信小程序电子签功能