去年帮朋友做合同审批的小程序，甲方提出要在线签章。我翻遍了微信开放文档，发现官方连个签名组件的影子都没有——所有方案都得自己拼。折腾了两周，踩了无数坑，把canvas、触摸事件、图片合成、云存储全串了一遍。今天把这些实战经验整理出来，从签名采集到图片生成，再到存储和回显，每一步都给你说透。

先说最核心的签名绘制。微信小程序里没有现成的画板组件，只能用canvas。但canvas的触摸事件有个大坑：真机上touchmove触发频率高得吓人，如果每次都重新绘制整条路径，页面会卡成PPT。我一开始用和逐点连线，结果在iPhone 8上画到一半就掉帧。后来改成贝塞尔曲线平滑处理，把触摸点存进数组，每三个点取中间点作为控制点，用绘制，流畅度瞬间提升。这里给你贴段核心代码：

const {x, y} = e.touches[0]

this.points.push({x, y})

if (this.points.length < 3) return

const last = this.points[this.points.length - 1]

const prev = this.points[this.points.length - 2]

x: (last.x + prev.x) / 2,

y: (last.y + prev.y) / 2

this.ctx.moveTo(prev.x, prev.y)

this.ctx.quadraticCurveTo(prev.x, prev.y, mid.x, mid.y)

绘制只是第一步，签名完成后怎么导出成图片才是关键。canvasToTempFilePath这个方法有版本兼容问题，基础库2.7.0以下不支持直接传canvas节点，得用的回调方式。我建议在组件里用包一层，确保canvas渲染完成后再导出。还有个隐蔽的坑：如果canvas设置了，导出时参数要写成，而不是传canvasId，否则真机上会报错。导出得到临时文件路径后，记得用把它存到本地，因为临时路径在冷启动后会失效。

存储环节很多人会直接上传到云存储，但忽略了鉴权和过期策略。如果你用的是微信云开发，推荐直接调，但要注意文件路径不能包含中文，否则iOS端会报错。我习惯把签名图片统一存到目录下，文件名用userId加时间戳拼接。上传成功后拿到fileID，但fileID在迁移数据库或换环境时会失效，所以最好同时把临时路径也存一份到记录里。另外，签名图片涉及法律效力，建议在存储时打上水印或加密，我用的方法是先canvas绘制水印文字再导出，虽然多一步但安全很多。

回显签名图片也有讲究。如果只是展示，直接用组件的绑定fileID就能自动下载。但如果是编辑场景，比如合同需要重新签署，你要把旧签名回填到canvas上。这里有个性能问题：直接会把原图拉伸变形，特别是不同屏幕分辨率下。我踩过最深的坑是开发工具上canvas坐标和真机不一致，因为rpx在真机上会换算成不同像素值。解决方案是统一用动态计算canvas宽度，再按比例换算高度。

接下来说签名校验。很多开发者忽略这一步，但法律场景下必须有。我做了两层校验：第一层是签名区域有效判定，计算触摸点的坐标范围，如果所有点都集中在某个角落，或者总点数少于20个，就判定为无效签名；第二层是内容校验，把canvas导出图片后，用获取图片尺寸，检查透明像素占比，超过70%就说明用户可能只画了个点。这两个方法都不需要引入第三方SDK，纯前端就能实现。

说性能优化。签名组件如果放在长列表页面，滚动时canvas会频繁重绘导致卡顿。我建议把签名区域做成独立组件，用固定在底部，同时给canvas设置属性阻止滚动穿透。还有个细节：canvas的和属性一定要写死，不能依赖CSS，否则在安卓机上会模糊。字体大小和线条宽度也建议用px而非rpx，因为canvas绘制时像素值不随屏幕缩放。

整个流程走下来，你会发现微信小程序电子签名其实是个系统工程。从触摸采集到平滑绘制，再到图片导出和云存储，每个环节都有各自的坑。但只要你按照这套流程走一遍，基本能覆盖90%的业务场景。遇到问题别急着找插件，先想想canvas原生能不能解决——毕竟在微信生态里，原生方案永远比第三方SDK更稳。