桌面应用

第一阶段：技术选型（二选一）

在开始学习前，你需要根据项目需求选择一个方向：

1. Electron (行业标准)：
   • 原理：Chromium 浏览器 + Node.js。
   • 代表作：VS Code, Discord, Slack, WhatsApp。
   • 优点：生态极其成熟，完全使用 Web 技术，Node.js 能力强大。
   • 缺点：安装包大（100MB+），内存占用高。
2. Tauri (高性能趋势)：
   • 原理：使用系统原生 WebView + Rust 后端。
   • 代表作：很多轻量级开源工具。
   • 优点：安装包极小（几MB），内存占用极低，安全性高。
   • 缺点：需要了解一点 Rust 基础，生态相对较新。

建议： 先从 Electron 入门（因为你熟悉 Node.js），如果对性能和包体积有极致要求，再学 Tauri。

---

第二阶段：Electron 核心学习路线 (预计 2-4 周)

1. 核心架构理解 (最重要)

• 主进程 (Main Process)：运行 Node.js，负责原生窗口管理、系统 API 调用。
• 渲染进程 (Renderer Process)：运行网页，负责 UI 展示。
• IPC 通信 (Inter-Process Communication)：理解主进程和渲染进程如何通过 ipcMain 和 ipcRenderer 发送消息。

2. 基础 API 调用

• 窗口控制：BrowserWindow 的创建、隐藏、最大化、无边框窗口。
• 原生菜单与托盘：Menu, Tray（系统右下角图标）。
• 系统对话框：dialog（打开文件、保存文件、警告弹窗）。
• 全局快捷键：globalShortcut。

3. 进阶功能

• 本地文件系统操作：结合 Node.js 的 fs 模块读写本地文件。
• 自动更新：使用 electron-updater 实现 App 自动升级。
• 多窗口管理：如何在不同窗口间共享状态。

4. 打包与分发

• 工具：electron-builder 或 electron-forge。
• 知识点：图标配置、代码签名（Code Signing）、针对 Windows/macOS/Linux 的不同打包策略。

---

第三阶段：推荐学习资料 (国内直连)

1. 官方文档 (权威必看)

• Electron 官网 (中文)：www.electronjs.org/zh/docs/latest/
• Tauri 官网 (中文)：tauri.app/zh-cn/

2. 视频教程 (Bilibili)

• Electron 零基础入门：搜索“代码布道师”或“技术胖”的 Electron 教程，讲解非常通俗易懂。
• Electron + Vue3/React 实战：搜索“Electron 实战项目”，学习如何将现代前端框架集成到桌面应用中。

3. 优质开源模板 (直接上手)

• Electron-Vite：目前最推荐的脚手架，配置好了 Vite + Electron 的开发环境。
  • electron-vite.org
• Electron-React-Boilerplate：如果你坚持使用 React。

---

第四阶段：给前端开发者的进阶建议

1. 重视进程安全：
   • 不要在渲染进程中直接开启 nodeIntegration。
   • 学会使用 Preload 脚本 (预加载脚本) 和 contextBridge 来安全地暴露 API。
2. 系统差异处理：
   • Windows 有任务栏，macOS 有顶栏菜单。
   • 路径处理要使用 Node.js 的 path.join()，不要手动写 / 或 \。
3. 性能优化：
   • 桌面应用不是网页，用户对卡顿更敏感。避免在主进程中执行耗时操作，否则会卡死 UI。
4. 结合你的 CI/CD 背景：
   • 尝试使用 GitHub Actions 自动化打包 Electron 应用。每当你推送代码，自动生成 Windows .exe 和 macOS .dmg 文件。

---

快速起步尝试：

如果你已经安装了 Node.js，可以立即运行以下命令体验一个最简单的 Electron 示例：

bash

 

Copy Code

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start