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

一、Electron 的本质

Electron 本质上是：

txt 复制代码

Chromium 浏览器 + Node.js

因此：

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

Electron 实际上是：

txt 复制代码

使用桌面窗口运行网页

二、Electron 的核心结构

当前项目结构：

txt 复制代码

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

对应关系如下：

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

三、主进程（main.js）

txt 复制代码

src/main.js

是 Electron 主进程入口文件。

主要负责：

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

四、BrowserWindow

Electron 使用：

js 复制代码

BrowserWindow

创建桌面窗口。

基本代码

js 复制代码

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

创建窗口：

js 复制代码

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

五、常用窗口参数

1. width

窗口宽度：

js 复制代码

width: 1400

2. height

窗口高度：

js 复制代码

height: 900

3. minWidth

窗口最小宽度：

js 复制代码

minWidth: 1000

4. minHeight

窗口最小高度：

js 复制代码

minHeight: 700

5. backgroundColor

窗口背景颜色：

js 复制代码

backgroundColor: '#0f172a'

6. frame

是否显示系统边框：

js 复制代码

frame: false

设置后：

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

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

例如：

VSCode
Discord
QQ
微信

六、窗口配置示例

js 复制代码

const mainWindow = new BrowserWindow({

    width: 1400,
    height: 900,

    minWidth: 1000,
    minHeight: 700,

    backgroundColor: '#0f172a'

})

七、Electron 的两部分结构

Electron 运行时包含两部分：

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

主进程

对应：

txt 复制代码

main.js

负责：

Electron API
系统功能
创建窗口

渲染进程

对应：

txt 复制代码

index.html
renderer.js
index.css

负责：

页面 UI
HTML
CSS
页面逻辑

八、热更新机制

渲染进程支持热更新

修改以下文件：

txt 复制代码

renderer.js
index.html
index.css

页面会自动刷新。

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

修改：

txt 复制代码

main.js

中的窗口参数后：

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

九、重启主进程

运行：

bash 复制代码

npm start

后，终端会提示：

txt 复制代码

Type rs in terminal to restart main process.

输入：

txt 复制代码

rs

回车即可重启主进程。

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

因为：

txt 复制代码

main.js

属于：

txt 复制代码

Node.js 后台进程

而：

txt 复制代码

Vite 热更新

主要针对：

txt 复制代码

网页页面

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

十一、Electron 运行流程

Electron 程序运行流程：

txt 复制代码

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

其中：

txt 复制代码

preload.js

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

十二、本课重点

本课核心内容：

1. Electron 本质

txt 复制代码

桌面窗口 + 网页

2. BrowserWindow

用于创建 Electron 桌面窗口。

3. Electron 分为两部分

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

4. 热更新机制

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