不能直接使用web端滑动验证码sdk，因其依赖window、document等浏览器api，在小程序/app中会报错；第三方插件普遍存在后端缺口坐标未下发、dom操作兼容性差、跨域图片加载失败等问题，需手写canvas+touch逻辑，确保图片由后端提供、缺口坐标严格一致、拖动偏移归一化处理。
不能直接用 Web 端滑动验证码 SDK，因为 window、document、addEventListener 在小程序/App 里根本不存在，真机跑起来会报 ReferenceError: window is not defined 或者拖拽没反应——这事得自己重写核心逻辑，而不是找插件凑合。
为什么不能用第三方滑动验证插件
市面上多数插件（比如 wo-slider）只做了“拖动+回调”，没处理关键校验环节：缺口位置必须由后端生成并下发，前端只负责渲染和上报归一化偏移。否则攻击者直接伪造 dragX 就能绕过验证。更麻烦的是，很多插件默认用 DOM 操作画图，但在微信小程序里 new Image() 不支持远程地址，canvas.drawImage 加载网络图会跨域失败或异步丢帧。
- 插件若依赖
v-html注入 script 标签，在小程序中完全不执行 - H5 下能加载但拖不动？大概率是插件监听了
document.body，而 uni-app 实际根节点是#app，事件委托失效 - 安卓 App 端对 base64 图片 decode 不稳定，直接传 base64 给
drawImage容易白屏
用 canvas + touch 事件手写滑块组件
核心三件事：画背景图、切缺口、拖滑块。所有图片必须由后端返回两张独立图（背景图 + 缺口图），不能前端裁剪——iOS 小程序 canvas 对跨域图限制极严，且不同平台对 clip() 支持不一致。
- 初始化时调用
uni.createCanvasContext('verifyCanvas', this)，别漏掉第二个参数this，否则真机拿不到上下文 - 先
drawImage(bgImage, 0, 0, width, height)画整张背景图；再用clip()裁出缺口区域（x/y 坐标由后端返回）；最后把缺口图贴进去 - iOS 真机
clip()失效？改用globalCompositeOperation = 'destination-out'配合透明矩形“擦除”背景来模拟缺口 - 滑块图（用户拖的那个小图）只渲染一次，拖动时只更新
left值，不要每帧重绘 canvas，否则卡顿
touch 事件必须手动归一化偏移值
滑块拖动必须用 touchstart/touchmove/touchend，不能用 @click 或 @longpress —— 后者无法连续捕获位移。松手时提交的不是像素值，而是归一化后的比值，否则不同屏幕宽度下容差校验会崩。
-
touchstart记录初始clientX；touchmove实时算offsetX = currentX - startX - 用
Math.max(0, Math.min(offsetX, maxWidth))限制拖动范围（比如maxWidth = 280），避免拖出界导致状态错乱 -
touchend中计算：const normalized = parseFloat((offsetX / maxWidth).toFixed(3))，保留三位小数防浮点误差 - 最终发给后端的字段是
{ userOffset: normalized, token: 'xxx' }，后端按相同比例反推像素位置做比对
小程序平台特别注意的坑
微信/支付宝小程序里，canvas 渲染和 touch 坐标体系跟 H5 不一样，稍不注意就偏移几十像素。尤其安卓真机上 drawImage 加载网络图经常异步失败，必须先缓存再画。
- 网络图必走
uni.downloadFile→uni.getImageInfo→ 得到本地临时路径tempFilePath再传给drawImage - canvas 宽高必须同时设置 CSS 和
canvas-width/canvas-height属性，否则 H5 和小程序渲染尺寸不一致 - 滑块容器的
left动态绑定要用rpx单位，但计算时得先用uni.getSystemInfoSync().screenWidth换算成 px，再转回 rpx - 别在
mounted里直接查 DOM 宽度，得用nextTick+uni.createSelectorQuery确保节点已渲染
最易被忽略的点：后端返回的缺口坐标 x 是原始像素值，前端归一化时用的 maxWidth 必须和后端校验时用的完全一致——如果前端用 280，后端却按 300 算容差，哪怕用户拖得再准也会失败。
