Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架。它将 Chromium 浏览器内核和 Node.js 运行时打包在一起，允许开发者利用熟悉的 Web 技术创建原生桌面应用程序，例如 VS Code、Slack 和 Figma。
Electron 的核心结构：主进程 + 渲染进程
Electron 应用基于两个关键进程：
- 主进程（main process）：运行在 Node.js 环境中，负责创建和管理应用窗口、处理生命周期事件、以及访问系统级 API（如文件系统、托盘图标和系统通知）。每个 Electron 应用只有一个主进程，通常入口文件为
main.js。 - 渲染进程（renderer process）：每个窗口对应一个渲染进程，本质上是运行在 Chromium 中的网页，使用 HTML、CSS 和 JavaScript 构建用户界面。多个渲染进程之间相互隔离。
主进程和渲染进程通过 ipcMain 和 ipcRenderer 模块进行进程间通信（IPC），不能直接共享变量或调用函数。这种设计提高了安全性，并防止单个进程崩溃影响整个应用。
快速起步：三步跑起一个桌面窗口
对于初学者，使用官方脚手架工具可以快速启动一个 Electron 项目：
- 安装
create-electron-app：运行命令npx create-electron-app@latest my-app - 进入项目目录：
cd my-app，然后启动应用：npm start，即可看到一个默认窗口。 - 根据需要修改
src/index.html来设计界面，或调整src/main.js以控制窗口行为（如设置尺寸、是否可缩放、是否显示菜单栏）。
默认生成的窗口是一个最小可用的示例，后续可以添加菜单栏、托盘图标、自动更新等功能。
常见需求怎么实现？
Electron 封装了许多常见的桌面应用功能，使得实现以下需求变得简单：
- 打开本地文件：在主进程中使用
dialog.showOpenDialog()打开文件对话框，然后通过 IPC 将文件路径传递给渲染进程进行读取。 - 打包成安装包：使用工具如
electron-packager或更流行的electron-builder，通过一条命令即可生成 macOS 的 .app 文件、Windows 的 .exe 文件或 Linux 的 .AppImage 文件。 - 调用系统能力：例如，使用
clipboard.writeText()操作剪贴板，new Notification()显示系统通知，或Tray类创建托盘图标。这些操作通常在主进程中执行。
注意：出于安全考虑，渲染进程默认禁用 Node.js 集成。如果需要在页面 JavaScript 中使用 fs 等 Node.js 模块，可以在创建窗口时设置 webPreferences 中的 nodeIntegration: true。但更推荐的做法是通过 IPC 让主进程代理这些操作，这样更可控且安全。
要注意的坑
尽管 Electron 功能强大，但在使用时需要注意一些约束：
- 体积偏大：由于内置了 Chromium 和 Node.js 运行时，即使最小化打包，应用体积也通常在 100MB 以上。
- 内存占用较高：每个窗口都是一个完整的浏览器实例，开启多个窗口时内存消耗较大，可能导致性能下降。
- 安全性敏感：如果应用加载远程内容，务必禁用
nodeIntegration并启用contextIsolation，以避免跨站脚本（XSS）攻击利用漏洞执行本地代码。 - 自动更新需要额外集成：Electron 本身不提供自动更新机制，需要集成
electron-updater或自行实现服务器端更新逻辑。
总之，Electron 并不复杂，但细节容易忽略。它特别适合已有 Web 开发经验、希望快速构建跨平台桌面应用的开发者或团队。