一、Electron 的本质

Electron 本质上是：

Chromium 浏览器 + Node.js

因此：

• 页面部分本质是网页
• 系统功能由 Electron 提供
• Node.js 负责后台能力

Electron 实际上是：

使用桌面窗口运行网页

---

二、Electron 的核心结构

当前项目结构：

src/
├── main.js
├── preload.js
└── renderer.js

对应关系如下：

文件	作用
main.js	主进程
preload.js	预加载脚本
renderer.js	渲染进程

---

三、主进程（main.js）

src/main.js

是 Electron 主进程入口文件。

主要负责：

• 创建窗口
• 管理应用生命周期
• 调用系统 API
• 管理窗口
• Electron 后台逻辑

---

四、BrowserWindow

Electron 使用：

BrowserWindow

创建桌面窗口。

---

基本代码

const { app, BrowserWindow } = require('electron')

创建窗口：

const mainWindow = new BrowserWindow({
    width: 800,
    height: 600
})

---

五、常用窗口参数

1. width

窗口宽度：

width: 1400

---

2. height

窗口高度：

height: 900

---

3. minWidth

窗口最小宽度：

minWidth: 1000

---

4. minHeight

窗口最小高度：

minHeight: 700

---

5. backgroundColor

窗口背景颜色：

backgroundColor: '#0f172a'

---

6. frame

是否显示系统边框：

frame: false

设置后：

• 标题栏消失
• 最大化按钮消失
• 最小化按钮消失

很多现代软件会使用无边框窗口。

例如：

• VSCode
• Discord
• QQ
• 微信

---

六、窗口配置示例

const mainWindow = new BrowserWindow({

    width: 1400,
    height: 900,

    minWidth: 1000,
    minHeight: 700,

    backgroundColor: '#0f172a'

})

---

七、Electron 的两部分结构

Electron 运行时包含两部分：

部分	作用
主进程	Node.js 后台
渲染进程	网页页面

---

主进程

对应：

main.js

负责：

• Electron API
• 系统功能
• 创建窗口

---

渲染进程

对应：

index.html
renderer.js
index.css

负责：

• 页面 UI
• HTML
• CSS
• 页面逻辑

---

八、热更新机制

渲染进程支持热更新

修改以下文件：

renderer.js
index.html
index.css

页面会自动刷新。

---

主进程通常不会自动热更新

修改：

main.js

中的窗口参数后：

• 窗口不会自动重建
• 需要重启主进程

---

九、重启主进程

运行：

npm start

后，终端会提示：

Type rs in terminal to restart main process.

输入：

rs

回车即可重启主进程。

---

十、为什么 main.js 不会自动刷新

因为：

main.js

属于：

Node.js 后台进程

而：

Vite 热更新

主要针对：

网页页面

并不会完全替换 Electron 主进程。

---

十一、Electron 运行流程

Electron 程序运行流程：

main.js
    ↓
创建 BrowserWindow
    ↓
加载 index.html
    ↓
执行 renderer.js
    ↓
页面显示

其中：

preload.js

负责主进程与页面之间的通信桥接。

---

十二、本课重点

本课核心内容：

1. Electron 本质

桌面窗口 + 网页

---

2. BrowserWindow

用于创建 Electron 桌面窗口。

---

3. Electron 分为两部分

类型	内容
主进程	main.js
渲染进程	页面

---

4. 热更新机制

文件	是否自动刷新
renderer.js	是
index.html	是
index.css	是
main.js	否，需要 rs