uniapp 微信签名

### UniApp 实现微信签名的方法

#### 使用 Canvas 组件创建手写签名板

为了实现在 UniApp 中的微信小程序上进行电子签名的功能，可以利用 `Canvas` 组件来构建一个简单的手写签名板。通过监听触摸事件（touchstart、touchmove 和 touchend），可以在画布上绘制用户的笔迹。

<template>
  <view class="signature-pad">
    <canvas type="2d" id="mySignaturePad"></canvas>
    <button @click="clear">清除</button>
    <button @click="saveImage">保存图片</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ctx: null,
      canvasWidth: 0,
      canvasHeight: 0,
      drawing: false,
      lastX: 0,
      lastY: 0
    };
  },
  onLoad() {
    const query = uni.createSelectorQuery().in(this);
    query.select('#mySignaturePad').fields({ node: true, size: true }, res => {
      this.ctx = res.context;
      this.canvasWidth = res.width;
      this.canvasHeight = res.height;

      // 设置线宽和颜色
      this.ctx.lineWidth = 3;
      this.ctx.strokeStyle = '#000';
      
      // 初始化画布背景为白色
      this.clear();
    }).exec();

    // 添加触摸事件处理函数
    uni.onTouchStart((e) => {this.touchStart(e)});
    uni.onTouchMove((e) => {this.touchMove(e)});
    uni.onTouchEnd(() => {this.drawing = false});
  },
  methods: {
    clear() {
      this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
      this.ctx.fillStyle = "#fff";
      this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
    },

    saveImage() {
      let that = this;
      uni.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: this.canvasWidth,
        height: this.canvasHeight,
        destWidth: this.canvasWidth * 2,
        destHeight: this.canvasHeight * 2,
        canvasId: 'mySignaturePad',
        success(res) {
          console.log('成功获取临时文件路径', res.tempFilePath);
          // 可在此处上传至服务器或显示给用户查看
        }
      });
    },

    touchStart(event){
      var touches = event.touches[0];
      this.lastX = touches.x;
      this.lastY = touches.y;
      this.drawing = true;
    },

    touchMove(event){
      if (!this.drawing) return ;
      var touches = event.touches[0];

      this.drawLine(
        this.lastX,
        this.lastY,
        touches.x,
        touches.y);

      this.lastX = touches.x;
      this.lastY = touches.y;
    },

    drawLine(fromX, fromY, toX, toY) {
      this.ctx.beginPath();
      this.ctx.moveTo(fromX, fromY);
      this.ctx.lineTo(toX, toY);
      this.ctx.stroke();
      this.ctx.closePath();
    }
  }
};
</script>

<style scoped>
.signature-pad{
  display:flex;
  flex-direction:column;
}
#mySignaturePad{
  border:solid 1px #ccc;
  margin-bottom:8px;
}
button{
  padding:4px 8px;
  background-color:#eee;
  color:black;
  font-size:1rem;
  cursor:pointer;
}
</style>

此代码片段展示了如何设置一个基本的手写签名板[^1]。当用户点击屏幕时会触发触控事件并开始绘画；移动手指则继续沿轨迹作图直到抬起为止。此外还提供了两个按钮分别用来清空当前内容以及导出图像供后续操作使用。