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

Ned

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

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
    }
},

点赞 评论 收藏 目录

阅读量：2013

点赞量：0

收藏量:0