微信小程序做电子签名功能

ops/2024/12/15 4:56:53/

文章目录


最近需求要做就记录一下。

人狠话不多,直接上功能:
在这里插入图片描述

直接搂代码吧,复制过去就可以用,有其他需求自己改吧改吧。

signature.wxml

<!-- 电子签名页面 -->
<custom-navbar title="电子签名"show-home="{{false}}"
/>
<view class="signature-page"><!-- 顶部操作栏 --><view class="action-bar"><t-button theme="primary" icon="refresh" bind:tap="handleClear">重写</t-button><t-button theme="primary" icon="rollback" bind:tap="handleUndo">撤销</t-button><t-button theme="primary" icon="check" bind:tap="handleSubmit">提交</t-button></view><!-- 签名区域 --><view class="signature-area-large"><canvastype="2d"id="signatureCanvas"class="signature-canvas-large"disable-scroll="{{true}}"bindtouchstart="handleTouchStart"bindtouchmove="handleTouchMove"bindtouchend="handleTouchEnd"></canvas></view><!-- 提示文本 --><view class="signature-tips">请在上方区域书写您的签名</view>
</view> 

注意:我是用的tdesign这个UI,所以是t-button


signature.wxss

/* 页面容器 */
.signature-page {width: 100vw;height: calc(100vh - 44rpx);background-color: #f6f6f6;display: flex;flex-direction: column;padding: 16rpx;box-sizing: border-box;
}/* 顶部操作栏 */
.action-bar {display: flex;justify-content: flex-end;gap: 16rpx;margin-bottom: 20rpx;padding: 0 10rpx;
}/* 自定义按钮样式 */
.action-bar .t-button {min-width: auto;padding: 0 16rpx;font-size: 18rpx !important;height: 35rpx !important;line-height: 35rpx !important;
}/* 按钮图标样式 */
.action-bar .t-icon,
.action-bar .t-button__icon,
.action-bar .t-button .t-icon {font-size: 20rpx !important;
}/* 签名区域-大尺寸 */
.signature-area-large {flex: 1;background-color: #ffffff;border-radius: 16rpx;box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);overflow: hidden;position: relative;margin: 0 auto;width: 94vw;height: 80vh;
}/* 签名画布-大尺寸 */
.signature-canvas-large {width: 100%;height: 100%;background-color: #ffffff;
}/* 提示文本 */
.signature-tips {text-align: center;color: #999999;font-size: 12px;margin-top: 16rpx;
}

signature.js

