微信小程序電子簽名組件，封裝抽離可復(fù)用，簽名成功輸出base64和臨時(shí)文件路徑，解決vant彈窗中使用導(dǎo)致背景滾動(dòng)問(wèn)題，寬度自適應(yīng)，高度設(shè)置百分比，開(kāi)箱即用!
一、效果圖
。
二、組件完整代碼示例
小程序根目錄創(chuàng)建components文件夾，簽名組件放在這個(gè)文件夾下，components文件夾下新建signature目錄，
1.signature.js文件
代碼如下（示例）：
const app = getApp();
Component({
/**
* 組件的屬性列表
*/
properties: {
//高度百分比
h: {
type: Number,
value: 0.2,
},
// 填充描述文字
fillText: {
type: String,
value: "請(qǐng)使用正楷",
},
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
canvas: "",
ctx: "",
pr: 0,
width: 0,
height: 0,
first: true,
},
attached: function () {
this.getSystemInfo();
this.createCanvas();
},
/**
* 組件的方法列表
*/
methods: {
start(e) {
if (this.data.first) {
this.clearClick();
this.setData({ first: false });
}
// 開(kāi)始創(chuàng)建一個(gè)路徑，如果不調(diào)用該方法，最后無(wú)法清除畫(huà)布
this.data.ctx.beginPath();
// 把路徑移動(dòng)到畫(huà)布中的指定點(diǎn)，不創(chuàng)建線(xiàn)條。用 stroke 方法來(lái)畫(huà)線(xiàn)條
this.data.ctx.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);
},
move(e) {
// 增加一個(gè)新點(diǎn)，然后創(chuàng)建一條從上次指定點(diǎn)到目標(biāo)點(diǎn)的線(xiàn)。用 stroke 方法來(lái)畫(huà)線(xiàn)條
this.data.ctx.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);
this.data.ctx.stroke();
},
error: function (e) {
console.log("畫(huà)布觸摸錯(cuò)誤" + e);
},
/**
* 初始化
*/
createCanvas() {
const pr = this.data.pr; // 像素比
const query = this.createSelectorQuery();
query
.select("#canvas")
.fields({ node: true, size: true })
.exec((res) => {
const canvas = res[0].node;
const ctx = canvas.getContext("2d");
canvas.width = this.data.width * pr; // 畫(huà)布寬度
canvas.height = this.data.height * pr; // 畫(huà)布高度
ctx.scale(pr, pr); // 縮放比
ctx.lineGap = "round";
ctx.lineJoin = "round";
ctx.lineWidth = 4; // 字體粗細(xì)
ctx.font = "40px Arial"; // 字體大小，
ctx.fillStyle = "#ecf0ef"; // 填充顏色
ctx.fillText(
this.data.fillText,
this.data.width / 2 - 100,
this.data.height / 2
);
this.setData({ ctx, canvas });
});
},
// 獲取系統(tǒng)信息,寬，高，像素比
getSystemInfo() {
let _that = this;
wx.getSystemInfo({
success(res) {
_that.setData({
pr: res.pixelRatio,
width: res.windowWidth,
height: res.windowHeight * _that.data.h - 70,
});
},
});
},
//重簽
clearClick: function () {
//清除畫(huà)布
this.data.first = true;
this.data.ctx.clearRect(0, 0, this.data.width, this.data.height);
},
//保存圖片
saveClick: function (cb) {
if (this.data.first) {
wx.showToast({
title: "簽名數(shù)據(jù)為空!",
icon: "none",
});
return false;
}
// 獲取臨時(shí)文件路徑
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: this.data.width,
height: this.data.height,
destWidth: this.data.width * this.data.pr,
destHeight: this.data.height * this.data.pr,
canvasId: "canvas",
canvas: this.data.canvas,
fileType: "png",
success: (res) => {
// 文件轉(zhuǎn)base64
wx.getFileSystemManager().readFile({
filePath: res.tempFilePath,
encoding: "base64",
success: (val) => {
cb && cb(val,res);
// 轉(zhuǎn)換成功派發(fā)事件
this.triggerEvent("success", val.data);
},
});
},
});
},
},
});
2.signature.wxml文件
代碼如下（示例）：
<view class="signature">
<canvas type="2d" id="canvas" bindtouchmove="move" bindtouchstart="start" binderror="error" style="width:{{width}}px;height:{{height}}px;">
</canvas>
</view>
3.signature.json文件
代碼如下（示例）：
{
"component": true,
"usingComponents": {}
}
4.signature.wxss文件
代碼如下（示例）：
.signature {
padding-top: 30px;
}
canvas {
background-color: white;
}
三、小程序頁(yè)面引入組件使用示例，以index頁(yè)面為例
1.index.wxml文件
本案例結(jié)合vant popup彈出框使用，可根據(jù)需求修改
代碼如下（示例）：
// 第一行解決彈窗簽名時(shí)頁(yè)面滾動(dòng)問(wèn)題
<page-meta page-style="{{ show ? 'overflow: hidden;' : '' }}" />
<view bindtap="test">測(cè)試簽名</view>
<van-popup closeable show="{{ show }}" round position="bottom" custom-style="height: 50%" bind:close="onClose">
<view >
<signature h="{{0.5}}" class="signature" />
</view>
<view class="signature-btn">
<van-button type="primary" size="small" bindtap="reset">重置</van-button>
<van-button type="primary" size="small" bindtap="save">確認(rèn)</van-button>
</view>
</van-popup>
2.index.js文件
代碼如下（示例）：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-563805.html
Page({
data: {
show:false,
},
test(){
this.setData({
show:true
})
},
// 保存
save(){
let signature = this.selectComponent('.signature');
signature.saveClick((res,url)=>{
// res:base64數(shù)據(jù)，url:臨時(shí)文件url
console.log(res，url);
this.reset()
})
},
// 重置
reset(){
let signature = this.selectComponent('.signature');
signature.clearClick()
},
onClose(){
this.reset()
this.setData({
show:false
})
}
})
3.index.json文件
代碼如下（示例）：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-563805.html
{
"usingComponents": {
"signature": "../../components/signature/signature",
"van-popup": "@vant/weapp/popup/index"
},
"navigationBarTitleText":"頁(yè)面標(biāo)題",
"navigationBarTextStyle": "white",
}
到了這里，關(guān)于微信小程序電子簽名組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
