滑动验证码核心交互流程为图像加载、拼图生成、用户拖拽和验证判断四阶段，需前后端协同：后端生成随机缺口坐标并下发，前端渲染对齐、实时计算拖动偏移，松手时加密上报dragX等参数，后端校验容差及风控逻辑。
滑动验证码的核心交互流程怎么组织
滑动验证码不是单纯拖拽一个图块，而是需要前端生成随机缺口、后端校验偏移量是否在容差范围内。uni-app 里不能直接用 DOM 操作模拟原生拖拽事件，得靠 touchstart/touchmove/touchend 手动绑定和计算位移。
关键点在于：滑块初始位置要和背景图对齐，用户拖动后实时计算横向偏移（clientX 差值），松手时比对缺口实际横坐标与用户拖动终点的误差。这个缺口坐标必须由后端生成并返回，前端只负责渲染和上报——否则校验可被绕过。
- 缺口图和背景图必须同尺寸、同缩放比例，否则像素级比对失效
- uni-app 的
canvas绘制需用uni.createCanvasContext，且注意真机上drawImage对跨域图片有限制，建议缺口图用 base64 内联或同源接口返回 - 滑动过程中要限制最大拖动范围（比如不超过背景图宽度），避免用户拖出界后松手导致校验逻辑错乱
uni-app 中如何用 canvas 渲染拼图和背景图
不能依赖第三方 UI 库的 canvas 封装，得自己控制绘制顺序和裁剪区域。核心是先画完整背景图，再用 clip() 切出缺口区域，最后把缺口图贴到滑块位置。
示例片段（简化）：
const ctx = uni.createCanvasContext('verifyCanvas', this);
ctx.drawImage(bgImage, 0, 0, width, height); // 先画背景
ctx.beginPath();
ctx.rect(x, y, pieceWidth, pieceHeight); // x/y 是缺口左上角坐标（后端返回）
ctx.clip(); // 裁剪出缺口
ctx.drawImage(pieceImage, x, y, pieceWidth, pieceHeight); // 缺口图只显示在裁剪区内
ctx.draw();注意：clip() 后所有绘制都受限于该路径，且不同平台对 clip 支持有差异，iOS 真机上若出现裁剪失效，可改用 globalCompositeOperation = 'destination-out' 配合透明矩形“擦除”背景来模拟缺口。
- canvas 宽高必须显式设置 CSS 和 canvas 属性，否则 H5 和小程序渲染不一致
- 安卓真机上
drawImage加载网络图可能异步失败，应先用uni.downloadFile缓存到本地临时路径再传入 - 滑块图（即用户拖动的小图）必须和缺口图内容一致，但仅渲染一次，拖动时只更新其
left值，不重绘 canvas
如何防止滑动验证被自动化脚本绕过
纯前端校验毫无意义。必须把关键参数：缺口横坐标 x、用户拖动终点 dragX、时间戳、设备指纹（如 uni.getSystemInfoSync().platform + uni.getSystemInfoSync().model）、以及一个一次性 token（由后端下发，每次验证前需先调用 /captcha/init 接口获取）全部加密签名后提交。
后端收到后，校验 token 是否未使用、时间戳是否在 2 分钟内、签名是否匹配，并最终判断 abs(dragX - x) <= 10（单位 px，容差建议 5–15，太小易误判，太大易被暴力试探）。
- 不要在前端硬编码容差值或缺口坐标，这些必须动态下发
- 滑动结束后的请求必须带
header: { 'X-Nonce': Math.random().toString(36).substr(2, 8) }类似防重放字段 - 连续 3 次失败应触发后端风控，返回新 captcha 并延长等待时间
小程序和 H5 在 touch 事件处理上的关键差异
微信小程序中 touchmove 默认会触发页面滚动，必须加 catchtouchmove 阻止；而 H5 需要在 touchmove 回调里调用 e.preventDefault() 才能禁用默认行为。两者 event 对象结构也不同：小程序用 e.touches[0].clientX，H5 用 e.touches[0].pageX（注意是 pageX，不是 clientX，因 canvas 可能有缩放或滚动偏移）。
- 统一做法是：在
touchstart时记录起始pageX，后续所有位移都基于它计算，避免因滚动导致基准偏移 - 安卓部分低端机 touch 事件响应延迟高，建议在
touchmove中加节流（如 16ms 一次），否则滑块卡顿明显 - 真机调试时发现 touch 事件没触发？检查 canvas 是否被其他绝对定位元素遮挡，或父容器设置了
pointer-events: none
容差计算和缺口坐标的同步是最容易被忽略的一环——前后端单位不一致（px vs rpx）、缩放未归一化、canvas 像素比未适配 retina 屏，都会让看似正确的逻辑在校验时始终失败。
