本文主要為大家講述在小程序中實現(xiàn)手寫板簽名的具體代碼，下面看看具體內(nèi)容：

　　1.wxss代碼

　　page{
　　background:#F8F8F8;
　　}
　　/*簽名*/
　　.qianming{
　　background:#fff;
　　padding:20rpx 30rpx;
　　font-size:32rpx;
　　color:#333;
　　padding-bottom:0;
　　position:fixed;
　　bottom:0;
　　left:0;
　　width:92%;
　　height:47%;
　　}
　　.qianming.clear{
　　font-size:26rpx;
　　color:#669AF2;
　　}
　　.flex-def{
　　display:flex;
　　}
　　.flex-one{
　　flex:1;
　　}
　　.flex-cCenter{
　　align-items:center;
　　}
　　/*底部按鈕*/
　　.bottom_btn{
　　font-size:32rpx;
　　color:#fff;
　　padding:30rpx 0;
　　background:#fff;
　　width:100%;
　　}
　　.bottom_btn view{
　　width:100%;
　　background:#FF083C;
　　border-radius:40rpx;
　　height:80rpx;
　　line-height:80rpx;
　　text-align:center;
　　}
　　/*隱藏滾動條*/
　　::-webkit-scrollbar{
　　width:0;
　　height:0;
　　color:transparent;
　　display:none;
　　}

　　2.wxml代碼

　　<view class="qianming">
　　<view class="qianming_top flex-def flex-cCenter"wx:if="{{is_sign==1}}">
　　<view class="flex-one">簽名</view>
　　<view class="clear"bindtap="clear">清空</view>
　　</view>
　　<view class="canvas">
　　<canvas style="width:100%;height:360rpx;border:1px#eee solid;background-color:#fff;border-radius:16rpx;margin-top:20rpx;"canvas-id="firstCanvas"id='firstCanvas'bindtouchstart="bindtouchstart"bindtouchmove="bindtouchmove"></canvas>
　　</view>
　　<view class="bottom_btn">
　　<view class="skin-bg-{{theme}}"bindtap='export'>我已知悉并同意</view>
　　</view>
　　</view>

　　3.js代碼　

　　data:{
　　context:null,
　　imgUrl:"",
　　index:0,//用來判斷是否簽名
　　},
　　/**記錄開始點*/
　　bindtouchstart:function(e){
　　this.data.context.moveTo(e.changedTouches[0].x,e.changedTouches[0].y)
　　//記錄已經(jīng)開始簽名
　　this.setData({
　　index:1
　　})
　　},
　　/**記錄移動點，刷新繪制*/
　　bindtouchmove:function(e){
　　this.data.context.lineTo(e.changedTouches[0].x,e.changedTouches[0].y);
　　this.data.context.stroke();
　　this.data.context.draw(true);
　　this.data.context.moveTo(e.changedTouches[0].x,e.changedTouches[0].y);
　　//記錄已經(jīng)開始簽名
　　this.setData({
　　index:1
　　})
　　},
　　/**清空畫布*/
　　clear:function(){
　　this.data.context.draw();
　　this.setData({
　　index:0
　　})
　　},
　　/**導出圖片點擊確定按鈕*/
　　export:function(){
　　const that=this;
　　if(that.data.index==0){
　　wx.showToast({
　　title:'請閱讀并簽名',
　　icon:'none',
　　duration:2000
　　})
　　return
　　}
　　that.data.context.draw(true,
　　wx.canvasToTempFilePath({
　　x:0,
　　y:0,
　　fileType:'png',
　　canvasId:'firstCanvas',
　　success(res){
　　that.upload_image(res.tempFilePath)
　　},
　　fail(){
　　wx.showToast({
　　title:'簽名失敗',
　　icon:'none',
　　duration:2000
　　})
　　}
　　})
　　)
　　}
　　},
　　//將圖片保存到服務器
　　upload_image(imgurl){
　　var that=this;
　　},

　　4.注意json文件必須加這個參數(shù)為true，否則簽名時晃動

　　{
　　"disableScroll":true
　　}

　　全部內(nèi)容已全部講述完畢，歡迎關注后續(xù)更多精彩內(nèi)容。