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

sherlockkid7
1,377 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

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

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

image.png

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

    <image class="signImg" v-if="newValue" :src="newValue" mode="widthFix"></image>

    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组件。

    <sign @touchmove.stop.prevent @uploadSuccess="UploadSuccess2" v-model="signUrl" :value="signUrl" />

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