uni-app 小程序中在线签字插件

在uni-app小程序中实现在线签字功能，可以使用Canvas组件来实现手写签名的功能。以下是一个简单的代码示例，展示了如何在uni-app中集成一个基本的在线签字插件。

1. 创建页面

首先，在你的uni-app项目中创建一个新的页面，例如signature.vue。

2. 页面代码

<template>
  <view class="container">
    <canvas
      canvas-id="signatureCanvas"
      style="width: 100%; height: 300px; border: 1px solid #000;"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
    ></canvas>
    <button @click="clearCanvas">清除</button>
    <button @click="saveSignature">保存签名</button>
    <image v-if="signatureImage" :src="signatureImage" style="width: 100%; height: 300px; margin-top: 20px;"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ctx: null,
      isDrawing: false,
      startX: 0,
      startY: 0,
      signatureImage: ''
    };
  },
  onLoad() {
    this.ctx = uni.createCanvasContext('signatureCanvas');
  },
  methods: {
    onTouchStart(e) {
      const touch = e.touches[0];
      this.startX = touch.x;
      this.startY = touch.y;
      this.isDrawing = true;
      this.ctx.beginPath();
      this.ctx.moveTo(this.startX, this.startY);
    },
    onTouchMove(e) {
      if (!this.isDrawing) return;
      const touch = e.touches[0];
      this.ctx.lineTo(touch.x, touch.y);
      this.ctx.setStrokeStyle('#000');
      this.ctx.setLineWidth(5);
      this.ctx.setLineCap('round');
      this.ctx.stroke();
      this.ctx.draw(true); // 在这里使用true表示保留上一次绘制
    },
    onTouchEnd() {
      this.isDrawing = false;
      this.ctx.draw(true);
    },
    clearCanvas() {
      this.ctx.clearRect(0, 0, 300, 300); // 根据canvas实际大小调整
      this.ctx.draw();
      this.signatureImage = '';
    },
    saveSignature() {
      uni.canvasToTempFilePath({
        canvasId: 'signatureCanvas',
        success: (res) => {
          this.signatureImage = res.tempFilePath;
        },
        fail: (err) => {
          console.error('保存签名失败', err);
        }
      });
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}
</style>

3. 解释

• Canvas组件：用于绘制手写签名。
• 触摸事件：touchstart、touchmove和touchend用于处理绘制逻辑。
• 清除和保存：提供清除画布和保存签名到临时文件路径的功能。

4. 注意事项

• 在实际使用中，你可能需要根据实际需求调整Canvas的大小和画笔的粗细。
• 保存签名后，可以将signatureImage上传到服务器进行存储，以便后续使用。

这个示例提供了一个基本的在线签字功能，你可以根据需要进行进一步的优化和扩展。