Posted 2024-10-02Updated 2024-10-02Cross-Platform40 minutes read (About 5941 words)

移动端与桌面端跨平台开发

由浅入深，从基本概念、原理与源码，到示例与实际项目应用，系统梳理移动端与桌面端跨平台技术体系

一、基本概念

1.1 什么是跨平台开发？

跨平台开发指用一套（或高度共享的）代码，同时支持多个操作系统或设备形态（如 iOS、Android、macOS、Windows、Linux、Web），从而降低开发与维护成本、加快迭代速度。

┌─────────────────────────────────────────────────────────────────────────┐
│                        跨平台开发的核心目标                                │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│   一套 / 共享代码  ──►  多端运行  ──►  降低人力、统一体验、快速发布          │
│                                                                          │
│   移动端：iOS + Android（+ 鸿蒙 / 其他）                                   │
│   桌面端：macOS + Windows + Linux                                         │
│   大前端：Web + 移动 + 桌面（部分方案可三端复用）                            │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

1.2 移动端跨平台 vs 桌面端跨平台

维度	移动端跨平台	桌面端跨平台
目标平台	iOS、Android、鸿蒙等	Windows、macOS、Linux
交互特点	触屏、手势、传感器、多分辨率	键鼠、窗口、菜单、多显示器
分发方式	App Store、应用市场、企业内部分发	安装包、商店、便携版、包管理器
性能关注	电量、内存、启动速度、流畅度	内存、CPU、GPU、安装体积
典型方案	Flutter、React Native、Kotlin Multiplatform	Electron、Tauri、Flutter Desktop、Qt

1.3 为什么需要跨平台？

痛点	说明	跨平台带来的价值
多套原生实现	iOS (Swift/ObjC)、Android (Kotlin/Java) 各写一套	一套业务逻辑 + UI，多端复用
人力与节奏	双端/三端并行，需求同步、发版协调成本高	统一技术栈，一次开发多端发布
体验一致性	各端实现细节不同，交互与视觉易分裂	可控的 UI 与交互一致性（尤其自绘方案）
桌面端同样分裂	Win/Mac/Linux 三套原生或 Web 各搞一套	一套代码覆盖主流桌面系统

二、跨平台的核心原理

2.1 三种主流渲染思路

跨平台方案按「谁来画 UI」可分为三类：

┌────────────────────────────────────────────────────────────────────────────┐
│  方式              │  谁负责渲染？        │  代表技术                         │
├────────────────────────────────────────────────────────────────────────────┤
│  原生控件映射       │  使用系统原生控件    │  React Native、Xamarin、Compose   │
│  (Native Mapping)  │  通过桥接更新属性    │  Multiplatform                    │
├────────────────────────────────────────────────────────────────────────────┤
│  Web 容器          │  内嵌 WebView/浏览器 │  Cordova、Capacitor、Electron     │
│  (WebView/Chromium)│  用 HTML/CSS/JS 画  │  (Electron 用 Chromium 做桌面壳)   │
├────────────────────────────────────────────────────────────────────────────┤
│  自绘 (Skia/Impeller)│  自己画像素/矢量   │  Flutter、Qt、.NET MAUI 部分       │
│  (Self-draw)       │  不依赖系统控件      │                                    │
└────────────────────────────────────────────────────────────────────────────┘

原生控件映射：体验最接近系统原生，但受限于各端控件能力与差异，需要处理平台差异。
Web 容器：开发效率高、生态成熟，桌面端 Electron 安装体积与内存占用较大。
自绘：UI 一致性强、不依赖系统控件，可精细控制渲染；需要自己实现可访问性、输入法等。

2.2 架构共性：桥接与运行时

无论哪种方式，跨平台层都要和「宿主平台」通信：

