基于Web的跨平台桌面应用开发详解

1. 跨平台开发概述

跨平台开发是指编程语言、软件或硬件设备可以在多种操作系统或不同硬件架构的电脑上运作。主要场景包括：

• 跨设备平台（如PC端和移动端）
• 跨操作系统（移动端：Android/iOS；PC端：Windows/macOS/Linux）
• 国内小程序平台（微信、京东、百度、支付宝、字节跳动等）

跨平台优势：

• 一次开发，多端复用
• 降低研发成本
• 快速验证和上线产品

2. 主流跨平台桌面开发方案

2.1 NW.js

基本信息：

• 官网：https://nwjs.io/
• GitHub：https://github.com/nwjs/nw.js
• 技术栈：Node.js + 前端任意框架
• 代表项目：微信小程序IDE、京东小程序IDE

特点：

• 基于Chromium和Node.js的Web运行环境
• 可直接在DOM中调用Node.js模块
• 使用任何Web技术编写本地应用

2.2 Electron

基本信息：

• 官网：https://www.electronjs.org/
• GitHub：https://github.com/electron/electron
• 技术栈：Node.js + 前端任意框架
• 代表项目：VSCode、百度小程序IDE、京ME、Facebook Message

特点：

• 前身是Atom-Shell
• 本质是Chromium + Node.js的组合，通过IPC通讯
• 与NW.js的主要区别：
  • 应用入口不同（Electron是JavaScript，NW.js是HTML）
  • Node集成方式不同
  • 功能数量和社区活跃度差异

2.3 Tauri

基本信息：

• 官网：https://tauri.app/
• GitHub：https://github.com/tauri-apps/tauri
• 技术栈：Rust + 前端任意框架
• 代表项目：目前仅有少量开源应用

特点：

• 2021年JavaScript明星项目中最受欢迎项目第5名
• stateofjs 2021中满意度和关注度排名第1
• 优势：
  • 构建产物小
  • 内存占用低
  • Rust背景（高性能、安全）
• Rust前景：
  • Linux内核接纳Rust
  • Deno采用Rust
  • 微软拥抱Rust
  • Fuchsia的Rust代码占比超50%
  • Apple在底层all-in Rust
  • 连续6年StackOverflow最受欢迎语言

2.4 Wails

基本信息：

• 官网：https://wails.io/
• GitHub：https://github.com/wailsapp/wails
• 技术栈：Go + 前端任意框架
• 代表项目：暂无

特点：

• Go的快且轻量的Electron替代品
• 结合Go的灵活性和强大功能与现代前端技术
• Windows上使用Webview2

2.5 Flutter for Desktop

基本信息：

• 官网：https://flutter.dev/multi-platform/desktop
• GitHub：https://github.com/flutter/flutter
• 技术栈：Dart
• 代表项目：暂无

特点：

• 使用Skia自绘，性能优于Electron
• 需要考虑稳定性和生态

3. 跨平台架构原理

3.1 Chromium多进程架构

大多数现代Web浏览器采用多进程架构，主要包括：

• 浏览器主进程
• 渲染进程
• 插件进程
• 网络进程
• GPU进程

关键组件：

• IPC（Inter-Process Communication）：进程间通信
• RenderProcessHost（主进程）和RenderProcess（渲染进程）：处理IPC事件
• RenderView：页面展示，基于Webkit排版
• ResourceDispatcher：处理资源请求

3.2 Electron架构

核心特点：

• 在每个进程中暴露Native API（Main Native API，Renderer Native API）
• 引入Node.js
• 使用Web技术实现UI

3.3 Electron进程模型

继承自Chromium的多进程架构，包含：

• 主进程：
  • 应用程序窗口管理
  • 应用程序生命周期
  • 原生API
• 渲染进程：
  • UI展示
  • 可使用任意前端框架（Vue、React、Svelte、Preact等）

3.4 Tauri进程模型

