小程序自定义签字板、颜色选择器组件

在小程序中创建一个自定义的签字板和颜色选择器组件，可以通过自定义组件来实现。以下是一个简单的示例：

1. 创建一个新的文件夹 components 并在其中创建两个新的文件夹，分别命名为 signature 和 color-picker。
2. 在 signature 文件夹中创建 signature.json、signature.wxml、signature.wxss 和 signature.js 文件。

signature.json:

{
  "component": true
}

signature.wxml:

<canvas canvas-id="signature-canvas" class="signature-canvas" bindtouchstart="onTouchStart" bindtouchmove="onTouchMove" bindtouchend="onTouchEnd"></canvas>

signature.wxss:

.signature-canvas {
  width: 300px;
  height: 150px;
  background-color: #fff;
}

signature.js:

Component({
  data: {
    isTouching: false,
    lastPoint: null,
    points: []
  },
  methods: {
    onTouchStart(event) {
      this.data.isTouching = true;
      const { x, y } = event.touches[0];
      this.data.lastPoint = { x, y };
    },
    onTouchMove(event) {
      if (!this.data.isTouching) return;
      const { x, y } = event.touches[0];
      const lastPoint = this.data.lastPoint;
      if (lastPoint) {
        wx.createSelectorQuery()
          .select('#signature-canvas')
          .fields({ node: true, size: true })
          .exec((res) => {
            const canvas = res[0].node;
            const context = canvas.getContext('2d');
            context.beginPath();
            context.moveTo(lastPoint.x, lastPoint.y);
            context.lineTo(x, y);
            context.stroke();
            context.closePath();
 
            this.data.lastPoint = { x, y };
          });
      }
    },
    onTouchEnd() {
      this.data.isTouching = false;
      this.data.lastPoint = null;
    }
  }
});

3. 对颜色选择器进行类似的操作，创建 color-picker.json、color-picker.wxml、color-picker.wxss 和 color-picker.js 文件。
4. 在小程序的页面中注册并使用这两个自定义组件。

在页面的 .json 文件中：

{
  "usingComponents": {
    "signature": "/components/signature/signature",
    "color-picker": "/components/color-picker/color-picker"
  }
}

在页面的 .wxml 文件中：

<view>
  <signature id="signature" />
  <color-picker id="color-picker" />
</view>

这样，你就可以在小程序中使用这两个自定义组件了。记得在实际使用时根据自己的需求调整组件的样式和逻辑。