uniapp开发微信小程序--实现电子签名功能

业务需求：在最近开发的项目中，需要在任务完成页面，填写任务相关信息，并签署自己的名字，完成任务。

根据uniapp的签名插件，调整封装成sign.vue组件，在页面中使用

1. 因为任务有保存功能，增加了image标签用于展示保存之后的签名图片。点击画布清除按钮会删除保存的签名，因此需要父组件传值签名图片url给子组件 ，子组件使用props接收，并且需要改变该值。

   props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

   此方法无法实现更改，data中的值在created生命周期或mounted生命周期里打印始终为空

   解决方法：
   通过watch来监听传递过来的字段，把这个字段赋值给data中的新字段，实现更改

   watch: {
       value(val, oldVal) {
               this.newValue = val;
       },
   },
   

2. 在页面初始化的时候，需要设置绘画图像的背景颜色为白色，不然图像的背景色是透明的

   this.ctx.setFillStyle('#fff')

3. @touchmove.stop.prevent 在签名的时候，禁止页面滑动。

4. 签名成功后的临时存储文件路径tempFilePath为本地路径，如果直接上传该路径，后台会阻止该上传（在微信开发者工具没有问题，在真机上签名后无法提交任务），后面将签名路径(本地资源)给后台服务器（uni.uploadFile将本地资源上传到开发者服务器），再使用后台重新返回该签名新的地址提交，才成功。一直以为是 @touchmove.stop.prevent 阻止了提交按钮，用真机调试，打印一些信息，才看到后台返回的阻止信息

   imgUpload(tempFilePaths) {
   
       new Promise((resolve, reject) => {
               const uploadTask = uni.uploadFile({
                       url: this.action, //上传图片的后台接口api
                       filePath: tempFilePaths,
                       name: 'file',
                       fileType: 'image',
                       header: {
                               'Token': uni.getStorageSync('token'),
                       },
                       success: (uploadFileRes) => {
                               resolve(uploadFileRes);
                               this.$emit("uploadSuccess", uploadFileRes);
                       },
                       fail: (err) => {
                               reject(err);
                               this.$emit("uploadFail", err);
                       },
   
               });
       })
   },
   

5. 在页面中使用sign.vue组件。

   
   UploadSuccess2(res) {
       // 子组件传递给父组件的签名路径
       var data = JSON.parse(res.data);
       if (data.code == 200) {
           this.signUrl = data.data
       }
   },
   

sign.vue组件