【微信小程序】电子合同签署组件开发实战：让签约更高效

菜鸟软一号

于 2025-08-23 10:48:36 发布

阅读量628

点赞数 18

CC 4.0 BY-SA版权

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_50754154/article/details/150637221

在数字化时代，传统纸质合同的签署方式已逐渐被电子合同取代。今天要给大家分享一个我们团队开发的微信小程序电子合同签署组件，它不仅提升了签约效率，还确保了合同的法律效力。

一、组件功能概述

这个组件专为保利地暖质保协议和安装施工合同设计，支持三方（甲方、乙方、丙方）在线签署，核心功能包括：

📝 合同预览：清晰展示合同条款和细节
🖋️ 电子签名：支持手写签名并自动保存
📋 信息采集：收集签署方姓名、身份证号等信息
📅 日期选择：便捷选择签署日期
✅ 表单验证：确保签署信息完整有效
💾 数据缓存：临时保存签署进度，防止意外退出丢失

二、技术实现要点

1. 架构设计

组件采用模块化设计，分为三个核心部分：

about.js：页面逻辑控制中心
signature-pad：独立的电子签名组件
contract-data.js：合同数据管理模块

2. 电子签名实现

电子签名是整个组件的核心，我们使用 Canvas 实现手写签名功能：

// 核心签名代码片段
Component({
  properties: {
    title: { type: String, value: "签名" },
    value: { type: String, value: "" },
    signerKey: { type: String, value: "" }
  },
  methods: {
    onStart(e) {
      if (!this.data.ctx) return;
      const p = this._p(e);
      this.data.ctx.beginPath();
      this.data.ctx.moveTo(p.x, p.y);
      this.setData({ drawing: true });
    },
    onMove(e) {
      if (!this.data.drawing) return;
      const p = this._p(e);
      this.data.ctx.lineTo(p.x, p.y);
      this.data.ctx.stroke();
    },
    onConfirm() {
      // 导出签名为临时图片
      wx.canvasToTempFilePath({
        canvas: this.canvas,
        success: (res) => {
          this.triggerEvent("change", { key: this.data.signerKey, tempFilePath: res.tempFilePath });
        }
      }, this);
    }
  }
});

3. 数据管理

合同数据和签署信息的管理也是重点：

// 数据初始化
Page({
  data: {
    meta: contractMeta,
    sections: initialSectionsList,
    slots: signingSlots,
    contractNo: "",
    signers: {
      a: { name: "", id: "", sig: "", date: "" },
      b: { name: "", id: "", sig: "", date: "" },
      c: { name: "", id: "", sig: "", date: "" }
    },
    agree: false
  },
  // 页面加载时初始化合同编号
  onLoad() {
    const today = this._formatDate(new Date());
    this.setData({
      contractNo: `${this.data.meta.code}${today.replace(/-/g,'')}-${Math.floor(Math.random()*900+100)}`
    });
    // 读取缓存数据
    const cache = wx.getStorageSync('contract_sign');
    if (cache) this.setData(cache);
  },
  // 页面卸载时保存缓存
  onUnload() { wx.setStorageSync('contract_sign', this.data); }
});