类似Electron的多进程架构：

• 主进程管理一个或多个WebView进程
• 单个主进程控制多个WebView进程

3.5 进程间通信

Electron IPC通信方式：

1. 渲染器进程 -> 主进程（单向）：
   • ipcRenderer.send发送消息
   • ipcMain.on接收消息
2. 双向通信：
   • ipcRenderer.invoke与ipcMain.handle搭配使用

4. 实战案例：导航启动工具

4.1 功能描述

• 快捷键Ctrl/Command + K唤起应用界面
• 输入关键词（如"git"）展示相关系统名称列表
• 选择后回车打开对应链接（如github.com）

4.2 设计思路

1. 无边框窗口设计
2. 窗口高度自适应内容
3. 全局快捷键注册
4. 按键监听与链接打开

4.3 项目实现

4.3.1 无边框窗口实现

Electron：

// 主进程配置
mainWindow = new BrowserWindow({
  frame: false
})

Tauri：

// tauri.conf.json
{
  "windows": [
    {
      "decorations": false
    }
  ]
}

4.3.2 窗口高度自适应

Electron：

// 渲染进程
const height = document.body.offsetHeight;
ipcRenderer.send('resize-window', height);

// 主进程
ipcMain.on('resize-window', (event, height) => {
  mainWindow.setSize(width, height);
});

Tauri：

import { appWindow } from '@tauri-apps/api/window';

const height = document.body.offsetHeight;
appWindow.setSize(new LogicalSize(width, height));

4.3.3 全局快捷键注册

Electron：

// 主进程
const { globalShortcut } = require('electron');

function registerGlobalShortcut() {
  globalShortcut.register('CommandOrControl+K', () => {
    mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
  });
}

app.whenReady().then(() => {
  registerGlobalShortcut();
});

Tauri：

// 渲染进程
import { globalShortcut } from '@tauri-apps/api';

useEffect(() => {
  globalShortcut.register('CommandOrControl+K', () => {
    appWindow.isVisible().then(visible => {
      visible ? appWindow.hide() : appWindow.show();
    });
  });
}, []);

4.3.4 按键监听与链接打开

通用实现：

document.body.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    // 打开链接
    shell.openExternal(selectedItem.url);
  }
});

4.4 应用打包

Electron：

• 常用工具：electron-builder
• 配置示例：

{
  "build": {
    "appId": "com.example.app",
    "win": {
      "target": "nsis"
    },
    "mac": {
      "target": "dmg"
    },
    "linux": {
      "target": "AppImage"
    }
  }
}

Tauri：

• 内置CLI打包工具
• 命令：yarn tauri build

4.5 性能对比

5. 总结与选型建议

技术方案对比

1. NW.js：

   • 时代已过，新项目不建议使用
   • 现有NW.js项目可考虑迁移到Electron

2. Electron：

   • 当前最主流选择
   • 优势：
     • 庞大社区
     • 丰富功能和工程实践
   • 缺点：
     • 性能开销较大
     • 打包体积大

3. Tauri：

   • 新兴技术，前景看好
   • 优势：
     • 小体积
     • 低内存占用
     • Rust高性能
   • 缺点：
     • 生态尚不成熟
     • Rust学习曲线陡峭

4. Wails：

   • Go语言的轻量级方案
   • 适合Go技术栈团队

5. Flutter for Desktop：

   • 自绘引擎，性能优秀
   • 适合已有Flutter经验的团队

选型建议

• 成熟项目：继续使用Electron
• 新项目：
  • 如果团队有Rust经验或愿意学习：优先考虑Tauri
  • 如果需要成熟方案：选择Electron
  • 如果追求极致性能：考虑Flutter for Desktop
  • 如果是Go技术栈团队：尝试Wails

未来趋势

• Rust在前端工具链中的地位日益重要
• 轻量级方案（如Tauri）可能逐步替代Electron
• WebAssembly与原生语言的结合将更加紧密