简介

在移动应用开发中，电子签名功能被广泛应用于合同签署、订单确认等场景。Uniapp + Vue3 是一种跨平台的移动应用开发框架，本文将介绍如何利用Uniapp + Vue3生成Canvas进行电子签名。

准备工作

安装Node.js
安装Uniapp CLI

创建项目

打开终端，输入以下命令创建一个Uniapp项目：

uni init my-project

根据提示选择项目模板，推荐选择vue3模板。

页面布局

在项目的pages文件夹中创建一个新的页面，命名为Signature。在该页面的template标签中添加以下代码：

<template>
  <view class="container">
    <canvas class="canvas" canvas-id="signatureCanvas"></canvas>
    <button class="confirm-btn" @click="confirmSignature">确认签名</button>
  </view>
</template>

样式设计

在Signature页面的style标签中，添加以下样式：

<style>
.container {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.canvas {
  width: 300rpx;
  height: 200rpx;
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid #000;
}

.confirm-btn {
  width: 200rpx;
  height: 80rpx;
  background-color: #009688;
  color: #fff;
  border: none;
  border-radius: 5px;
}
</style>

页面逻辑

在Signature页面的script标签中，添加以下逻辑：

<script>
export default {
  methods: {
    confirmSignature() {
      const ctx = uni.createCanvasContext('signatureCanvas', this);
      
      // 绘制签名
      ctx.setStrokeStyle('#000');
      ctx.setLineWidth(2);
      ctx.moveTo(0, 0);
      ctx.lineTo(100, 100);
      ctx.stroke();
      
      // 保存签名为图片
      ctx.draw(false, () => {
        uni.canvasToTempFilePath({
          canvasId: 'signatureCanvas',
          success: (res) => {
            const imageSrc = res.tempFilePath;
            // 进行后续操作，如保存到数据库等
          }
        }, this);
      });
    }
  }
}
</script>

运行

在终端中使用以下命令启动开发服务器，然后使用Uniapp提供的开发者工具或在浏览器中访问生成的链接，即可查看并测试签名功能。

uni serve

总结

本文介绍了如何利用Uniapp + Vue3生成Canvas进行电子签名。通过以上步骤，你可以轻松地在Uniapp中实现电子签名功能，并且可根据实际需求对签名进行后续处理。希望本文对你理解Uniapp + Vue3的开发流程并实现电子签名功能有所帮助。

Markdown 格式化的一点小建议

标题：使用#号来表示标题的级别，一个#号表示一级标题，两个#号表示二级标题，依此类推。建议在每个标题前后加上空行，以增强可读性。
字体样式：可以使用加粗、斜体、~~删除线~~等标记符号来表示不同的字体样式。在需要强调的文字周围加上相应的符号即可。
引用：可以使用>来表示引用的内容，引用内容需要在每行前面加上一个>符号。
链接和图片：可以使用[]和()来表示链接和插入图片。对于链接，将链接文字放在[]内，链接地址放在()内；对于图片，将替代文字放在[]内，图片地址放在()内。
代码块：使用三个反引号(```)来标记代码块，代码块内的内容会保留格式和高亮显示。
列表：使用-或*来表示无序列表，使用数字+英文句点来表示有序列表。

以上是一些建议，你可以根据自己的需要进行适当调整，让文章更具可读性和美观性。

本文来自极简博客，作者：风吹过的夏天，转载请注明原文链接：Uniapp - Vue3 生成 Canvas 进行电子签名

Uniapp - Vue3 生成 Canvas 进行电子签名

简介