微信小程序实现手写签名(签字版)

实现手写签名的微信小程序，其主要思路就是利用画布(canvas)实现用户在手机上进行手写签名的功能。下面是具体的实现攻略：

步骤一：创建画布(canvas)

首先，在小程序页面的wxml文件中创建一个canvas，如下所示：

<canvas canvas-id="myCanvas" style="width: 100%; height: 100%;" bindtouchstart="startSign" bindtouchmove="signing" bindtouchend="endSign"></canvas>

其中，canvas-id属性指定canvas的ID，width和height属性用于设置canvas的宽度和高度，以及绑定了三个事件函数startSign、signing和endSign用于处理用户的手写签名操作。

步骤二：处理用户手写签名操作

接下来，根据用户的手写签名操作，处理画布上的内容。具体实现步骤如下：

Page({
  data: {
    // 用于记录手写签名的路径
    paths: [],
    // 用于记录画笔的一些属性，例如颜色、粗细等
    pen: {
      color: "#000000",
      lineWidth: 5,
      cap: "round",
      join: "round"
    },
    // 用于控制画布清空时的提示信息
    modalHidden: true
  },
  startSign(e) {
    // 记录手写签名的起点
    let x = e.touches[0].x
    let y = e.touches[0].y
    this.context = wx.createCanvasContext('myCanvas', this)
    this.context.moveTo(x, y)
  },
  signing(e) {
    // 记录手写签名的路径
    let x = e.touches[0].x
    let y = e.touches[0].y
    this.context.lineTo(x, y)
    this.context.setStrokeStyle(this.data.pen.color)
    this.context.setLineWidth(this.data.pen.lineWidth)
    this.context.setLineCap(this.data.pen.cap)
    this.context.setLineJoin(this.data.pen.join)
    this.context.stroke()
    this.context.draw(true)
    this.data.paths.push({
      x: x,
      y: y
    })
  },
  endSign(e) {
    // 手写签名结束后，保存手写签名的路径
    let paths = this.data.paths
    wx.setStorage({
      key: 'signPath',
      data: paths,
      success: function(res) {
        console.log('手写签名保存成功:', res)
      },
      fail: function(res) {
        console.log('手写签名保存失败:', res)
      }
    })
  },
  clearCanvas() {
    // 清空画布
    this.context.clearRect(0, 0, 1000, 1000)
    this.context.draw(true)
    this.data.paths = []
  },
  showClearModal() {
    // 显示清空画布的提示框
    this.setData({
      modalHidden: false
    })
  },
  hideClearModal() {
    // 隐藏清空画布的提示框
    this.setData({
      modalHidden: true
    })
  }
})

其中，startSign函数用于记录手写签名的起点，signing函数用于记录手写签名的路径，endSign函数用于保存手写签名的路径数据到本地缓存中。

步骤三：展示用户手写签名

最后，在小程序页面的wxml文件中展示用户手写签名。具体实现步骤如下：

<view class="sign-container">
  <view class="sign-canvas">
    <canvas canvas-id="myCanvas" style="width: 100%; height: 100%;" />
  </view>
  <view class="button-container">
    <button class="clear-button" bindtap="showClearModal">清空</button>
  </view>
</view>
<modal title="提示" hidden="{{modalHidden}}" bindconfirm="clearCanvas" bindcancel="hideClearModal">
  确认清空手写签名吗？
</modal>

其中，可以使用wx.getStorage方法来获取之前保存在本地缓存中的手写签名数据，然后在页面中展示出来。此外，还可以添加一个按钮用于清空画布。

以上步骤就是实现手写签名的完整攻略。

示例1：更改画笔颜色

changePenColor(color) {
  this.data.pen.color = color
}

示例2：更改画笔粗细

changePenWidth(width) {
  this.data.pen.lineWidth = width
}