Appearance
跨端方案
元信息
- 目标：理解跨端方案的目标——用一套代码覆盖浏览器/桌面/移动/小程序多端；沿"离浏览器多远"的谱系（响应式→WebView→Electron→RN→Flutter）权衡体验与成本，认识 Web 技术是跨端的最大公约数
- 关键概念：跨端、WebView、Electron、React Native、Flutter、小程序
- 关联阶段：cp4
- 常见误区：以为跨端有一套万能方案（离浏览器越近成本越低能力越弱，离原生越近能力越强成本越高）；以为 RN/Flutter 写的仍是 Web（RN 映射为原生控件，Flutter 自带渲染引擎，都不经浏览器渲染）；以为跨端后无需再管原生细节（两套平台的差异仍需逐端适配）
问题：一套代码，多个终端
浏览器、桌面、iOS、Android、小程序——每个终端一套原生技术栈成本高昂。跨端方案的目标是用一套代码覆盖多端，而 Web 技术正是最大的公约数：它本来就是一个"在所有平台都有运行时"的技术栈。
谱系：离浏览器多远？
| 路线 | 代表 | 原理 | 体验 | 代价 |
|---|---|---|---|---|
| 响应式设计 | 媒体查询等 | 同一个 Web 站点适配各屏（见响应式设计） | 同 Web | 无新能力 |
| WebView 混合 | Cordova/Capacitor | 原生壳 + 内嵌浏览器跑 Web 代码 | 接近 Web | 性能受 WebView 限制 |
| 桌面跨端 | Electron / Tauri | 桌面壳 + Web 前端（VS Code 即 Electron） | 接近原生 | 内存占用（Tauri 用系统 WebView 更轻） |
| 原生渲染 | React Native | JS 写界面，映射为原生控件 | 接近原生 | 两套细节仍需适配 |
| 自绘引擎 | Flutter | 自带渲染引擎，不依赖原生控件 | 一致性最高 | 包体积、生态自成体系 |
| 小程序 | 微信/支付宝等 | 平台定制的"受限 Web + 原生组件" | 接近原生 | 平台私有能力与审核 |
判断
跨端没有银弹：离浏览器越近，成本越低、能力越弱；离原生越近，能力越强、成本越高。选择取决于应用对设备能力、性能与渠道的分发要求。Web 技术作为最大公约数的地位——浏览器之外，WebView/Electron/RN 的运行时里跑的仍是 JS——印证了本课程的主线：学好 Web 平台本身，就是跨端的通用底座。