Page({data: {ctx: null,points: [], // 存储所有笔画currentStroke: [], // 当前笔画isDrawing: false,},/*** 生命周期函数--监听页面加载* 初始化画布设置*/onLoad() {this.initCanvas();},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 初始化画布* 设置画布大小、像素比例和画笔样式*/async initCanvas() {const query = wx.createSelectorQuery();query.select('#signatureCanvas').fields({ node: true, size: true }).exec((res) => {const canvas = res[0].node;const ctx = canvas.getContext('2d');// 设置画布大小,使用新的API获取设备像素比const dpr = wx.getWindowInfo().pixelRatio;canvas.width = res[0].width * dpr;canvas.height = res[0].height * dpr;ctx.scale(dpr, dpr);// 设置画笔样式ctx.strokeStyle = '#000000';ctx.lineWidth = 3;ctx.lineCap = 'round';ctx.lineJoin = 'round';this.setData({ ctx });});},/*** 处理触摸开始事件* 开始一个新的笔画,记录起始点* @param {Object} e - 触摸事件对象*/handleTouchStart(e) {const { x, y } = e.touches[0];this.setData({isDrawing: true,currentStroke: [[x, y]]});this.data.ctx.beginPath();this.data.ctx.moveTo(x, y);},/*** 处理触摸移动事件* 继续绘制当前笔画的路径* @param {Object} e - 触摸事件对象*/handleTouchMove(e) {if (!this.data.isDrawing) return;const { x, y } = e.touches[0];this.data.currentStroke.push([x, y]);this.data.ctx.lineTo(x, y);this.data.ctx.stroke();},/*** 处理触摸结束事件* 完成当前笔画,将其添加到笔画历史中*/handleTouchEnd() {if (!this.data.isDrawing) return;this.setData({isDrawing: false,points: [...this.data.points, this.data.currentStroke],currentStroke: []});},/*** 清除画布内容* 清空所有笔画记录和画布显示*/handleClear() {const { ctx } = this.data;ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);this.setData({ points: [] });},/*** 撤销上一步操作* 移除最后一笔,并重绘剩余的笔画*/handleUndo() {if (this.data.points.length === 0) return;const { ctx } = this.data;ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);// 移除最后一笔const newPoints = this.data.points.slice(0, -1);this.setData({ points: newPoints });// 重绘所有笔画newPoints.forEach(stroke => {ctx.beginPath();ctx.moveTo(stroke[0][0], stroke[0][1]);stroke.forEach(([x, y]) => {ctx.lineTo(x, y);});ctx.stroke();});},/*** 提交签名* 将画布内容转换为图片并处理提交逻辑* @returns {Promise<void>}*/async handleSubmit() {if (this.data.points.length === 0) {wx.showToast({title: '请先签名',icon: 'none'});return;}// todo: 这里根据具体业务写吧,我这只是举个例子try {// 将画布内容转换为图片const tempFilePath = await new Promise((resolve, reject) => {wx.canvasToTempFilePath({canvas: this.data.ctx.canvas,success: res => resolve(res.tempFilePath),fail: reject});});// 这里可以处理签名图片,比如上传到服务器console.log('签名图片路径:', tempFilePath);wx.showToast({title: '提交成功',icon: 'success'});// 返回上一页setTimeout(() => {wx.navigateBack();}, 1500);} catch (error) {console.error('提交签名失败:', error);wx.showToast({title: '提交失败',icon: 'error'});}}
}); 

注意:handleSubmit 提交的逻辑根据具体的业务写


signature.json

{"usingComponents": {"t-button": "tdesign-miniprogram/button/button"},"disableScroll": true,"pageOrientation": "landscape"
} 

注意:我是用的tdesign这个UI

"pageOrientation": "landscape"这个是设置横屏


就是用canvas画,小程序里这种需求一般都是用canvas

收工,有需要copy去吧,哈哈哈哈哈哈哈哈哈哈


http://www.ppmy.cn/ops/142006.html

相关文章

python 将数据保存到现有的Excel文件的新工作表

out_file ‘query.xlsx’ df1 pd.DataFrame(out_data) 若直接写入&#xff1a; df1.to_excel(out_file, indexFalse, sheet_name‘v5v7’) # 将第二个DataFrame保存到现有的Excel文件的新工作表 with pd.ExcelWriter(out_file, engine‘openpyxl’, mode‘a’) as writer:…

音视频入门基础:MPEG2-TS专题(16)——PMT简介

一、引言 PMT&#xff08;Program Map Table&#xff09;与PAT表成对出现&#xff0c;其PID由PAT表给出。通过PMT表可以得到该节目包含的视频和音频信息&#xff0c;从而找到音视频流&#xff1a; 二、PMT表中的属性 根据《T-REC-H.222.0-202106-S!!PDF-E.pdf》第79页&#x…

Environment Modules安装配置

Environment Modules安装配置 Environment Modules是一款用来管理计算机软件环境的软件&#xff0c;通过简单的命令来控制计算机环境变量。本文接受该软件的安装和配置方法 系统&#xff1a; Linux OpenSUSE 15.6 软件版本&#xff1a; modules 5.5 依赖&#xff1a; gcc 7.5…

生产慎用之调试日志对空间矢量数据批量插入的性能影响-以MybatisPlus为例

目录 前言 一、一些缘由 1、性能分析 二、插入方式调整 1、批量插入的实现 2、MP的批量插入实现 3、日志的配置 三、默认处理方式 1、基础程序代码 2、执行情况 四、提升调试日志等级 1、在logback中进行设置 2、提升后的效果 五、总结 前言 在现代软件开发中&#xff0c;性能优…

Python跳动的爱心

系列文章 序号直达链接表白系列1Python制作一个无法拒绝的表白界面2Python满屏飘字表白代码3Python无限弹窗满屏表白代码4Python李峋同款可写字版跳动的爱心5Python流星雨代码6Python漂浮爱心代码7Python爱心光波代码8Python普通的玫瑰花代码9Python炫酷的玫瑰花代码10Python多…

ESP32-S3模组上跑通ES8388(28)

接前一篇文章:ESP32-S3模组上跑通ES8388(27) 二、利用ESP-ADF操作ES8388 2. 详细解析 上一回解析完了es8388_init函数中的第10段代码,本回继续往下解析。为了便于理解和回顾,再次贴出es8388_init函数源码,在components\audio_hal\driver\es8388\es8388.c中,如下: ​…

Linux系统挂载exfat格式U盘教程,触觉智能RK3562开发板演示

本文介绍Linux系统&#xff08;Ubuntu/Debian通用&#xff09;挂载exfat格式U盘的方法&#xff0c;触觉智能RK3562开发板演示&#xff0c;搭载4核A53处理器&#xff0c;主频高达2.0GHz&#xff1b;内置独立1Tops算力NPU&#xff0c;可应用于物联网网关、平板电脑、智能家居、教…

babeltrace与CTF相关学习笔记-2

这里写自定义目录标题 写在前面前面的小结bt_ctf_writer_create 写在前面 事情正在朝着不可控的方向狂奔。。。 系统工师师&#xff0c;其实只有一个任务&#xff1a;将复杂的系统简单化&#xff1b;将乱成一团的分工&#xff0c;明确化&#xff1b;降低每个人面对的复杂度。归…