Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的开源框架。它的核心思路非常简单：把 Chromium 浏览器和 Node.js 运行时打包在一起，让前端技术能够直接访问操作系统的原生能力。
可以将 Electron 理解为“用网页技术写桌面软件”的工具。它既保留了 Web 开发的便捷与生态，又打破了浏览器沙箱的限制，使同一个应用能够无差别地在 Windows、macOS 和 Linux 上运行。
1.1.1 框架的组成
Electron 主要由两大组件拼接而成：
- Chromium（渲染引擎）
负责界面展示。你写的 HTML、CSS、JavaScript 会运行在一个独立的渲染进程中，体验和浏览器几乎完全一致。Chromium 保证了对现代 Web 标准、硬件加速、视频解码等能力的完美支持。
- Node.js（后端运行时）
嵌在主进程和渲染进程中，提供了文件系统、网络、进程管理、操作系统原生功能等整套 API。这意味着你可以在用户点击按钮时直接读写本地文件、调用系统对话框、创建子进程，甚至访问硬件信息。
在架构上，Electron 将应用程序分为两类进程：
- 主进程（Main Process）
每个应用只有一个主进程，负责创建窗口、管理应用生命周期以及调用系统原生 API。主进程运行在 Node.js 环境中，能够使用所有 Node.js 模块和 Electron 的原生模块（如 app、BrowserWindow、dialog 等）。
- 渲染进程（Renderer Process）
每个窗口对应一个独立的渲染进程，运行网页内容。渲染进程默认是一个“强化版”的浏览器环境：既能使用前端框架（Vue/React/Angular），也可以根据配置直接访问 Node.js 和 Electron 的 API（出于安全考虑，现代 Electron 应用通常会限制这一权限，并通过预加载脚本暴露安全的接口）。
1.1.2 跨平台如何实现
Electron 的跨平台能力来自于一种务实的策略：它为每个操作系统提供了一套预编译的二进制文件（Chromium + Node.js 的定制版本），然后在这些底层能力之上抽象出一套统一的 JavaScript API。开发者在编写代码时，只需要调用 BrowserWindow 创建窗口、使用 app.getPath 获取系统目录，底层由 Electron 负责在 Windows、macOS、Linux 上分别实现。
同时，Electron 本身也支持平台特有的功能和样式调整。例如，你可以通过 process.platform 判断当前系统，为 macOS 添加原生菜单栏，为 Windows 调整任务栏缩略图，或让应用在 Linux 托盘区显示。打包阶段，配合 electron-builder 等工具就能生成对应平台的安装包（.exe、.dmg、.deb 等）。
1.1.3 与传统桌面开发的区别
| 对比维度 | 传统桌面开发（C++/C#） | Electron |
|--------|----------------------|----------|
| 开发效率 | 较高门槛，UI 和逻辑通常用不同技术栈 | 统一用 Web 技术，团队复用性极高 |
| 界面灵活性 | 控件库固定，自定义复杂 | 完全使用 CSS 控制，可实现任意界面 |
| 生态资源 | 各平台库分裂 | 直接使用 npm 百万级模块与前端框架 |
| 体积与性能 | 原生体积小，性能最优 | 每个应用内嵌 Chromium，包体较大（约 100MB+），运行时占用内存较高 |
| 原生能力 | 直接调用所有系统 API | 通过 Node.js 或原生模块调用，部分深度功能需编写 C++ 插件 |
简单说，Electron 适合那些追求开发速度、跨平台一致性和丰富交互界面的应用。它可能不是计算密集型或对体积极度敏感的场景的最佳选择，但对于常见的企业软件、工具类应用（如 VS Code、Figma、Slack、Postman）而言，这套方案已经足够成熟可靠。
1.1.4 真实的用法示意
一个最小化的 Electron 应用通常包含两个文件：
// main.js（主进程）
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'), // 安全的桥接方式
},
});
win.loadFile('index.html');
}
app.whenReady().then(createWindow);<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<h1>Hello Electron!</h1>
<script src="renderer.js"></script>
</body>
</html>// preload.js（预加载脚本，安全暴露主进程能力）
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('api', {
send: (channel, data) => ipcRenderer.send(channel, data),
receive: (channel, func) => ipcRenderer.on(channel, (event, ...args) => func(...args)),
});这样，一个可以运行的桌面程序就诞生了。它具备系统窗口、菜单、托盘等完整的桌面能力，而所有界面和交互逻辑都可以用前端技术完成。
总体而言，Electron 的核心理念就是用 Web 技术重塑桌面应用的开发体验。它让熟悉前端生态的开发者几乎零成本地进入桌面开发领域，同时利用 Chromium 和 Node.js 的强大组合，赋予了应用浏览器级别的表现力和操作系统级别的能力。