uniapp开发小程序手写板、签名、签字

可以使用这个插件进行操作 

手写板-签名签字-lime-signature - DCloud 插件市场

但是目前这个插件没有VUE3 setup Composition API的写法。所以对于此文档提供的可以直接使用，需要使用Composition API方式实现的，可以继续看。

因为Composition API方式，更加的简单、灵活，在今后的编程之中要多用、多学，这样才能写出更加健壮的代码。

1.首先建立一个可以运行的小程序

2.把index.vue的代码直接替换一下

<template>
	<view style="width: 750rpx; height: 750rpx;">
		<l-signature disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize"
			:openSmooth="openSmooth"></l-signature>
	</view>
	<view>
		<button @click="onClick('clear')">清空</button>
		<button @click="onClick('undo')">撤消</button>
		<button @click="onClick('save')">保存</button>
		<!-- uvue 不支持 openSmooth -->
		<button @click="onClick('openSmooth')">压感{{openSmooth ? '开' : '关'}}</button>
	</view>
</template>
 
<script setup>
	import {
		ref
	} from 'vue';
 
	const penColor = ref('red')
	const penSize = ref(5)
	const url = ref('')
	const openSmooth = ref(true)
	const signatureRef = ref(null);
 
	function onClick(type) {
		if (type === 'openSmooth') {
			openSmooth.value = !openSmooth.value;
			return;
		}
		if (type === 'save' && signatureRef.value) {
			signatureRef.value.canvasToTempFilePath({
				success: (res) => {
					console.log(res.isEmpty) // 是否为空画板 无签名
					url.value = res.tempFilePath // 生成图片的临时路径
				}
			});
			return;
		}
		if (signatureRef.value) {
			signatureRef.value[type]();
		}
	}
</script>
 
<style>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
 
	canvas {
		width: 375px;
		height: 200px;
		border: 1px solid #ccc;
	}
 
	.clear-btn,
	.save-btn {
		margin-top: 10px;
	}
</style>

3.微信开发工具运行效果

4.手机真机调试效果

5.其中压感关和开，是增加笔画粗细的设置

加粗就是压感关

变细就是压感开