微信小程序 手写签名_微信小程序实现手写签字

无纸化办公，这是老板对我的要求，然而有人现场执法文件全部电子化，只有签字部分让一个搞web的人有点儿头疼，不能为了这个找个人来开发app吧于是想到了小程序，对于一个新接触小程序的人来说还是有挑战性的，因为我第一次写小程序。还好有文档。所以思路来了，触碰屏幕记录开始画的位置

手指在屏幕上滑动就是画咯，画完了记录最后的离开屏幕的位置

下一个笔画开始还是先触碰屏幕

手指滑动

最后点击一个完成签字就行了

小程序的canvas 还是挺好的。下面放代码

首先是 index.wxml

被检查单位签字

完成签字

重新签字

很简单啊 就是一个布局里面有个画布 有两个按钮

然后是index.wxss.paper{border:1px solid #dedede; margin: 10px; height:160px }

.image{border:1px solid #dedede; margin: 10px; height:160px }

.signBtn{display: flex; margin-top:20px;}

.signTitle{ text-align: center; font-size:1.2em;margin:10px auto;}

.handWriting{width:100%}

.image image{width:100%; height:160px }

没啥好说的 就是布局div+css

最后是index.jsPage({

data: {

context1: null,

hasDraw:false, //默认没有画

src:null

},

onLoad: function() {

var context1 = wx.createCanvasContext('handWriting1');

context1.setStrokeStyle("#000000")

context1.setLineWidth(3);

this.setData({

context1: context1,

})

},

touchstart1: function(e) {

var context1 = this.data.context1;

context1.moveTo(e.touches[0].x, e.touches[0].y);

this.setData({

context1: context1,

hasDraw : true, //要签字了

});

},

touchmove1: function(e) {

var x = e.touches[0].x;

var y = e.touches[0].y;

var context1 = this.data.context1;

context1.setLineWidth(3);

context1.lineTo(x, y);

context1.stroke();

context1.setLineCap('round');

context1.draw(true);

context1.moveTo(x, y);

},

reSign1: function() { //重新画

var that = this;

var context1 = that.data.context1;

context1.draw(); //清空画布

that.setData({

hasDraw: false, //没有画

src: null

});

},

sign1ok: function () {

var that = this;

if(!that.data.hasDraw){

console.log("签字是空白的 没有签字")

}else{

var context1 = that.data.context1;

context1.draw(true, wx.canvasToTempFilePath({

canvasId: 'handWriting1',

success(res) {

console.log(res.tempFilePath) //得到了图片下面自己写上传吧

that.setData({

src: res.tempFilePath

})

// wx.uploadFile({

//   url: "http://**************",

//   filePath: res.tempFilePath,

//   name: "file",

//   formData: {

//     filetype: "image",

//   },

//   success: function (result) {

//     console.log(result)

//   }

// })

}

}))

}

},

});

最后放一下 码云链接：https://gitee.com/hebzhm/xiaochegnxu_signature