1. Electron 简介与定位

本节目标

弄清 Electron 是什么，以及它如何用网页技术封装桌面应用。
理解 Chromium 加 Node.js 的技术栈，以及跨平台运行的原理。
识别 Electron 适合的适用场景与不适合的场景。
把 Electron 与 NW.js、Tauri、Flutter、原生方案做横向对比。
知道有哪些知名桌面应用基于 Electron 构建。

你大概用过 VS Code、Discord 或者飞书。它们看起来是原生桌面软件，其实背后都跑着同一个框架：Electron。本章先把 Electron 是什么说清楚，再讲它适合做什么、不适合做什么，最后把它和几个常见方案摆在一起比一比。

1-1 一句话理解 Electron

Electron 是一个用网页技术写桌面程序的框架。你用 HTML 写界面、用 CSS 排版、用 JavaScript 写逻辑，最后打包成 Windows、macOS、Linux 三个平台都能跑的安装包。

它把 Chromium 和 Node.js 打包进同一个二进制文件里。Chromium 负责渲染网页，Node.js 负责调用系统能力。于是前端工程师不需要学 C++，也能做出带托盘、菜单、对话框的桌面应用。

1-2 技术栈：Chromium 加 Node.js

Electron 的内核由两部分组成。第一部分是 Chromium，也就是 Google Chrome 背后的开源渲染引擎。它负责把 HTML、CSS、JavaScript 画成你看到的窗口内容。

第二部分是 Node.js。它让程序能读写文件、发起网络请求、调用操作系统接口。普通网页因为安全限制做不到这些，而 Electron 借助 Node.js 把能力补齐了。

// 在主进程里，Node.js 能力随手可用
const fs = require('node:fs')
const path = require('node:path')

const data = fs.readFileSync(path.join(__dirname, 'config.json'), 'utf-8')
console.log('配置文件内容：', data)

提示：Electron v43.2.0 内嵌的是 Chromium 150.0.7871.129 与 Node.js 运行时。你本地装的系统 Node.js 只用于跑脚手架工具，最终用户并不需要自己装 Node。

1-3 跨平台到底意味着什么

写一次代码，三个平台都能用，这是 Electron 最大的卖点。但”跨平台”要分两层看。

界面层基本通用。窗口、按钮、布局都来自网页标准，三端表现一致。系统能力层则需要各平台单独处理，比如托盘图标在 Windows 和 macOS 的样式就不一样。

// 主进程：同一段菜单逻辑，macOS 需要单独处理应用菜单
const { Menu } = require('electron/main')

const template = [
  { label: '文件', submenu: [{ role: 'quit' }] }
]

if (process.platform === 'darwin') {
  // macOS 把菜单挂在屏幕顶部，其他平台挂在窗口内
  Menu.setApplicationMenu(Menu.buildFromTemplate(template))
}

好消息是，这些差异 Electron 大都封装好了。你需要关心的平台分支，通常只占很小一部分。

1-4 适用场景：什么时候该选它

Electron 适合这几类活儿：

把现有 Web 应用搬上桌面，比如内部管理系统、聊天工具。
界面复杂的工具类软件，比如编辑器、设计器、数据看板。
团队以前端为主，不想为桌面端另养一支原生开发队伍。

它特别适合”界面复杂、系统交互不深”的应用。界面越像网页，Electron 的优势越明显。

1-5 不适合的场景

Electron 也有短板，主要是体积和内存。一个最小安装包往往也有几十 MB，因为要把 Chromium 打进去。多个窗口同时开，内存占用会比原生程序高。

所以对体积极度敏感、或者需要深度调用显卡和底层硬件的程序，原生方案更合适。另外纯后台服务、命令行工具也不需要 Electron。

1-6 和几个方案横向对比

市面上有不少桌面方案，定位和取舍各不相同。下面这张表帮你快速建立坐标系。

方案	技术栈	体积	学习成本	适合人群
Electron	Chromium + Node.js	大	低（前端即可）	Web 工程师
NW.js	Chromium + Node.js	大	低	Web 工程师
Tauri	系统 WebView + Rust	小	中（需 Rust）	愿学 Rust 的团队
Flutter	Dart 自绘引擎	中	中	跨端统一 UI 团队
原生开发	C++/Objective-C/C#	小	高	专业桌面团队

NW.js 和 Electron 同源，都打包了 Chromium 与 Node.js。区别在于进程模型：NW.js 里网页和 Node 在同一个上下文，历史上默认开放 Node 给渲染进程；Electron 则把主进程与渲染进程严格分开，安全边界更清晰。

Tauri 走另一条路，它复用系统自带的 WebView，不打包浏览器内核，所以安装包很小。代价是你要写 Rust 来处理系统能力，前端能力也受限于系统 WebView 版本。

Flutter 用 Dart 直接画界面，不依赖浏览器，跨移动端与桌面端一套代码。但它不是网页技术栈，前端工程师需要重新学习。

1-7 谁在用 Electron

Electron 不是小众玩具。VS Code、Discord、Slack、飞书、WhatsApp 桌面端、Figma 桌面端、GitHub Desktop 都用它。这些产品的体量和用户量，足以证明它在工业级场景下的可靠性。

这也意味着你踩到的坑，大概率别人已经踩过并有了答案。社区文档、示例、第三方库都相当成熟。

1-8 版本节奏与跟进建议

Electron 每 8 周发布一个大版本，跟着 Chromium 每隔一个的偶数版本走。官方只维护最近三个稳定大版本，更老的分支连安全补丁都不再发。

所以”不追新”是有代价的：一旦你用的版本掉出这三个之外，就得自己扛安全风险。合理节奏是每隔一两个大版本升一次，升级前先读发布说明里的破坏性变更清单。

本教程基线锁定在 v43.2.0（2026-07-21 发布，内嵌 Chromium 150）。写代码时以这个版本的行为为准，遇到版本专属 API 再去官方文档按版本查。

1-9 常见误区

“Electron 应用都很卡”是流传最广的一句。早期确实有不少应用优化粗糙，但卡顿多半来自业务实现，而非框架本身，合理的懒加载和内存管理能显著改善。

“体积大就没法用”也站不住脚。几十 MB 对桌面软件并非不可接受，很多原生软件也不小。若体积真的敏感，可以评估 Tauri 这类轻量方案，但不必一开始就放弃 Electron 的生产力优势。

1-10 生态与社区资源

学 Electron 不必孤军奋战。官方文档（electronjs.org/docs）是最权威的参考，覆盖了从入门到每个 API 的细节。文档站顶部能切换版本，写代码时记得对准 v43。

社区里也有大量开源示例。electron-quick-start 是最精简的骨架，electron-api-demos 则把每个 API 都做成了可点开的演示，非常适合边看边抄。遇到报错，优先去 GitHub 的 issue 和 Stack Overflow 搜，多半已有现成答案。

中文资料方面，注意部分老教程基于 Electron 5、8 甚至更早版本，写法可能早已废弃。遇到冲突以官方最新文档为准，本教程也统一以 v43.2.0 为基线。

1-11 本章小结

Electron 用网页技术封装出桌面应用，核心是 Chromium 加 Node.js。它跨平台、上手快，适合界面丰富的中重型工具，但体积和内存偏大。

选型时把它和 NW.js、Tauri、Flutter、原生方案对比，按团队背景和体积要求做决定即可。下一章我们动手把环境准备好。