17370845950

Electron 是用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架，融合 Chromium 与 Node.js；其核心分主进程（管理窗口、系统 API）和渲染进程（网页界面），通过 IPC 通信；支持快速脚手架启动、文件对话框、打包、系统能力调用等，但存在体积大、内存高、安全敏感等约束。

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/JS 展示界面。每个窗口是一个独立的渲染进程，可以有多个，彼此隔离。

两者通过 ipcMain 和 ipcRenderer 模块通信，不能直接共享变量或调用函数——这是安全设计，也避免崩溃扩散。

快速起步：三步跑起一个桌面窗口

不需要从零配置，用官方脚手架最省事：

• 安装 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 集成（出于安全），如需在页面 JS 中用 fs 等模块，得在 webPreferences 中开启 nodeIntegration: true，但更推荐用 IPC 调用主进程代理，更可控也更安全。

要注意的坑

Electron 强大但不是万能的，几个现实约束得提前知道：

• 体积偏大：最小打包后约 100MB+，因为自带 Chromium 和 Node 运行时
• 内存占用较高：每个窗口都是完整浏览器实例，开多了容易卡
• 安全性敏感：加载远程内容要禁用 nodeIntegration，启用 contextIsolation，否则容易被 XSS 利用执行本地代码
• 自动更新需要额外集成：Electron 本身不提供，得靠 electron-updater 或自己对接服务器

基本上就这些。它不复杂但容易忽略细节，适合已有 Web 开发经验、想快速落地桌面功能的团队或个人。