【Electron】第2章—BrowserWindow 与 Electron 窗口机制

一、Electron 的本质

Electron 本质上是：

Chromium 浏览器 + Node.js

因此：

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

Electron 实际上是：

使用桌面窗口运行网页

二、Electron 的核心结构

当前项目结构：

src/
├── 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 运行时包含两部分：

主进程

对应：

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 分为两部分

4. 热更新机制