更新记录

1.0.0（2025-12-04） 下载此版本

是一个基于uni-app开发的横屏签名插件，提供流畅的签名体验和完整的功能支持，适用于需要签名功能的各种场景。

2. 功能特性

• ✅ 横屏设计：专为横屏签名优化，提供舒适的签名体验
• ✅ 跨平台兼容：支持微信小程序和H5平台
• ✅ 流畅绘制：支持平滑的线条绘制，支持不同粗细和颜色
• ✅ 多种输入方式：支持触摸和鼠标输入
• ✅ 签名保存：支持保存签名为图片，返回base64数据
• ✅ 清空重绘：支持一键清空，重新签名
• ✅ 事件通知：通过事件总线传递签名结果
• ✅ 透明背景：签名图片背景为透明，便于后续使用

平台兼容性

uni-app(3.6.15)

answer-signature

1. 插件介绍

answer-signature是一个基于uni-app开发的横屏签名插件，提供流畅的签名体验和完整的功能支持，适用于需要签名功能的各种场景。

2. 功能特性

• ✅ 横屏设计：专为横屏签名优化，提供舒适的签名体验
• ✅ 跨平台兼容：支持微信小程序和H5平台
• ✅ 流畅绘制：支持平滑的线条绘制，支持不同粗细和颜色
• ✅ 多种输入方式：支持触摸和鼠标输入
• ✅ 签名保存：支持保存签名为图片，返回base64数据
• ✅ 清空重绘：支持一键清空，重新签名
• ✅ 事件通知：通过事件总线传递签名结果
• ✅ 透明背景：签名图片背景为透明，便于后续使用

3. 支持平台

4. 安装方式

方式一：uni_modules市场安装

1. 在HBuilderX中打开你的uni-app项目
2. 点击顶部菜单栏的「插件市场」
3. 搜索「answer-signature」
4. 点击「安装到项目」
5. 选择你的项目，点击「确定」

方式二：手动安装

1. 下载插件包
2. 将插件包解压到项目的uni_modules目录下
3. 确保目录结构为：uni_modules/answer-signature/

5. 快速开始

5.1 在pages.json中配置页面

{
  "pages": [
    {
      "path": "pages/signature/signature",
      "style": {
        "navigationBarTitleText": "签名",
        "navigationStyle": "custom",
        "pageOrientation": "landscape"
      }
    }
  ]
}

5.2 创建签名页面

<template>
  <view class="signature-container">
    <view class="canvas-wrapper">
      <canvas 
        class="signature-canvas" 
        canvas-id="signatureCanvas"
        style="width: 100%; height: 600rpx; background-color: #ffffff;"
        @touchstart=""
        @touchmove=""
        @touchend=""
      ></canvas>
    </view>

    <view class="control-panel">
      <button class="control-btn back-btn" @click="back">返回</button>
      <button class="control-btn clear-btn" @click="clear">清空</button>
      <button class="control-btn save-btn" @click="save">保存</button>
    </view>
  </view>
</template>

5.3 调用签名页面

<template>
  <view>
    <button @click="toSignature">立即开始签名</button>

    <!-- 签名结果展示 -->
    <view v-if="signatureData" class="result-container">
      <image :src="signatureData.base64" mode="aspectFit" class="signature-image"></image>
      <text class="base64-text">{{ signatureData.base64.substring(0, 100) }}...</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        signatureData: null
      }
    },
    onShow() {
      // 监听签名保存事件
      uni.$on('signatureSaved', (data) => {
        this.signatureData = data;
      });
    },
    onUnload() {
      // 移除事件监听，避免内存泄漏
      uni.$off('signatureSaved');
    },
    methods: {
      toSignature() {
        uni.navigateTo({
          url: '/pages/signature/signature'
        });
      }
    }
  }
</script>

6. 详细使用说明

6.1 签名页面功能

• 返回：返回上一页，不保存签名
• 清空：清空当前签名，重新开始
• 保存：保存当前签名，返回上一页并传递签名结果

6.2 接收签名结果

通过uni-app的事件总线接收签名结果：

// 在页面的onShow生命周期中监听
onShow() {
  uni.$on('signatureSaved', (data) => {
    console.log('签名结果:', data);
    /*
    data结构：
    {
      imagePath: '临时文件路径', // 微信小程序端返回
      base64: 'data:image/png;base64,...' // 完整的base64数据
    }
    */
  });
}

// 在页面卸载时移除监听
onUnload() {
  uni.$off('signatureSaved');
}

7. API说明

7.1 事件说明

7.2 返回数据结构

{
  imagePath: String,  // 微信小程序端返回的临时文件路径
  base64: String     // 完整的base64数据，格式为：data:image/png;base64,...
}

8. 注意事项

1. 页面配置：确保在pages.json中配置签名页面为横屏模式
2. 事件监听：务必在onUnload生命周期中移除事件监听，避免内存泄漏
3. 权限问题：微信小程序端保存图片可能需要相册权限
4. H5适配：H5端需要确保DOM已完全渲染后再初始化canvas
5. 性能优化：签名过程中避免频繁的DOM操作

9. 常见问题

Q: 签名后没有返回结果？

A: 请检查是否正确监听了signatureSaved事件，确保事件名称拼写正确。

Q: H5端签名没有反应？

A: 请检查浏览器控制台是否有报错，确保canvas初始化成功。

Q: 签名图片不清晰？

A: 这是因为canvas默认分辨率较低，可以通过调整canvas尺寸或使用高分辨率设备解决。

Q: 签名图片背景不是透明的？

A: 请确保没有绘制白色背景，插件默认生成的签名图片背景为透明。

10. 最佳实践

10.1 签名结果处理

onSignatureSaved(data) {
  // 保存到本地
  if (data.imagePath) {
    uni.saveImageToPhotosAlbum({
      filePath: data.imagePath,
      success: () => {
        uni.showToast({ title: '保存成功' });
      }
    });
  }

  // 上传到服务器
  if (data.base64) {
    uni.uploadFile({
      url: 'https://example.com/upload',
      filePath: data.imagePath || '',
      name: 'file',
      formData: {
        base64: data.base64
      },
      success: (res) => {
        console.log('上传成功:', res.data);
      }
    });
  }
}

10.2 样式定制

/* 自定义签名画布样式 */
.signature-canvas {
  border: 1px solid #ddd;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

/* 自定义按钮样式 */
.control-btn {
  margin: 0 10rpx;
  border-radius: 50rpx;
  font-weight: 500;
}

11. 更新日志

v1.0.0 (2025-12-04)

• 初始版本发布
• 支持微信小程序和H5平台
• 实现横屏签名功能
• 支持保存为base64数据
• 支持清空重绘
• 支持返回上一页

12. 许可证

MIT License

13. 联系方式

如有问题或建议，欢迎提交issue或联系开发者。

answer-signature - 让签名更简单，更流畅！ 🎉