微信小程序在线签名

2025 年 10 月 14 日

6 次浏览

2664字数

###### 1、wxml

```html
<view class="container">
  <canvas
    type="2d"
    id="signatureCanvas"
    style="width: 100vw; height: 80vh; background: #fff; border: 1px solid #ccc;"
    disable-scroll="true"
    bindtouchstart="onStart"
    bindtouchmove="onMove"
    bindtouchend="onEnd"
  ></canvas>

<view class="btns">
    <button size="mini" bindtap="clear">清除</button>
    <button size="mini" type="primary" bindtap="save">保存</button>
    <button size="mini" type="warn" bindtap="cancel">返回</button>
  </view>
</view>
```

###### 2、wxss

```css
page {
  background: #fff;
}
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.btns {
  margin-top: 10rpx;
  display: flex;
  gap: 30rpx;
}
```

###### 3、js

```js
const app = getApp();

Page({
  data: {
    ctx: null,
    isDrawing: false,
    lastX: 0,
    lastY: 0
  },

onReady() {
    // 使用 Canvas 2D API 获取 context
    const query = wx.createSelectorQuery()
    query.select('#signatureCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        const dpr = wx.getWindowInfo().pixelRatio
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr)
        ctx.lineCap = 'round'
        ctx.lineJoin = 'round'
        ctx.lineWidth = 3
        ctx.strokeStyle = '#000'
        this.setData({ ctx, canvas })
      })
  },

onStart(e) {
    const { x, y } = e.touches[0]
    const ctx = this.data.ctx
    ctx.beginPath()
    ctx.moveTo(x, y)
    this.setData({
      isDrawing: true,
      lastX: x,
      lastY: y
    })
  },

onMove(e) {
    if (!this.data.isDrawing) return
    const { x, y } = e.touches[0]
    const ctx = this.data.ctx
    ctx.lineTo(x, y)
    ctx.stroke()
    this.setData({ lastX: x, lastY: y })
  },

onEnd() {
    const ctx = this.data.ctx
    ctx.closePath()
    this.setData({ isDrawing: false })
  },

clear() {
    const { ctx, canvas } = this.data
    ctx.clearRect(0, 0, canvas.width, canvas.height)
  },

save() {
    const { canvas } = this.data
    wx.canvasToTempFilePath({
      canvas,
      success: (res) => {
        const path = res.tempFilePath
        const pages = getCurrentPages()
        const prevPage = pages[pages.length - 2]
        prevPage.setData({ signaturePath: path })
        app.navigateBack();
      },
      fail: (err) => {
        console.error('保存失败:', err)
        wx.showToast({ title: '保存失败', icon: 'none' })
      }
    })
  },

cancel() {
    app.navigateBack();
  }
})
```

###### 4、json

```json
{
    "usingComponents": {},
    "navigationStyle": "custom",
    "pageOrientation": "landscape"
}
```

###### 5、效果图

![签名页](https://www.renlmingj.cn/usr/uploads/2025/10/423528876.png)

![签名效果图](https://www.renlmingj.cn/usr/uploads/2025/10/902045155.png)

> 注：保存时会自动返回上一页并在上一页的`data`中添加`signaturePath`字段存放临时链接

最后修改：2025 年 10 月 14 日