uniapp写微信小程序实现电子签名

在 UniApp 中实现微信小程序中的电子签名功能，通常可以通过使用组件来完成。以下是一个简单的例子，展示如何在 UniApp 中实现电子签名功能：

在 Vue 文件中的 template 部分：

清空保存

在 Vue 文件中的 script 部分：

export default {
  data() {
    return {
      ctx: null,
      isDrawing: false,
      lastX: 0,
      lastY: 0
    };
  },
  mounted() {
    this.ctx = uni.createCanvasContext('myCanvas', this);
  },
  methods: {
    handleStart(event) {
      this.isDrawing = true;
      const { x, y } = this.getTouchPos(event);
      this.lastX = x;
      this.lastY = y;
    },
    handleMove(event) {
      if (this.isDrawing) {
        const { x, y } = this.getTouchPos(event);
        this.ctx.moveTo(this.lastX, this.lastY);
        this.ctx.lineTo(x, y);
        this.ctx.stroke();
        this.lastX = x;
        this.lastY = y;
        this.ctx.draw(true);
      }
    },
    handleEnd() {
      this.isDrawing = false;
    },
    clearCanvas() {
      this.ctx.clearRect(0, 0, 1000, 1000);
      this.ctx.draw(true);
    },
    saveSignature() {
      uni.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: (res) => {
          // 在这里可以将 res.tempFilePath 保存或上传到服务器
          console.log(res.tempFilePath);
        }
      }, this);
    },
    getTouchPos(event) {
      const x = event.mp.touches[0].x;
      const y = event.mp.touches[0].y;
      return { x, y };
    }
  }
};