uni-app签名需按平台差异选型：H5和微信小程序可用Canvas（onReady后获取上下文、px单位），App端nvue须用原生插件如l-signature；Vue3 setup中需ref绑定并onMounted后调用save，逐字签名需状态管理，跨平台一致性必须实测。
uni-app 本身不内置签名功能，必须依赖 Canvas 手动实现或引入第三方签名组件。直接调用 uni.canvasToTempFilePath 或 uni.createCanvasContext 是可行的，但仅在 H5 和部分小程序平台稳定可用，App 端（尤其是 nvue）会因 canvas 渲染机制不同而失败。
Canvas 原生手写签名：为什么 canvas-id 在微信小程序里总报错？
常见错误是：canvas context is not found 或保存图片为空白。根本原因不是代码写错，而是 canvas 生命周期没对齐。
- 微信小程序中，
canvas-id必须在页面onReady后才能安全获取上下文，onLoad阶段调用uni.createCanvasContext大概率返回 null - H5 端需注意 canvas 宽高必须用 px 单位（不能用 rpx），否则
draw时坐标偏移、线条断裂 - App-vue 中 canvas 支持较弱，nvue 更是完全不支持
canvas-id方式，必须换用原生渲染方案（如l-signature或自研native canvas插件） - 示例关键点：
onReady() { // ✅ 正确时机 this.ctx = uni.createCanvasContext('myCanvas', this) }, touchstart(e) { const { x, y } = e.touches[0] this.ctx.moveTo(x, y) }, touchmove(e) { const { x, y } = e.touches[0] this.ctx.lineTo(x, y) this.ctx.stroke() }
lime-signature 组件怎么在 Vue3 setup 里用？
官方插件市场上的 lime-signature 默认只导出 Options API 写法，直接在 setup() 里 ref 调用会丢失事件响应，save 回调拿不到 base64。
- 必须手动绑定 ref 并在
onMounted后调用实例方法：signatureRef.value.save()，不能靠@save直接监听 -
penColor、penSize等 props 要用ref包裹，否则响应式失效（例如const penColor = ref('#000000')） - 保存结果是 Promise，需
await signatureRef.value.save()，返回值结构为{ tempFilePath: string, base64: string }，不是 event 对象 - 注意：该组件在支付宝/抖音/鸿蒙等小程序中无兼容性保障，仅验证过微信小程序 + H5
逐字签名 + 笔画校验：怎么把「张三」拆成两个格子分别签？
这不是 UI 布局问题，而是状态流控制问题。用户必须签完第一个字，才允许进入第二个字 —— 这需要显式管理「当前激活字索引」和「各字签名数据缓存」。
- 先用
Array.from('张三')拆字，每个字渲染一个独立l-signature或 canvas 容器，用v-if="activeIndex === i"控制显隐 - 每次「完成当前字」后，手动触发
signatureRef[i].save()并存入数组：signatures[i] = base64，再activeIndex++ - 笔画校验需额外集成前端汉字笔顺库（如
cn-char），对比用户轨迹点与标准笔画路径的拓扑关系，非简单像素匹配 —— 这块没有现成 uni-app 插件，得自己封装 canvas 轨迹采样 + 简化算法 - 田字格/米字格背景图要用
image标签叠加在 canvas 下层，不能绘制成 canvas 图形，否则在 iOS 小程序里缩放失真
真正难的不是“怎么画”，而是“怎么让签名在所有平台都拿到一致的 base64 图片”——微信能跑通的 canvas 逻辑，在 App 端大概率白屏，在鸿蒙元服务里可能连 canvas-id 都注册不上。选型前务必按目标平台逐个实测，别只看文档写的“✅ 支持”。