┌─────────────────────────────────────────────────────────────────────────┐
│  跨平台层（业务 + UI 描述）                                               │
│  ┌─────────────────────────────────────────────────────────────────┐   │
│  │  Dart / JavaScript / C# / Kotlin 等                              │   │
│  │  组件树 / 虚拟 DOM / 声明式 UI                                    │   │
│  └────────────────────────────┬────────────────────────────────────┘   │
│                               │ 桥接层 (Bridge / Channel / FFI)         │
├───────────────────────────────┼─────────────────────────────────────────┤
│  宿主 / 原生层                 ▼                                         │
│  ┌─────────────────────────────────────────────────────────────────┐   │
│  │  Native (Swift/Kotlin/C++/Rust) + 系统 API + 原生控件/自绘引擎     │   │
│  └─────────────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────────────┘

移动端：通常通过 Bridge / Channel（如 React Native 的 Bridge、Flutter 的 Platform Channel）做异步通信。
桌面端：Electron 是 主进程 + 渲染进程 的 IPC；Tauri 是 Web 前端 + Rust 核心 的 IPC/FFI，体积更小。

2.3 技术选型简表

方案	类型	移动端	桌面端	语言/技术	特点摘要
Flutter	自绘	✅ iOS/Android/鸿蒙	✅ Win/Mac/Linux	Dart + Skia/Impeller	一致性强、性能好、桌面逐渐成熟
React Native	原生映射	✅ iOS/Android	❌ 需另选桌面方案	JS/TS + 原生桥	生态大、热更新友好
Electron	Web 容器	❌	✅ Win/Mac/Linux	HTML/CSS/JS + Node + Chromium	桌面占主导、包体大
Tauri	Web + 原生壳	实验性	✅ Win/Mac/Linux	前端任意 + Rust	轻量、安全、系统集成好
Kotlin Multiplatform	原生映射/共享逻辑	✅ 主打	可共享逻辑	Kotlin	逻辑共享、UI 仍多端各自实现
Capacitor / Cordova	WebView	✅	可做桌面壳	Web 技术	用 Web 开发，打包成 App

三、代表性框架原理与源码要点

3.1 Flutter：自绘引擎与 Dart 层

3.1.1 整体架构

Flutter 的 UI 不依赖系统控件，由 Skia（或 Impeller on iOS）在画布上自绘，因此各端视觉与行为高度一致。

┌──────────────────────────────────────────────────────────────────┐
│  Dart 层                                                            │
│  Widget 树 → Element 树 → RenderObject 树（布局与绘制）              │
└────────────────────────────┬─────────────────────────────────────┘
                             │ Dart VM / AOT 编译
┌────────────────────────────▼─────────────────────────────────────┐
│  Flutter Engine (C++)                                              │
│  Layer 树 → Scene → Skia/Impeller 绘制 → 显示                      │
└────────────────────────────┬─────────────────────────────────────┘
                             │ 平台嵌入层 (Embedder)
┌────────────────────────────▼─────────────────────────────────────┐
│  Android (SurfaceView) / iOS (Metal) / Windows (ANGLE) / ...       │
└──────────────────────────────────────────────────────────────────┘

3.1.2 关键源码位置（概念性）

Widget → Element → RenderObject：flutter/lib/src/widgets/framework.dart、rendering/object.dart。
Element 持有 RenderObject，RenderObject 负责 layout、paint，最终生成 Layer 提交给引擎。
绘制入口：RenderView 的 compositeFrame() 将 Layer 树提交给 Window.render()，引擎再交给 Skia/Impeller。
平台通道：PlatformChannel 在 flutter/lib/src/services/platform_channel.dart，Dart 与原生通过 BinaryMessenger 收发序列化消息。

理解「Widget 不可变 → Element 挂载/更新 → RenderObject 布局绘制」这条链路，就抓住了 Flutter UI 的核心。

3.2 React Native：桥接与原生组件

3.2.1 新架构（Fabric + TurboModules）与旧桥

旧架构：JS 与原生通过 Bridge 异步传 JSON，原生侧用 UIManager 把「虚拟节点」转成原生 View。
新架构：
- Fabric：C++ 的渲染器，Shadow 树在 C++ 中，减少跨桥次数，支持同步布局与优先级。
- TurboModules：按需加载的 JSI 原生模块，可同步调用，不再全部在启动时塞进 Bridge。

