ios怎样调用html5手势密码_ios调用html5手势组件法【步骤】 返回列表

必须禁用双击缩放并适配安全区域：在HTML中添加viewport禁用缩放，Native端关闭scrollView回弹或侧滑返回；H5与Native通信需用WKScriptMessageHandler或JSBridge加密传输密码；触摸坐标须用getBoundingClientRect计算相对位置，并在capture阶段绑定touchmove事件。

UIWebView/WKWebView 加载 HTML5 手势密码页必须禁用双击缩放

iOS WebView 默认启用双击缩放，而手势密码依赖精确的 touchstart/touchmove 坐标判断，一旦触发缩放，e.touches[0].clientX 会因视口缩放失真，导致点选错位甚至无法识别路径。这不是 bug，是 Safari 渲染层行为。

• 必须在 HTML 中加入：
• 在 Native 端加载时同步设置：webView.scrollView.bounces = NO（UIWebView）或 webView.allowsBackForwardNavigationGestures = false（WKWebView 防止侧滑返回干扰）
• 若仍出现缩放，检查是否漏了 user-scalable=no —— iOS 10+ 对缺失此项非常敏感

Native 与 H5 之间传递手势结果要用 JSContext 或 WKScriptMessageHandler

HTML5 手势密码完成绘制后，需把密码数组（如 [2,5,8,6]）安全传回 iOS，不能靠 window.location.hash 或轮询 localStorage，既不安全也不可靠。

• WKWebView 推荐用 WKScriptMessageHandler：H5 调用 window.webkit.messageHandlers.gestureResult.postMessage(pwdArray)，Native 在 userContentController:didReceive: 中接收
• UIWebView 只能注入 JSBridge：通过 stringByEvaluatingJavaScriptFromString: 注册全局回调函数，H5 执行 window.nativeCallback(pwdArray)
• ⚠️ 注意：密码字符串必须在 H5 端加密后再传，不要裸传明文数组；Native 收到后也应立即清空 JS 内存引用，防止被调试器 dump

触摸坐标计算要适配状态栏 + 安全区域偏移

iOS 设备（尤其 iPhone X 及以后）存在刘海、Home Indicator 区域，document.documentElement.clientHeight 不等于可视区域真实高度，直接用 clientX/clientY 计算九宫格坐标会导致点位整体下移或错位。

• 绘制九宫格前，先获取安全区域：const safeArea = window

  

  .getComputedStyle(document.documentElement).getPropertyValue('--safe-area-inset-bottom')（需 CSS 注入支持），或用 window.innerHeight 替代 screen.height
• 推荐方案：用 getBoundingClientRect() 获取 canvas 实际渲染位置，再结合 e.touches[0].clientX - rect.left 算相对坐标，彻底避开 viewport 缩放和安全区干扰
• 测试时务必在真机上验证 iPhone 15 Pro（灵动岛）、iPhone SE（无刘海）两种极端机型

WKWebView 下 touchmove 阻止默认行为必须在 capture 阶段

为防止手势过程中页面意外滚动，H5 必须调用 e.preventDefault()，但在 WKWebView 中，如果绑定在 bubbling 阶段（默认），部分 touchmove 事件仍会透出并触发滚动。

立即学习“前端免费学习笔记（深入）”；

• 正确写法：canvas.addEventListener('touchmove', handler, { passive: false, capture: true })
• passive: false 是关键——iOS Safari 默认给 touch 事件加了 passive=true，此时再调 preventDefault() 会被忽略且抛 warning
• 若使用 Hammer.js 等库，确保初始化时传 inputClass: Hammer.SafariMobileInput，否则多点触控识别率骤降

原生调用 HTML5 手势密码最易被忽略的不是加密逻辑，而是坐标系对齐和事件拦截时机——这两个点一旦出问题，用户“明明画对了却提示错误”，排查起来极难定位到 WebView 层。