Electron 教程
Electron 是什么、它如何把网页变成桌面应用，以及学习路线。
Electron 是什么
Electron builds desktop apps with web technology. It bundles Chromium (rendering) with Node.js (files, processes, system APIs), so one project both draws a UI and reads local files, shows native notifications, or starts at login.
它由什么组成
| Part | Role |
|---|---|
| Chromium | 渲染 HTML/CSS，执行页面 JS |
| Node.js | 文件、网络、进程、npm 生态 |
| Native APIs | 窗口、菜单、托盘、剪贴板、通知 |
| Packager | 把项目打成 exe / dmg / AppImage |
谁在用它
VS Code, Slack, Discord, Figma desktop, Obsidian and Notion are all Electron apps. What they share: complex UI, cross-platform needs, and a team already fluent in web tech.
最小应用长什么样
my-app/
├── package.json
├── main.js ← 主进程：创建窗口、管生命周期
└── index.html ← 渲染进程：界面// main.js
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({ width: 900, height: 600 });
win.loadFile('index.html');
}
app.whenReady().then(createWindow);{
"name": "my-app",
"version": "1.0.0",
"main": "main.js",
"scripts": { "start": "electron ." }
}The main field points at the main process entry. electron . runs main.js first, which creates the window and loads the page — the page itself has no idea it is inside Electron.
学习路线
- 架构 —— 主进程、渲染进程、IPC 的分工
- 窗口 —— 创建、尺寸、无边框、多窗口
- 系统能力 —— 文件、菜单、托盘、通知、剪贴板
- 安全 ——
contextIsolation、预加载脚本、CSP - 工程化 —— 打包、签名、自动更新、发布
Electron 是什么
Electron 是一个用 Web 技术写桌面应用的框架。它把 Chromium（渲染界面）和 Node.js（访问文件、进程、系统 API）一起打包，所以同一个项目既能在页面上画界面，又能读写本地文件、调系统通知、开机自启。
它由什么组成
| 组成 | 作用 |
|---|---|
| Chromium | 渲染 HTML/CSS，执行页面 JS |
| Node.js | 文件、网络、进程、npm 生态 |
| 原生接口 | 窗口、菜单、托盘、剪贴板、通知 |
| 打包器 | 把项目打成 exe / dmg / AppImage |
谁在用它
VS Code、Slack、Discord、Figma 桌面版、Obsidian、Notion 都是 Electron 应用。它们的共同点是：界面复杂、需要跨平台、团队本来就熟悉 Web 技术。
最小应用长什么样
my-app/
├── package.json
├── main.js ← 主进程：创建窗口、管生命周期
└── index.html ← 渲染进程：界面// main.js
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({ width: 900, height: 600 });
win.loadFile('index.html');
}
app.whenReady().then(createWindow);{
"name": "my-app",
"version": "1.0.0",
"main": "main.js",
"scripts": { "start": "electron ." }
}main 字段指向主进程入口。electron . 启动时先跑 main.js，由它创建窗口、加载页面——页面本身不知道自己在 Electron 里。
学习路线
- 架构 —— 主进程、渲染进程、IPC 的分工
- 窗口 —— 创建、尺寸、无边框、多窗口
- 系统能力 —— 文件、菜单、托盘、通知、剪贴板
- 安全 ——
contextIsolation、预加载脚本、CSP - 工程化 —— 打包、签名、自动更新、发布