现在很多商家、组织、单位等等都有自己的微信小程序，我们能方便快捷的在小程序商实现自己想要的服务，其中有一些服务需要我们个人签名，那么微信小程序上的电子签名功能是怎样实现的呢？接下来小编就带大家来了解一下。

<view class="sign-contain">
 <view class="signName">
  <canvas id="canvas" canvas-id="canvas" class="{{ sysType === 'iOS' ? 'canvas' : 'canvas bg000'}}" 

    disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" 

    touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas>
 </view>

 <view class="btn-wrap">
  <button  catchtap="cleardraw">清除签名</button>
  <button  catchtap="uploadImg">上传签名</button>
 </view>
</view>

    js：

var context = null;// 使用 wx.createContext 获取绘图上下文 context
var isButtonDown = false;//是否在绘制中
var arrx = [];//动作横坐标
var arry = [];//动作纵坐标
var arrz = [];//总做状态，标识按下到抬起的一个组合
var canvasw = 0;//画布宽度
var canvash = 0;//画布高度
Page({
  data: {
    canvasw: '',
    canvash: '',
    imgUrl: '',
    info: {},
    signBase64: '',
    sysType: '' // 判断机型
  },

  onLoad: function (options) {
    let that = this
    let res = wx.getSystemInfoSync()
    const system = res.system.split(' ')
    that.setData({
      sysType: system[0],
    })
    let params = JSON.parse(options.params)
    that.setData({
      info: params,
    })
    that.startCanvas();
    that.initCanvas()
  },
  /**
  * 以下 - 手写签名 / 上传签名
  */
  startCanvas() {//画布初始化执行
    var that = this;
    //获取系统信息
    wx.getSystemInfo({
      success: function (res) {
        canvasw = res.windowWidth;
        canvash = res.windowHeight;
        that.setData({ canvasw: canvasw });
        that.setData({ canvash: canvash });
      }
    });
    this.initCanvas();
    this.cleardraw();
  },

  //初始化函数
  initCanvas() {
    context = wx.createCanvasContext('canvas');
    context.beginPath()
    if(this.data.sysType === 'iOS') {
      context.fillStyle = 'rgba(255, 255, 255, 1)';
      context.setStrokeStyle('#444');
    } else {
      context.fillStyle = 'rgba(0, 0, 0, 1)';
      context.setStrokeStyle('#aaa');
    }
    context.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
  },
  canvasStart(event) {
    isButtonDown = true;
    arrz.push(0);
    arrx.push(event.changedTouches[0].x);
    arry.push(event.changedTouches[0].y);
  },
  canvasMove(event) {
    if (isButtonDown) {
      arrz.push(1);
      arrx.push(event.changedTouches[0].x);
      arry.push(event.changedTouches[0].y);
    }
    for (var i = 0; i < arrx.length; i++) {
      if (arrz[i] == 0) {
        context.moveTo(arrx[i], arry[i])
      } else {
        context.lineTo(arrx[i], arry[i])
      }
    }
    context.clearRect(0, 0, canvasw, canvash);
    if(this.data.sysType === 'iOS') {
      context.fillStyle = 'rgba(255, 255, 255, 1)';
      context.setStrokeStyle('#444');
    } else {
      context.fillStyle = 'rgba(0, 0, 0, 1)';
      context.setStrokeStyle('#aaa');
    }
    context.setLineWidth(3);
    context.setLineCap('round');
    context.setLineJoin('round');
    context.stroke();
    context.draw(false);
  },
  canvasEnd(event) {
    isButtonDown = false;
  },
  //清除画布
  cleardraw() {
    arrx = [];
    arry = [];
    arrz = [];
    context.clearRect(0, 0, canvasw, canvash);
    if(this.data.sysType === 'iOS') {
      context.fillStyle = 'rgba(255, 255, 255, 1)';
      context.setStrokeStyle('#444');
    } else {
      context.fillStyle = 'rgba(0, 0, 0, 1)';
      context.setStrokeStyle('#aaa');
    }
    context.draw(true);
  },
  uploadImg() {
    var that = this
    //生成图片
    // context.draw(true,()=> {
    setTimeout(() => {
      wx.canvasToTempFilePath({
        canvasId: 'canvas',
        //设置输出图片的宽高
        fileType: 'jpg',
        quality: 1,
        success: function (res) {
          // canvas图片地址 res.tempFilePath
          let imgBase64 = wx.getFileSystemManager().readFileSync(res.tempFilePath, 'base64')
          that.setData({
            imgUrl: res.tempFilePath,
            signBase64: imgBase64
          })
          that.submitSign()
          console.log('imgBase64', 'data:image/jpeg;base64,' + imgBase64)
          // wx.saveImageToPhotosAlbum({
          //   filePath: res.tempFilePath,
          //   success(res4) { 
          //     console.log(res,'保存res4');
          //     wx.showToast( {
          //       title: '已成功保存到相册',
          //       duration: 2000
          //     } );
          //   }
          // })
        },
        fail: function () {
          wx.showModal({
            title: '提示',
            content: 'canvas生成图片失败。微信当前版本不支持，请更新到最新版本！',
            showCancel: false
          });
        },
        complete: function () { }
      }, 5000)

    })
    // })
  },
  // 提交签名
  submitSign() {
    let that = this
    wx.showLoading({
      title: '正在提交...',
      mask: true
    })
    let type = '1'
    if(that.data.sysType === 'iOS') {
      type = '0'
    } else {
      type = '1'
    }
    wx.$getWxLoginCode(resp => {
      const params = {
        qmbase64: that.data.signBase64,
      
      }
      console.info("入参", params)
      wx.kservice.yyyurl(params, res => {
        wx.hideLoading()
        if (res.statusCode === '200') {
          wx.showModal({
            title: '提示',
            content: res.message,
            showCancel: false,
            confirmText: '返回首页',
            success(res) {
              if (res.confirm) {
                wx.reLaunch({
                  url: '/pages/index/index'
                })
              }
            }
          })
        } else {
          wx.showModal({
            title: '提示',
            content: res.message,
            showCancel: true,
            cancelText: '返回首页',
            confirmText: '重新提交',
            success: (result) => {
              if (result.cancel) {
                // 取消停留
                wx.reLaunch({
                  url: '/pages/index/index'
                })
              } else if (result.confirm) {
                //重新提交
                that.submitSign()
              }
            },
          });
        }
      }, {}, true, true)
    })
  },

  /**
  * 生命周期函数--监听页面卸载
  */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

    CSS：

.sign-contain {
  display: flex;
  flex-direction:column;
  width: 100%;
  height: 100%;
}
.signName {
  flex: 1;
}
.canvas {
  width: 100%;
  height: 100%;
}
.bg000{
  background-color: #000;
}
.btn-wrap{
  display: block;
  width:100%;
  height: 100rpx;
  margin: 20rpx 0;
  position: relative;
}
.btn-wrap button{
  width: 43%;
}

   对微信小程序做电子签名的内容就分享到这了，上述实例有一定的参考价值，感兴趣的朋友可以了解看看，希望大家阅读完这篇文章能有所收获，想要了解更多请关注群英网络其它相关文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 如何实现小程序评价功能，方法及代码是什么

  微信小程序实现评价功能 本文实例为大家分享了微信小程序实现评价的具体代码,供大家参考,具体内容如下 首先去图标库,找一个空心星图片和一个实星图片 先是效果图 代码 wxml文件 for循环5次,初始值是5星,data-name用于区别是那个评价的星星src="{{item-total+1>0?’…/image/empty_stars.png’:’…/image/entity_stars.png’}}"条件判断,图片判断一个是空星,一个实星,根据自己图片地址改变 <view class=& ...

• vue中全局引入和局部引入的实现方式是什么

  vue3出来一段时间了,element也更新了版本去兼容vue3,下面这篇文章主要给大家介绍了关于vue3集成Element-plus实现按需自动引入组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

• ECMAScript中的操作符有哪些？用法是什么？

  今天给大家分享的是关于ECMAScript中的操作符的内容，在ECMAScript中操作符有很多，例如一元操作符、布尔操作符、乘性操作符、加性操作符、关系操作符等等，接下来小编就给大家来分别介绍一下这些操作符的用途及用法。

• React传递参数的方式有哪些？

  React传递参数的方式有哪些？对于React传递参数，有父子组件之间传递参数和路由传参，那么具体怎样实现呢？下面小编给大家分享几个实例，有需要的朋友可以参考。

• 小程序的图片选择控件怎样实现？

  微信小程序的图片选择控件怎样实现？在使用微信小程序上传图片时，一般我们都需要用到图片选择控件，这样我们能比较便捷的从手机本地相差将图片上传到微信上，那么小程序的图片选择控件效果是如何实现的呢？下面我们一起来学习一下。