┌─────────────┐     JSI (JavaScript Interface)      ┌─────────────────┐
│  JavaScript │  ◄──── 同步/异步调用 ─────────────►  │  C++ Fabric /   │
│  React 组件  │         (新架构)                     │  TurboModules   │
└─────────────┘                                      └────────┬────────┘
                                                              │
┌─────────────┐     Bridge (旧) / 序列化消息           ┌───────▼───────┐
│  Metro 打包  │  ◄──────────────────────────────►    │  Native Views │
│  JS Bundle  │                                      │  (Android/iOS)│
└─────────────┘                                      └───────────────┘

3.2.2 源码可读入口（概念性）

React 组件到原生：新架构下 ReactFabric、FabricUIManager 等（C++），旧架构下 UIManagerModule（Java/ObjC）把「节点树」转成原生 View。
通信：NativeModules、NativeEventEmitter 对应到原生模块与事件发送，新架构下通过 JSI 直接调 C++ 再调原生。

3.3 Electron：多进程与 IPC

3.3.1 主进程 + 渲染进程

Electron 基于 Chromium，每个窗口是一个渲染进程，主进程负责生命周期、系统 API、原生菜单等。

┌─────────────────────────────────────────────────────────────────────────┐
│  Main Process (Node.js)                                                   │
│  BrowserWindow、app、Menu、系统 API、原生模块 (.node)                       │
└────────────────────────────┬────────────────────────────────────────────┘
                             │  IPC (ipcMain / ipcRenderer)
│  contextBridge.exposeInMainWorld 安全暴露 API
└────────────────────────────┬────────────────────────────────────────────┘
┌────────────────────────────▼─────────────────────────────────────────────┐
│  Renderer Process (Chromium)                                               │
│  HTML / CSS / JS，类似前端 SPA；可禁用 Node 仅用 preload 暴露能力            │
└─────────────────────────────────────────────────────────────────────────┘

3.3.2 安全与 contextBridge

不要在渲染进程直接开 nodeIntegration: true 并把整个 Node 暴露给页面。
推荐：用 contextBridge.exposeInMainWorld 在 preload 里暴露有限 API，主进程通过 ipcMain 处理，渲染进程只调这些 API。

源码层面：lib/renderer/api/context-bridge.ts、lib/main/api/ipc-main.ts 等，理解「preload 注入 → contextBridge → ipcRenderer.invoke」这条链路即可。

3.4 Tauri：Rust 核心 + 前端

3.4.1 轻量从何而来

Tauri 不内嵌完整 Chromium，而是用 系统 WebView（Windows: WebView2，macOS: WKWebView，Linux: WebKitGTK），所以安装包小、内存占用低。

┌─────────────────────────────────────────────────────────────────────────┐
│  Frontend (任意: React / Vue / Svelte / 纯 HTML)                          │
│  运行在系统 WebView 中                                                    │
└────────────────────────────┬────────────────────────────────────────────┘
                             │  Tauri API (invoke / event)
┌────────────────────────────▼─────────────────────────────────────────────┐
│  Tauri Core (Rust)                                                        │
│  窗口、菜单、系统托盘、文件与 shell、插件；可调用任意 Rust 与系统 API        │
└─────────────────────────────────────────────────────────────────────────┘

3.4.2 命令与安全

前端通过 invoke('command_name', { ... }) 调用 Rust 端在 #[tauri::command] 里定义的函数。
权限与能力在 tauri.conf.json 的 capabilities 中声明，避免前端随意调敏感 API。
源码可看 tauri/src/manager.rs、tauri/src/app.rs 以及命令派发与 IPC 的实现。

四、示例代码

4.1 Flutter：一个跨移动端 + 桌面的页面

// 同一套代码可跑在 iOS、Android、Windows、macOS、Linux
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cross-Platform Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter 跨平台')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('点击次数: $_counter', style: Theme.of(context).textTheme.headlineMedium),
            const SizedBox(height: 24),
            FilledButton.icon(
              onPressed: () => setState(() => _counter++),
              icon: const Icon(Icons.add),
              label: const Text('增加'),
            ),
          ],
        ),
      ),
    );
  }
}

