要在微信小程序中實現電子簽名功能，可以按照以下步驟進行操作：
1. 在小程序頁面的wxml文件中，創建一個canvas標簽用于繪制簽名：
<canvas id="signatureCanvas" canvas-id="myCanvas"></canvas>
2. 在頁面的js文件中，編寫相關的邏輯代碼：
Page({ data: {
context: null, // 用于保存canvas上下文對象
isDrawing: false // 標記是否正在繪制
},
onLoad: function () {
// 獲取canvas上下文對象
const context = wx.createCanvasContext('myCanvas');
this.setData({ context });
},
touchStart: function (e) {
const { clientX, clientY } = e.touches[0];
this.setData({ isDrawing: true });
this.data.context.moveTo(clientX, clientY);
},
touchMove: function (e) {
if (!this.data.isDrawing) return;
const { clientX, clientY } = e.touches[0];
this.data.context.lineTo(clientX, clientY);
this.data.context.stroke();
this.data.context.draw(true); // 實時更新畫布顯示
},
touchEnd: function () {
this.setData({ isDrawing: false });
},
clearCanvas: function () {
this.data.context.clearRect(0, 0, 300, 150); // 清除畫布
this.data.context.draw(); // 重新繪制空白畫布
},
saveSignature: function () {
const that = this;
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function (res) {
const tempFilePath = res.tempFilePath;
// 在這里可以將tempFilePath發送到服務器保存電子簽名
console.log('電子簽名保存成功:', tempFilePath);
},
fail: function (res) {
console.error('保存電子簽名失敗:', res);
}
}, that);
}
})
3. 在頁面的wxss文件中，設置canvas標簽的樣式：
#signatureCanvas { width: 300rpx;
height: 150rpx;
border: 1px solid #000;
}
以上代碼實現了一個簡單的電子簽名功能。用戶在canvas上觸摸滑動手指，即可在畫布上繪制簽名。通過點擊清除按鈕可以清除畫布內容，而通過點擊保存按鈕可以將簽名轉為臨時圖片路徑并保存。您可以根據需要進行樣式和功能的擴展。
