Electron 创建和管理窗口（2025 年 12 月最新）
在 Electron 中，窗口由 BrowserWindow 类负责创建和管理。每个 BrowserWindow 实例都会创建一个独立的渲染进程，加载网页内容（本地 HTML 或远程 URL）。窗口管理全部在主进程中进行。
当前 Electron 最新稳定版本：39.2.7（基于 Chromium 142.x）。
1. 基本创建窗口
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 800, // 宽度
height: 600, // 高度
minWidth: 400, // 最小宽度（可选）
minHeight: 300, // 最小高度（可选）
show: false, // 初始隐藏，直到 ready-to-show
webPreferences: {
preload: `${__dirname}/preload.js`, // 预加载脚本（推荐）
contextIsolation: true, // 安全隔离（默认 true）
nodeIntegration: false // 禁用 Node.js（默认 false）
}
});
win.loadFile('index.html'); // 加载本地文件
// 或 win.loadURL('https://example.com'); // 加载远程 URL
// 推荐：内容加载完成后显示窗口，避免白屏
win.once('ready-to-show', () => {
win.show();
});
// 打开 DevTools（开发时）
// win.webContents.openDevTools();
}
app.whenReady().then(createWindow);运行效果示例：
2. 常见窗口选项（BrowserWindowConstructorOptions）
- 外观相关：
frame: false→ 无边框窗口（自定义标题栏常见）titleBarStyle: 'hidden'（macOS）或'hiddenInset'→ 隐藏标题栏但保留交通灯按钮。transparent: true→ 透明窗口（配合 frame: false 使用）。backgroundColor: '#000000'→ 背景色。- 行为相关：
parent: parentWin→ 设置父窗口（模态或子窗口）。modal: true→ 模态窗口（阻塞父窗口）。resizable: false→ 不可调整大小。alwaysOnTop: true→ 置顶窗口。- 安全相关：始终保持
contextIsolation: true和nodeIntegration: false。
3. 管理多个窗口
Electron 支持同时打开多个窗口，常用于“关于”页面、设置面板等。
let mainWindow = null;
let aboutWindow = null;
function createMainWindow() {
mainWindow = new BrowserWindow({ /* 主窗口选项 */ });
mainWindow.loadFile('main.html');
mainWindow.on('closed', () => {
mainWindow = null; // 释放引用，避免内存泄漏
});
}
function createAboutWindow() {
aboutWindow = new BrowserWindow({
width: 400,
height: 300,
parent: mainWindow, // 指定父窗口
modal: true, // 模态（可选）
resizable: false
});
aboutWindow.loadFile('about.html');
aboutWindow.show();
}
// 示例：在主窗口菜单或按钮触发
// ipcMain.on('open-about', createAboutWindow);多窗口应用示例：
4. 窗口生命周期管理
- 关闭窗口：
win.close()（触发 ‘close’ 事件，可阻止）。 - 监听事件：
win.on('close', (e) => {
if (!app.isQuitting) {
e.preventDefault(); // 阻止默认关闭
win.hide(); // 改为隐藏（常见于托盘应用）
}
});- 应用退出：
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit(); // macOS 特殊处理
});
app.on('before-quit', () => {
app.isQuitting = true;
});5. 其他实用方法
win.webContents：访问渲染进程内容（如打印、截屏、执行 JS）。win.setMenu(null)：移除菜单栏。win.maximize()/win.minimize()/win.restore()：控制窗口状态。- 从渲染进程打开新窗口：使用
window.open()，主进程可通过webContents.setWindowOpenHandler()拦截控制。
官方文档参考：https://www.electronjs.org/docs/latest/api/browser-window
掌握这些，你就能灵活创建单窗口、多窗口、模态、无边框等各种桌面应用了！如果需要具体示例（如无边框拖拽、模态对话框），告诉我～