移动端：flutter run 选 iOS/Android 设备即可。
桌面端：flutter run -d windows / macos / linux（需先 flutter config --enable-*desktop）。

4.2 React Native：一个带原生能力的组件

// 跨 iOS + Android，调用原生模块示例
import { NativeModules, Platform, StyleSheet, Text, View, Button } from 'react-native';

const { MyNativeModule } = NativeModules; // 需在原生侧实现 MyNativeModule

export default function App() {
  const [result, setResult] = React.useState('');

  const callNative = async () => {
    try {
      const value = await MyNativeModule?.getDeviceId?.() ?? '未实现';
      setResult(value);
    } catch (e) {
      setResult(String(e));
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.text}>平台: {Platform.OS}</Text>
      <Button title="调用原生 getDeviceId" onPress={callNative} />
      <Text style={styles.result}>{result}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 },
  text: { fontSize: 16, marginBottom: 12 },
  result: { marginTop: 12, color: '#333' },
});

4.3 Electron：主进程与渲染进程通信

// preload.js（运行在隔离上下文中，通过 contextBridge 暴露）
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  getAppVersion: () => ipcRenderer.invoke('get-app-version'),
  openFolder: (path) => ipcRenderer.invoke('dialog:openFolder', path),
});

// main.js（主进程）
const { app, BrowserWindow, ipcMain, dialog } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false,
      contextIsolation: true,
    },
  });
  win.loadFile('index.html');
}

app.whenReady().then(() => {
  ipcMain.handle('get-app-version', () => app.getVersion());
  ipcMain.handle('dialog:openFolder', (_, dir) =>
    dialog.showOpenDialog({ properties: ['openDirectory'] })
  );
  createWindow();
});

<!-- 渲染进程 (index.html 里的脚本) -->
<button id="version">获取版本</button>
<div id="out"></div>
<script>
  document.getElementById('version').onclick = async () => {
    const v = await window.electronAPI.getAppVersion();
    document.getElementById('out').textContent = 'Version: ' + v;
  };
</script>

4.4 Tauri：前端调用 Rust 命令

// src-tauri/src/main.rs
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! (from Rust)", name)
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

// 前端 (如 React)
import { invoke } from '@tauri-apps/api/core';

function App() {
  const [msg, setMsg] = useState('');

  const sayHello = async () => {
    const result = await invoke('greet', { name: 'Tauri' });
    setMsg(result);
  };

  return (
    <div>
      <button onClick={sayHello}>Say Hello</button>
      <p>{msg}</p>
    </div>
  );
}

五、实际项目中的应用案例

5.1 移动端跨平台

产品/项目	方案	说明
阿里巴巴闲鱼	Flutter	部分核心页面用 Flutter，与原生混编，统一商品与互动体验。
腾讯微信	多端自研 + 部分 RN	核心为原生，部分业务用自研或 RN 类方案做动态化与跨端。
字节抖音 / 飞书	Flutter / 自研	部分模块 Flutter，桌面端 Electron（如飞书）。
美团	React Native	部分 App 内页用 RN，热更新与双端复用。
Reflectly	Flutter	日记/习惯类 App，全 Flutter，iOS/Android 一套 UI。
BMW 车载	Flutter	车载中控 UI 使用 Flutter 做多车型统一界面。

5.2 桌面端跨平台

产品/项目	方案	说明
VS Code	Electron	编辑器 UI + 扩展用 Web 技术，主进程 Node，跨 Win/Mac/Linux。
Slack / Discord	Electron	桌面客户端统一用 Web 栈，一套代码多端。
Figma Desktop	Electron	设计工具桌面版，与 Web 共享核心逻辑与渲染。
1Password 8	Electron	密码管理桌面端，跨平台一致体验。
Clash Verge / 部分工具	Tauri	需要小体积、低内存的桌面工具，用 Tauri 替代 Electron。
Appflowy	Flutter	桌面端用 Flutter，与移动端共享部分 UI 与逻辑。

