Electron 因技术栈复用和跨平台优势被广泛采用,其架构包含主进程与渲染进程,通过 ipc 通信,适合熟悉 Web 技术的开发者快速构建桌面应用。

Electron 是目前最流行的跨平台桌面应用开发框架之一,它允许开发者使用前端技术(HTML、CSS、JavaScript)构建可在 Windows、macOS 和 Linux 上运行的桌面程序。像 Visual Studio Code、Slack、Figma 桌面版等知名应用都是基于 Electron 开发的。
为什么选择 Electron?
Electron 的核心优势在于技术栈复用和跨平台兼容性。如果你已经熟悉 Web 开发,几乎不需要学习新语言就能上手桌面应用开发。
- 使用 Node.js 提供的系统级 API,可以访问文件系统、创建窗口、调用系统通知等。
- 内置 Chromium 渲染引擎,确保 UI 在不同平台上表现一致。
- 社区活跃,插件丰富,有大量开源项目可供参考。
基本架构:主进程与渲染进程
Electron 应用由两个主要部分组成:
- 主进程:负责管理应用生命周期、创建窗口、处理系统事件。每个应用只有一个主进程。
- 渲染进程:每个窗口对应一个渲染进程,用来展示网页内容(类似浏览器标签页),可运行 React、Vue 等前端框架。
两个进程之间通过 ipcMain 和 ipcRenderer 模块进行通信,实现数据传递和功能调用。
快速开始一个项目
初始化项目并安装 Electron:
npm init -y npm install electron --save-dev
在 package.json 中添加启动脚本:
"scripts": {
"start": "electron main.js"
}
创建 main.js 作为主进程入口:
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({ width: 800, height: 600 })
win.loadFile('index.html') // 加载本地 HTML 页面
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
常见问题与优化建议
虽然 Electron 功能强大,但也存在一些需要注意的地方:
- 应用体积较大:每个应用都打包了 Chromium 和 Node.js,最小安装包通常在 50MB 以上。可通过压缩资源、使用 asar 打包来减小体积。
- 内存占用偏高:多窗口或复杂页面可能消耗较多内存,注意及时销毁无用窗口和监听器。
- 安全性问题:避免在渲染进程中启用 nodeIntegration,防止 XSS 攻击导致系统命令执行。
- 更新机制:可集成 autoUpdater 实现自动更新,但需自行搭建发布服务器或使用第三方服务。
基本上就这些。Electron 降低了桌面开发门槛,特别适合需要快速交付跨平台产品的团队。只要合理规划架构、控制资源使用,就能做出稳定高效的桌面应用。










