微信小程序签名组件

歪歪的橘猫

已于 2022-06-12 17:45:37 修改

阅读量2.3k

点赞数 4

文章标签：微信小程序 javascript 前端

于 2022-06-10 16:09:27 首次发布

本文链接：https://blog.youkuaiyun.com/zzaixiao/article/details/125222920

版权

本文介绍了如何封装和使用微信小程序签名组件，组件支持生成base64和临时文件格式的签名图片，适用于线上签名场景。文章包含组件的wxml、js、json和wxss代码示例，帮助开发者快速集成并应用到项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序签名组件：

现在线上签名的需求越来越多，然后就封装了一下组件，方便以后使用，可以获取的图片格式有 base64和临时文件

组件展示：

在这里插入图片描述

可以扫码查看是否符合自己的需求
在这里插入图片描述

wxml：

<!--components/autograph/index.wxml-->
<view class="autograph-container" style="width: {
       {
        width }}; height: {
       {
        height }}; display: block;">
  <canvas class="autograph-canvas" type="2d" disable-scroll style="width: 100%; height: 100%; display: block;" bindtouchstart="handleTouchStart" bindtouchmove="handleTouchMove" bindtouchend="handleTouchEnd" bindtouchcancel="handleTouchEnd" binderror="handleTouchEnd"></canvas>
</view>

js：

// components/autograph/index.js
Component({
   
  /**
   * 组件的属性列表
   */
  properties: {
   
    width: {
   
      type: String,
      value: '100%'
    },
    height: {
   
      type: String,
      value: '400rpx'
    },
    lineWidth: {
   
      type: Number,
      value: 2
    },
    lineColor: {
   
      type: String,
      value: '#000000'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
   
    isDraw: false, // 是否能画画
    canvasElement: null,
    canvasContext

最低0.47元/天解锁文章