5.3 移动 + 桌面统一

产品/项目	移动端	桌面端	说明
Flutter 官方	Flutter (iOS/Android)	Flutter (Win/Mac/Linux)	同一套 Dart 代码，多端运行，适合重 UI 一致性的产品。
飞书	原生 + 混合	Electron	移动端以原生为主，桌面端 Electron，部分逻辑与 UI 复用。
Notion	原生 / WebView	Electron	桌面 Electron，移动端混合，内容与逻辑复用。

5.4 选型时可参考的维度

团队技能：前端强可选 RN/Electron/Tauri；能接受 Dart 可选 Flutter 全平台。
体验要求：要极致接近系统原生 → 原生映射（RN）或原生开发；要强一致性、可控渲染 → Flutter/自绘。
桌面包体与内存：对体积和内存敏感 → Tauri 或 Flutter Desktop；优先生态与成熟度 → Electron。
热更新与合规：移动端需热更新且符合商店政策时，需评估各方案的热更与审核风险。
已有资产：已有 Web 或 React 技术栈，可优先 RN/Electron/Capacitor；已有 Rust/系统开发，可考虑 Tauri。

六、小结

概念：跨平台开发用一套（或共享）代码覆盖多端，降低成本、统一体验；移动端与桌面端在平台特性、交互、分发上不同，但「桥接 + 运行时」的架构思想相通。
原理：三种主要思路——原生控件映射、Web 容器、自绘；理解各方案的渲染模型与桥接方式，有助于选型和排坑。
源码：Flutter 的 Widget/Element/RenderObject 与引擎、RN 的 Fabric/TurboModules、Electron 的 IPC 与 contextBridge、Tauri 的 Rust 命令与系统 WebView，是深入时的好入口。
示例：同一套 Flutter 可跑移动+桌面；RN 通过 NativeModules 调原生；Electron 用 preload + contextBridge + ipcMain；Tauri 用 invoke 调 Rust 命令。
实战：大量商业产品已在移动端（Flutter/RN）和桌面端（Electron/Tauri/Flutter）落地，选型时结合团队、体验、体积、热更新与既有技术栈综合权衡。

掌握「概念 → 原理 → 源码入口 → 示例 → 案例」这条线，就能在移动端与桌面端跨平台开发中建立清晰的技术图景，并做出更合适的架构与选型决策。

移动端与桌面端跨平台开发

https://bitgarden.cn/2024/10/02/Cross-Platform/移动端与桌面端跨平台开发/

Author

Felix Tao

Posted on

2024-10-02

Updated on

2024-10-02

Licensed under

移动端与桌面端跨平台开发

一、基本概念

1.1 什么是跨平台开发？

1.2 移动端跨平台 vs 桌面端跨平台

1.3 为什么需要跨平台？

二、跨平台的核心原理

2.1 三种主流渲染思路

2.2 架构共性：桥接与运行时

2.3 技术选型简表

三、代表性框架原理与源码要点

3.1 Flutter：自绘引擎与 Dart 层

3.1.1 整体架构

3.1.2 关键源码位置（概念性）

3.2 React Native：桥接与原生组件

3.2.1 新架构（Fabric + TurboModules）与旧桥

3.2.2 源码可读入口（概念性）

3.3 Electron：多进程与 IPC

3.3.1 主进程 + 渲染进程

3.3.2 安全与 contextBridge

3.4 Tauri：Rust 核心 + 前端

3.4.1 轻量从何而来

3.4.2 命令与安全

四、示例代码

4.1 Flutter：一个跨移动端 + 桌面的页面

4.2 React Native：一个带原生能力的组件

4.3 Electron：主进程与渲染进程通信

4.4 Tauri：前端调用 Rust 命令

五、实际项目中的应用案例

5.1 移动端跨平台

5.2 桌面端跨平台

5.3 移动 + 桌面 统一

5.4 选型时可参考的维度

六、小结

Author

Posted on

Updated on

Licensed under

Links

Categories

Recents

Archives

Tags

Subscribe for updates

follow.it

5.3 移动 + 桌面统一