独立移动端 H5 (Vue 3 + Vant 4)

1. 核心技术栈清单与职责说明

架构层级	推荐选型	职责与功能定位说明
视图构建引擎	Vue 3.5+ + Vite 5+ + TypeScript	现代化移动 Web 构建基座，毫秒级热重载与严密类型校验
移动组件体系	Vant 4	国内移动 Web 事实标准组件库，轻量稳定，内置开箱即用的丰富移动端交互组件
视口与安全区防御	postcss-mobile-forever + viewport-fit=cover	375px 设计稿无损转 vw，宽屏 540px 居中防横向拉伸，全域适配全面屏底部安全区（Safe Area）
按需引入插件	unplugin-vue-components + @vant/auto-import-resolver	自动化按需加载 Vant 组件与样式，无需手动编写 import 语句，优化包体积
移动手势与工具集	@vueuse/core	专职移动端交互 Hooks：滑动手势识别（useSwipe）、设备物理方向、离线网络监听与弹窗背景滚动防穿透（useScrollLock）
路由与列表保活	Vue Router + <keep-alive>	移动端单页转场路由，基于路由元信息（meta.keepAlive）精准保活长列表，配合 scrollBehavior 自动还原滚动位置
状态流转与持久化	Pinia + pinia-plugin-persistedstate	模块化集中状态管理，支持用户登录态、购物车与偏好配置自动同步至本地缓存
微信生态与社交营销	weixin-js-sdk-ts + 微信开放标签	官方 JSSDK 类型化接入，统一管理 URL 动态签名鉴权、朋友圈/微信群自定义卡片分享、JSAPI 支付与开放标签唤醒小程序
真机在线排障调试	vConsole (条件化动态装配)	移动端开发调试标配，测试环境或彩蛋暗号动态唤起，即时捕获手机真机网络请求、本地缓存与 JS 报错堆栈
网络请求层	Axios	统一 HTTP 客户端，深度封装 Token 传递、401 鉴权拦截与移动弱网超时降级提示

2. 核心选型考量与技术优势

• 国内移动 Web 标杆生态与极致首屏：
  • Vant 4 经受千万级生产验证，轻量纯粹，配合 Vite 现代代码分割与自动按需导入，首屏 JS 体积极小，移动蜂窝网络下秒级渲染开屏。
• “375px 转换 + 540px 防拉伸 + 底部全面屏安全区”三维视口防御：
  • 设计稿精准还原：源码直接按设计稿标注书写 px，由 postcss-mobile-forever 编译期自动换算为 vw；
  • 平板/PC 居中防拉伸：配置 maxDisplayWidth: 540，在大屏设备访问时自动居中并展示背景遮罩，杜绝横向暴力拉伸导致的 UI 变形；
  • 全面屏物理安全区适配：在 HTML 视口强制声明 viewport-fit=cover，并在所有底部悬浮栏（如“立即购买”）强制应用标准 CSS 环境变量 env(safe-area-inset-bottom)，彻底杜绝 iPhone 底部 Home Indicator 横条遮挡关键操作按钮。
• 微信生态与社交获客传播闭环 (WeChat JSSDK)：
  • 引入 weixin-js-sdk-ts 消除裸调用微信全局对象的类型盲区，统一接管 URL 动态签名计算；
  • 告别冰冷的网页裸链接，配置高质量图文卡片分享（带专属封面大图、标题与摘要）；
  • 深度集成微信 JSAPI 支付与微信开放标签（<wx-open-launch-weapp>），实现从公众号 H5 或外部网页一键静默拉起微信小程序或原生 App，形成私域流量互通闭环。
• 原生 App 级列表滚动保活与顺畅回退体验：
  • 基于 Vue Router meta.keepAlive 精准圈定商品/内容长列表页面实例，返回时不触发销毁与重新请求；
  • 配合 scrollBehavior 自动还原用户的浏览滚动坐标，彻底消除单页应用返回顶部和白屏闪烁的廉价感。
• 高频移动手势与防穿透工具集 (@vueuse/core)：
  • 直接复用 Vue 生态顶流工具集，专职驱动滑动手势（useSwipe）、网络在线状态（useOnline）；
  • 弹窗/抽屉浮层打开时调用 useScrollLock 锁定底层网页滚动，从根源杜绝移动端恶劣的背景橡皮筋滚动穿透问题。
• 真机在线抓包与零盲区运维排障 (vConsole)：
  • 彻底终结移动设备无法打开 F12 排查白屏的困境；
  • 在测试环境或通过暗号触发（如连续轻击 Logo 5 次）动态挂载 vConsole，线上突发异常时可在现场真机秒级排查接口返回参数与报错堆栈。

3. 适用业务场景

• 微信公众号网页、微信群/朋友圈分享裂变专题、微信支付回调及营销落地页；
• 原生 App 内部 Webview 嵌合业务单页（如客服中心、会员协议、积分商城、活动大促）；
• 独立移动端 Web 商城、H5 移动敏捷业务工作流与跨平台触屏网页。

4. 局限性与权衡说明

• 局限性：运行于移动浏览器沙箱中，无法直接调用手机底层深度硬件（如原生 NFC、蓝牙后台常驻广播）；复杂手势与物理渲染帧率略逊于 Flutter 原生自绘应用。
• 权衡建议：如需上架各大应用商店、需要系统级硬件权限深度调用或极致 60fps 动效，坚决选择第 05 节 Flutter 移动 APP 方案；纯营销分发与轻量电商，坚守 H5 敏捷阵地。