移动端 H5 与混合开发
此处「移动端前端」指：移动浏览器内打开的 H5，或 原生 App 内嵌 WebView / 小程序 WebView 中的前端页面；与「小程序原生语法」「独立 RN 工程」区分（小程序见下一篇，RN 略）。
常见交付形态
| 形态 | 说明 |
|---|---|
| 响应式 H5 | 一套 HTML/CSS 适配多屏，viewport + rem/vw + 媒体查询 |
| 移动专用 H5 | 独立移动域名或路由，组件库偏 Vant、NutUI 等 |
| Hybrid | WebView 加载远程或本地 H5，JSBridge 调原生能力（相机、支付、定位） |
| 壳 + SPA | 原生壳只做容器与鉴权，业务全是 Web |
选型优势（相对纯原生）
- 迭代快：发版不依赖应用商店长审核（业务在服务端更新即可）。
- 人才栈统一：团队以 Web 为主时成本低。
- 覆盖广：任意可达 URL 即可投放活动页、落地页。
典型痛点与对策
| 痛点 | 思路 |
|---|---|
| 机型碎片化 | 基准机型测试矩阵 + 样式边界收敛 |
| 软键盘顶布局 | visualViewport、输入框滚动进可视区 |
| 300ms 点击延迟（历史问题） | touch-action、fastclick（按需） |
| WebView 性能 | 长列表虚拟滚动、减少重排、图片懒加载与合适格式 |
| 鉴权 | Cookie / Token + Bridge 传参；注意 WebView 第三方 Cookie 策略 |
与小程序、PWA 的取舍
- 强依赖微信生态与分享：往往优先考虑 小程序（本篇 H5 可作承载页跳转）。
- 要安装图标 + 离线：同一业务可同时评估 PWA（浏览器侧）。
- 要深度系统能力：Hybrid 通过 JSBridge 调用原生模块。
小结
移动端 H5 的核心架构选择是：容器是谁（浏览器 vs WebView）、是否需要 Bridge、是否与小程序共用接口规范。工程上重视 性能预算（首屏 JS、图片）与 兼容矩阵，避免桌面组件库直接搬上移动不加适配。