主题
01 · 多端路线图与选型心智
目标：建立「官方为真源」的学习法，说清四条路线的定位与边界，并锁定本系列 PWA → Capacitor → uni-app 打包 → RN 的顺序。
1. 背景与目标
前端写页面不难；难的是：同一份业务能力，要出现在浏览器、桌面快捷方式、应用商店、微信小程序、甚至「更像原生」的 App 里。
本系列不教从 0 做完整业务 App，而是帮你建立选型与工程落地的判断力——面试能讲清「为什么选这条路、代价是什么」。
相对「前端进阶」：
| 已有短文 | 本系列补什么 |
|---|---|
| 18 · PWA | Manifest / SW 可跑通的工程步骤 |
| 22 · 跨端对照 | uni-app 打包 / 发行视角（不重讲条件编译全文） |
2. 核心概念：四条路线一张表
| 路线 | 本质 | 典型分发 | 强项 | 弱项 |
|---|---|---|---|---|
| PWA | Web + Manifest +（可选）Service Worker | 浏览器 /「添加到主屏幕」 | 零商店审核、迭代快、一套 Web 技能 | iOS 能力偏弱；国内商店生态弱 |
| Capacitor | Web 资源塞进原生 WebView + 插件桥 | App Store / 各安卓商店 | 复用现有 Vite/Vue/React 站点；原生 API 插件化 | 仍是 WebView 壳；复杂原生体验要写插件 |
| uni-app | Vue DSL → 多端编译（H5 / 小程序 / App…） | 小程序审核 + 可选 App | 国内小程序一条龙；与 Journal 技术栈一致 | 运行时差异多；App 端与「纯 Web」心智不同 |
| React Native | JS → 原生控件（非 DOM） | 双端商店 | 接近原生 UI；生态与招聘面广 | 学习曲线；桥接与打包工程重 |
一句话选型：
text
只要浏览器安装 / 弱网外壳 → 先 PWA
已有成熟 Web，要进商店 → Capacitor（或 Ionic 壳，本系列不展开）
主战场是微信等小程序 + 可选 App → uni-app
要「原生控件级」体验、团队会 RN → React Native
要自绘 UI 引擎级跨端 → Flutter（本系列不写，仅知晓）1
2
3
4
5
2
3
4
5
Taro 等「React 写小程序」与 uni-app 同属编译多端阵营；本系列用 Journal 已选的 uni-app 做打包实践，不平行开 Taro 专章。
3. 本系列四阶段（已定）
text
阶段 A PWA 工程落地 → 01～02
阶段 B Capacitor 进壳与发布 → 03～04
阶段 C uni-app 多端打包 → 05～06（对照本仓库 client）
阶段 D RN 入门到发布 + 复盘 → 07～08
阶段 E RN 深潜（Fabric 等） → 09～141
2
3
4
5
2
3
4
5
明确不做：完整上架流水账、Flutter/Taro/Ionic 专章、uni-app 业务页从零教程、把方案写进 docs/spec/。
4. 最小实践（本篇）
用 10 分钟写一张「我的项目选型卡」（可贴学习便签）：
- 目标端：仅 H5 / 要小程序 / 要商店 App / 都要
- 现有代码：纯 Web / uni-app / 无
- 团队技能：Vue / React / 有无原生同学
- 初选路线 + 一条否决理由（例如「必须微信生态 → 否决纯 PWA」）
对照 Journal：C 端是 uni-app（Vue），主发 H5 + 微信小程序；App 打包是能力储备，不是当前唯一交付形态——这正是阶段 C 要练的判断。
5. 踩坑与取舍
- 「一套代码到处跑」当口号：端差异永远存在；预算条件编译 / 平台适配层。
- 先学 RN 再学 PWA：跳过 Web 可安装与壳模型，后面对比会虚。本系列刻意按 Web → 壳 → 编译多端 → 原生控件递进。
- 把小程序当浏览器调：见 22；本系列 05 只从构建产物与包体谈。
- 为了简历硬上四条：一条路线做到「能口述构建与发布」优于四条半吊子。
6. 验收清单
- [ ] 能用 1 分钟口述四条路线各自「是什么 / 何时选」
- [ ] 写过一张个人选型卡（含否决理由）
- [ ] 说清本系列边界：不做完整上架长文、不写 Flutter 专章
- [ ] 知道前端进阶 18 / 22 与本系列的分工
7. 下一步
→ 02 · PWA 工程落地：Manifest 与 SW 更新