在小程序中创建一个自定义的签字板和颜色选择器组件，可以通过自定义组件来实现。以下是一个简单的示例：
- 创建一个新的文件夹
components 并在其中创建两个新的文件夹，分别命名为 signature 和 color-picker。 - 在
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;
}
}
});
- 对颜色选择器进行类似的操作，创建
color-picker.json、color-picker.wxml、color-picker.wxss 和 color-picker.js 文件。 - 在小程序的页面中注册并使用这两个自定义组件。
在页面的 .json 文件中：
{
"usingComponents": {
"signature": "/components/signature/signature",
"color-picker": "/components/color-picker/color-picker"
}
}
在页面的 .wxml 文件中：
<view>
<signature id="signature" />
<color-picker id="color-picker" />
</view>
这样，你就可以在小程序中使用这两个自定义组件了。记得在实际使用时根据自己的需求调整组件的样式和逻辑。