跨端开发知识体系概览
什么是跨端开发？
跨端开发（Cross-platform Development） 是指用一套代码或技术栈，同时构建多个平台（Web、iOS、Android、桌面端、小程序等）应用的开发方式。
传统开发模式下，iOS 用 Swift/Objective-C、Android 用 Kotlin/Java、桌面端用 C++/C#、Web 用 HTML/CSS/JS——一个产品要维护 4 套代码。跨端技术的核心价值是降低多平台开发成本，让一个团队（尤其是前端团队）就能覆盖多个平台。
什么是跨端开发？ 跨端开发是「一套技术栈覆盖多个平台」的工程思路，前端常见的分为几大阵营：
- Hybrid + JSBridge：原生容器嵌 WebView，通过桥调原生能力，是最老也最普及的方案。
- React Native / Flutter：RN 把 JS 组件映射为原生控件，Flutter 用 Skia 自绘，两者都能跑 60fps。
- Electron / Tauri：桌面端，Electron 捆绑 Chromium 生态成熟但体积大，Tauri 用系统 WebView + Rust 后端。
- 小程序 / Taro / uni-app：双线程架构，同一套 React/Vue 代码编译到多家小程序。
- PWA：不装 App，用 Service Worker + Manifest 给 Web 加上离线、添加到桌面、Push 能力。
为什么前端要学跨端？
前端技术（HTML/CSS/JS）天然具有跨平台特性——浏览器本身就是跨平台的。跨端开发让前端工程师的能力范围从"浏览器"扩展到"所有屏幕"：
- Hybrid + JSBridge：原生容器嵌 WebView，通过桥调用原生能力（淘宝/京东的活动页、微信公众号文章）
- React Native / Flutter：用 JS/Dart 写原生 App
- Electron / Tauri：用 Web 技术写桌面应用（VS Code 就是 Electron）
- 小程序 / Taro：用 React/Vue 语法写微信/支付宝小程序
- PWA：让网页具备原生 App 的离线访问、推送通知能力
核心跨端方案
Hybrid——最古老也最普及的跨端方案
Hybrid（混合应用） = 原生容器（iOS/Android） + WebView 渲染 H5 + JSBridge 互调。它是跨端开发的"鼻祖"——今天你在淘宝、京东、美团 App 里看到的大部分活动页、微信公众号文章、支付宝生活号页面，本质都是 Hybrid。
优势：开发成本低（前端能直接写）、热更新（H5 不需发版）、一套代码多端运行。劣势：性能不如原生，复杂交互体验一般。
JSBridge 是 Hybrid 架构的核心通信层，负责让 H5 调用原生能力（拍照、扫码、支付、定位），也让原生能主动通知 H5。详见 JSBridge 原理与实践。
React Native——JavaScript 写原生 App
React Native (RN) 是 Meta 推出的移动端跨端框架，用 React 语法写 iOS 和 Android 应用。和 WebView 方案不同，RN 渲染的是真正的原生组件（UIView/Android View），所以性能接近原生。
RN 2024 年推出的新架构（JSI + Fabric + TurboModules）进一步提升了 JS 与原生的通信效率，告别了旧的 JSON 序列化 Bridge，实现了同步调用。
Flutter——Dart 语言的 UI 框架
Flutter 是 Google 推出的跨端 UI 框架，使用 Dart 语言。它最大的特点是自渲染——不依赖平台的 UI 控件，而是用自己的渲染引擎（Skia/Impeller）直接绘制像素，所以在各平台上的 UI 表现完全一致。
Flutter 支持 iOS、Android、Web、Windows、macOS、Linux 六端，是目前覆盖平台最全的方案。缺点是 Dart 语言不如 JS/TS 普及，社区生态不如 React Native。
Electron——桌面端的"老大哥"
Electron = Chromium（浏览器内核）+ Node.js，用 Web 技术构建桌面应用。VS Code、Figma 桌面版、Slack、Discord 都是用 Electron 开发的。
优点是开发效率极高（前端可以直接上手），缺点是内存占用大（每个 Electron 应用都内嵌了一个完整的 Chromium）。
Tauri——轻量级的 Electron 替代
Tauri 使用系统自带的 WebView（macOS 的 WebKit、Windows 的 WebView2）+ Rust 后端，不内嵌浏览器，因此打包体积和内存占用远小于 Electron。Tauri 2.0 还支持了移动端（iOS/Android），是近年最受关注的桌面端框架。
小程序——中国特色的"超级 App"生态
微信小程序采用双线程架构——渲染层（WebView）和逻辑层（JSCore）分离，通过 Native 层通信。这种模式保证了安全性（JS 无法直接操作 DOM），但也带来了通信延迟。
Taro（React 语法）和 uni-app（Vue 语法）是两大主流跨端框架，可以一套代码编译到微信/支付宝/百度/字节等多个小程序平台，甚至 H5 和 App。
PWA——让 Web 拥有原生能力
PWA（Progressive Web App） 不是一个新框架，而是一组 Web 标准——通过 Service Worker（离线缓存）、Web App Manifest（安装到桌面）、Push API（推送通知）等技术，让普通网页具备原生 App 的部分能力。
PWA 的优势是零安装、自动更新、可被搜索引擎索引，但受限于各平台对 Web API 的支持程度（iOS Safari 对 PWA 支持较弱）。
方案选型对比
| 维度 | Hybrid (WebView+Bridge) | React Native | Flutter | Electron | Tauri | 小程序 | PWA |
|---|---|---|---|---|---|---|---|
| 目标平台 | iOS + Android | iOS + Android | 全平台 | 桌面 | 桌面+移动 | 超级 App | Web |
| 语言 | JS/TS | JS/TS | Dart | JS/TS | JS/TS + Rust | JS | JS/TS |
| 渲染方式 | WebView | 原生组件 | 自渲染 | WebView | 系统 WebView | WebView | 浏览器 |
| 性能 | 中 | 接近原生 | 接近原生 | 中等 | 中等 | 中等 | 取决于浏览器 |
| 安装体积 | 无额外（复用容器） | 中等 | 中等 | 大（~100MB+） | 小（~5MB） | 无需安装 | 无需安装 |
| 热更新 | ✅极强 | ✅（CodePush） | ⚠️受限 | ✅ | ✅ | ✅ | ✅ |
| 前端上手难度 | 极低 | 低 | 中（需学 Dart） | 极低 | 低 | 低 | 低 |
学习建议
- Hybrid + JSBridge → 跨端开发的根基，面试必考
- PWA → 零成本增强现有 Web 应用
- React Native / Flutter → 根据团队技术栈选择
- Electron / Tauri → 桌面端需求时学习
- 小程序 / Taro → 国内业务场景必备
- 跨端方案对比 → 面试必考的选型问题