Electron 是什么
🎯 引言
Electron 可以让我们使用 HTML、CSS 和 JavaScript 开发 Windows、macOS 与 Linux 桌面应用。它把 Chromium 和 Node.js 一起放进应用中，因此前端页面既能正常渲染，也能在受控的边界内使用系统能力。
学完本篇，你将能够：
- 理解 Electron 适合解决什么问题。
- 说清 Electron 与普通网页的主要区别。
- 创建并运行第一个 Electron 窗口。
- 了解本课程的学习路线。
🧱 Electron 是什么
浏览器中的网页通常受沙箱限制，不能随意读取本地文件、创建系统菜单或控制桌面窗口。Electron 在前端页面之外增加了一个由 Node.js 驱动的主进程，让应用能够调用这些桌面能力。
一个基础 Electron 应用通常包含三部分：
| 部分 | 主要职责 | 常见文件 |
|---|---|---|
| 主进程 | 管理应用生命周期、窗口和系统能力 | main.js |
| 预加载脚本 | 向页面暴露经过限制的能力 | preload.js |
| 渲染进程 | 显示 HTML、CSS 和交互界面 | index.html、renderer.js |
这套结构适合需要桌面能力、同时希望复用前端技术的项目，例如编辑器、内部工具和跨平台客户端。若应用只需要展示在线页面，普通 Web 应用通常更轻量。
🧰 准备开发环境
本课程示例使用以下版本：
- Node.js
24.x LTS - npm
11.x - Electron
44.0.0
Electron 官方建议使用 Node.js 的 LTS 版本进行开发。先检查本机环境：
node -v
npm -v
然后创建项目并安装 Electron：
mkdir electron-course
cd electron-course
npm init -y
npm install --save-dev electron@44.0.0
在 package.json 中指定主进程入口，并添加启动命令：
{
"name": "electron-course",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "44.0.0"
}
}
electron . 会读取当前目录的 package.json，再执行 main 指向的文件。
🛠 创建第一个窗口
新建 main.js。主进程等待 Electron 初始化完成后，通过 BrowserWindow 创建窗口并加载本地页面：
const { app, BrowserWindow } = require('electron');
const path = require('node:path');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
});
win.loadFile(path.join(__dirname, 'index.html'));
}
app.whenReady().then(() => {
createWindow();
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
再创建页面：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<title>Electron Course</title>
</head>
<body>
<h1>你好，Electron！</h1>
<p>这是我的第一个桌面窗口。</p>
</body>
</html>
运行项目：
npm start
你会看到一个真正的桌面窗口。它显示的是 HTML 页面，但窗口本身由 Electron 管理。
window-all-closed 中的系统判断是为了符合常见桌面习惯：Windows 与 Linux 关闭全部窗口后退出应用；macOS 应用通常继续停留在程序坞中。下一篇会继续补全 macOS 的重新激活逻辑。
🧭 课程学习路线
本课程共十六篇，按照“认识结构、开发功能、安全加固、交付维护、综合实战”展开：
- Electron 是什么：认识运行方式，运行第一个窗口。
- 主进程、渲染进程与 preload：建立进程边界。
- Electron 与 Vue 工程集成：尽早把桌面项目接入真实前端工程。
- 创建窗口与应用生命周期：处理窗口创建、恢复、单实例和退出。
- IPC 通信与接口设计：让 Vue 页面安全调用主进程能力。
- 本地文件与系统交互：处理文件、剪贴板、通知和 shell 能力。
- 桌面端安全基础：加固页面、导航和 IPC 边界。
- 菜单、托盘与多窗口：完成常见桌面交互。
- 会话、网络与本地存储：管理登录态和应用配置。
- 自定义协议与资源加载：处理深链接和打包后的资源。
- 耗时任务与性能排查：避免阻塞并定位稳定性问题。
- PDF 打印与报告导出：把页面内容交付为报告文件。
- 应用打包与自动更新：生成应用目录、安装包，并了解更新发布流程。
- 桌面应用签名与公证：准备证书、配置 Forge、验证签名和完成 macOS 公证。
- 测试、监控与发布：验证关键流程并建立发布检查。
- 实战：桌面资料管理工具：串联文件导入、联调、状态反馈和报告保存。
🧾 小节总结
- Electron 使用 Chromium 渲染页面，使用 Node.js 提供桌面能力。
- 主进程管理应用和窗口，渲染进程负责页面界面。
- Electron 更适合需要桌面能力并希望复用前端技术的项目。
BrowserWindow用于创建窗口，loadFile用于加载本地页面。- 项目通过
electron .启动package.json中声明的入口文件。
❓ 知识问答
Q1：用户运行 Electron 应用前需要安装 Node.js 吗？
A：不需要。打包后的应用自带运行所需的 Node.js 和 Chromium，Node.js 只用于本地开发与构建。
Q2：Electron 能直接使用 Vue 吗？
A：可以。Vue 负责渲染进程的页面，Electron 负责桌面窗口和系统能力。课程先用原生 JavaScript 讲清核心结构，之后接入 Vue 时思路不变。
Q3：为什么不直接在 HTML 中使用 Node.js API？
A：页面内容可能受到不可信输入影响，直接开放 Node.js API 会扩大安全风险。常用做法是通过预加载脚本只暴露页面确实需要的能力。
Q4：关闭最后一个窗口为什么在 macOS 上不退出？
A：这是 macOS 应用的常见交互习惯。应用仍在运行，用户点击程序坞图标时可以重新创建窗口。
🧪 小练习
练习一：把窗口宽度改为 960、高度改为 640，并为窗口添加标题：
const win = new BrowserWindow({
// 请在这里编写代码
});
练习二：在 index.html 中添加一个按钮，文字为“开始学习”：
<body>
<h1>你好，Electron！</h1>
<!-- 请在这里编写代码 -->
</body>
🎉 恭喜你已经运行第一个 Electron 桌面应用啦！下一篇我们会拆开它的进程结构，理解每个文件应该负责什么。