桌面应用程序的格局已被一个简单的洞察所改变:如果你能用驱动互联网的相同 Web 技术来构建原生质量的桌面应用程序呢?Electron 将这个愿景变为现实,并在此过程中成为现代桌面软件开发的支柱。
Electron 是一个将 Chromium 的渲染引擎与 Node.js 运行时相结合的开源框架,让开发者能够使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序。最初由 GitHub 为 Atom 编辑器创建,Electron 后来移交给 OpenJS Foundation,并已成为最具影响力的开源项目之一。
数字令人惊叹:Electron 为 Visual Studio Code(每月超过 1 亿用户)、Slack、Discord、Figma、Notion、WhatsApp Desktop、Signal、Microsoft Teams 以及成千上万其他应用程序提供支持。它让无数初创公司能够在维护 Web 产品的同时发布桌面应用程序,而无需维护单独的原生代码库。
Electron 的架构如何工作?
Electron 的架构建立在继承自 Chromium 的多进程模型之上,有两种主要进程类型协同工作。
graph TD
A[主进程\nNode.js 运行时] --> B[BrowserWindow 1\nChromium 渲染进程]
A --> C[BrowserWindow 2\nChromium 渲染进程]
A --> D[BrowserWindow N\nChromium 渲染进程]
B --> E[IPC: ipcMain / ipcRenderer]
C --> E
D --> E
E --> F[主进程处理器\n文件系统、原生 API]
A --> G[系统托盘]
A --> H[原生菜单]
A --> I[Dock / 任务栏]
主进程以完整的 Node.js 环境运行,管理应用程序生命周期、原生菜单、系统托盘和 IPC(进程间通信)。每个渲染进程是一个独立的 Chromium 实例,显示 HTML/CSS/JavaScript 用户界面。这种分离提供了性能隔离和安全边界。
哪些应用程序使用 Electron 构建?
Electron 的采用范围涵盖整个软件行业,从开发者工具到通信平台再到创意套件。
| 应用程序 | 类别 | 用户 / 影响 |
|---|---|---|
| Visual Studio Code | 代码编辑器 | 每月超过 1 亿活跃用户 |
| Slack | 团队通信 | 每日超过 1000 万活跃用户 |
| Discord | 语音/文字聊天 | 每月超过 1.5 亿活跃用户 |
| Figma Desktop | 设计 | 超过 400 万用户(混合 Web + 桌面) |
| Signal Desktop | 加密消息 | 每月超过 4000 万活跃用户 |
| Notion Desktop | 生产力 | 超过 3000 万用户 |
如此多样化用例的广泛采用,证明了 Electron 从轻量级聊天应用程序到高性能代码编辑器的多功能性。
Electron 有哪些关键 API 和功能?
Electron 提供了一套全面的 API,弥合了 Web 应用程序和原生桌面功能之间的差距。
| API 类别 | 示例 | 说明 |
|---|---|---|
| 窗口管理 | BrowserWindow、无边框窗口 | 原生窗口控制、透明窗口、毛玻璃效果 |
| 操作系统集成 | Tray、Notification、Menu、Shell | 系统托盘图标、原生通知、上下文菜单 |
| 文件系统 | dialog.showOpenDialog、net.request | 原生文件对话框、HTTP 请求、协议处理器 |
| 硬件 | desktopCapturer、screen | 屏幕录制、显示信息、媒体访问 |
| 系统 | app、process、clipboard | 应用程序生命周期、剪贴板访问、环境检测 |
这些 API 可通过 Electron 的 IPC 系统访问,该系统使用 ipcMain 和 ipcRenderer 在主进程和渲染进程之间提供安全、结构化的通信。
Electron 的安全最佳实践是什么?
Electron 应用程序的安全性遵循纵深防御方法,认识到渲染进程是潜在不可信的环境。
| 实践 | 实现方式 |
|---|---|
| 上下文隔离 | 在 BrowserWindow 选项中设置 contextIsolation: true |
| Node 集成 | 在渲染进程中设置 nodeIntegration: false(自 v5 起的默认值) |
| 内容安全策略 | 限制脚本来源的 HTTP 头 |
| IPC 验证 | 始终在主进程上验证 IPC 消息负载 |
| 沙箱 | 为不受信任的内容启用渲染进程沙箱 sandbox: true |
遵循这些实践可确保即使渲染进程遭到入侵(例如通过恶意的第三方脚本),攻击者也无法直接访问 Node.js API 或操作系统。
常见问题
什么是 Electron? Electron 是由 OpenJS Foundation 开发的开源框架,用于使用 Web 技术构建跨平台桌面应用程序。它结合了 Chromium 的渲染引擎与 Node.js 运行时。
有哪些主要应用程序使用 Electron 构建? Electron 为 Visual Studio Code、Slack、Discord、Postman、Figma、Notion、WhatsApp Desktop、Signal、GitHub Desktop、Microsoft Teams 等提供支持。
Electron 与其他跨平台框架有何不同? 与原生框架或其他跨平台解决方案不同,Electron 使用 Web 技术,每个窗口使用一个完整的 Chromium 浏览器实例。
Electron 的安全模型是什么? Electron 使用多进程架构,最佳实践包括启用上下文隔离、禁用渲染进程中的 Node.js 集成等。
Electron 应用程序可以访问原生 API 吗? 是的,Electron 提供系统托盘、通知、文件系统访问、Shell 集成、剪贴板访问等 API。
延伸阅读
- Electron GitHub 仓库 – 源代码、问题和发布版本
- Electron 官方文档 – API 参考、指南和教程
- Electron 安全指南 – 官方安全最佳实践和检查清单
- Awesome Electron – 精选的 Electron 资源、工具和应用程序列表
無程式碼也能輕鬆打造專業LINE官方帳號!一鍵導入模板,讓AI助你行銷加分!