BrowserWindow

BrowserWindow 是 Electron 框架中用于创建和管理应用程序窗口的核心模块，它只能在主进程中使用。需要注意的是，在 app 模块的 ready 事件触发之前，该模块无法使用

1. 模块概述

核心角色：每个 BrowserWindow 实例都创建一个由 Chromium 驱动的独立渲染进程，并在一个原生的桌面窗口中显示网页内容。这使得开发者可以使用 Web 技术（HTML, CSS, JavaScript）来构建桌面应用的图形用户界面。
跨平台性：BrowserWindow 封装了不同操作系统（Windows, macOS, Linux）的窗口管理 API，提供了一套统一的接口，确保了应用在各个平台下拥有一致的窗口行为和外观

一个基础的窗口创建示例如下：

javascript

const { BrowserWindow } = require("electron")

const win = new BrowserWindow({ width: 800, height: 600 })
win.loadURL("https://www.electronjs.org")

2. 主要功能特性

窗口创建与控制

BrowserWindow 的构造函数接受一个配置对象，允许你精细地控制窗口的各个方面。

尺寸与位置：
- width / height：设置窗口的初始宽度和高度（单位：像素）。
- x / y：设置窗口在屏幕上的初始位置。
- minWidth / minHeight / maxWidth / maxHeight：限制窗口的最小和最大尺寸。
状态控制：
- minimizable / maximizable / closable：控制窗口是否可以最小化、最大化或关闭。
- fullscreen：窗口是否以全屏模式启动。
- show: false：创建一个初始不可见的窗口，常与 ready-to-show 事件配合使用，以避免加载过程中的白屏。

窗口样式配置

你可以定制窗口的外观，使其更符合你的品牌或应用设计。

标题栏：
- titleBarStyle：在 macOS 上可设为 hidden 或 customButtonsOnHover，以隐藏标题栏或将红绿灯按钮嵌入窗口。
边框与背景：
- frame: false：创建无边框窗口，常用于实现完全自定义的窗口外观。
- transparent: true：创建透明窗口，需要 frame 为 false。这允许你创建非矩形或有透明区域的窗口。
阴影：
- hasShadow：控制窗口是否应有阴影。

javascript

const win = new BrowserWindow({
  width: 400,
  height: 300,
  frame: false,
  transparent: true,
  titleBarStyle: "hidden"
})

优雅地显示窗口

当直接在窗口中加载页面时，用户可能会看到页面逐渐加载的过程，这对于原生应用来说不是一个好的体验。为了使窗口显示时没有视觉闪烁，可以采用以下两种策略：

1. 使用 `ready-to-show` 事件

加载页面时，当渲染器进程第一次完成页面绘制，就会触发 ready-to-show 事件。在此事件后显示窗口可以确保流畅的视觉效果。

javascript

const { BrowserWindow } = require("electron")

const win = new BrowserWindow({ show: false })

win.loadFile("index.html")

win.once("ready-to-show", () => {
  win.show()
})

这个事件通常在 did-finish-load 事件之后触发，但对于包含许多远程资源的大型页面，它可能会更早触发。

注意：使用此事件意味着即使 show 为 false，渲染器也会被视作“可见”并进行绘制。如果设置了 paintWhenInitiallyHidden: false，此事件将永远不会触发。

2. 设置 `backgroundColor` 属性

对于复杂的应用，ready-to-show 事件可能会触发得较晚，让应用感觉响应缓慢。在这种情况下，建议立即显示窗口，并设置一个与应用背景色接近的 backgroundColor。

javascript

const { BrowserWindow } = require("electron")

const win = new BrowserWindow({ backgroundColor: "#2e2c29" })
win.loadURL("https://github.com")

即使用了 ready-to-show 事件，也推荐设置 backgroundColor，这能让应用感觉更原生。

网页内容控制

BrowserWindow 实例通过其 webContents 属性来控制和交互窗口内加载的网页。

加载内容：
- win.loadURL(url)：加载远程 URL（如 https://...）或本地 HTML 文件（使用 file:// 协议）。
- win.loadFile(filePath)：加载本地 HTML 文件的推荐方式，比 loadURL 更简洁。
内容缩放：
- win.webContents.setZoomFactor(factor)：设置页面的缩放比例。
开发者工具：
- win.webContents.openDevTools()：打开 Chromium 开发者工具，用于调试网页内容。
- win.webContents.closeDevTools()：关闭开发者工具。

3. 生命周期管理

BrowserWindow 实例会触发一系列事件，让你可以在窗口生命周期的关键节点执行操作。

ready-to-show：当页面内容加载完成，但窗口尚未显示时触发。这是显示窗口的最佳时机，可以避免视觉上的闪烁。
javascript
```
const win = new BrowserWindow({ show: false })
win.loadFile("index.html")
win.once("ready-to-show", () => {
  win.show()
})
```
close：在窗口即将关闭时触发。你可以通过 event.preventDefault() 来阻止窗口关闭，例如在关闭前提示用户保存未完成的工作。
closed：在窗口已经被关闭后触发。此时你应该解除对窗口对象的引用，以便垃圾回收器回收内存。
javascript
```
let win = new BrowserWindow()
win.on("closed", () => {
  win = null // 解除引用
})
```
destroy()：调用 win.destroy() 会立即销毁窗口，绕过 close 事件。

4. 多窗口管理

Electron 应用可以同时管理多个 BrowserWindow 实例。

父子窗口：通过 parent 选项可以创建一个子窗口。子窗口将始终显示在父窗口的顶部。
模态窗口：通过 modal: true 选项可以创建一个模态窗口。模态窗口会禁用其父窗口，直到该窗口关闭。常用于对话框和偏好设置。
javascript
```
const parent = new BrowserWindow()
const child = new BrowserWindow({ parent: parent, modal: true })
```
窗口间通信：不同窗口的渲染进程是隔离的。它们之间的通信需要通过主进程作为中介，使用 ipcMain 和 ipcRenderer 模块来完成。

5. 安全特性

保护用户数据和应用安全至关重要。BrowserWindow 的 webPreferences 选项提供了强大的安全配置。

沙箱模式：sandbox: true 会在一个受限的 Chromium 沙箱环境中渲染页面，限制其对系统资源的访问。
Node.js 集成：nodeIntegration: false (默认) 和 contextIsolation: true (默认) 是推荐的安全实践。它们可以防止渲染进程中的第三方脚本滥用 Node.js API。当需要从渲染进程安全地调用主进程功能时，应使用 contextBridge 和 preload 脚本。
内容安全策略 (CSP)：可以通过 session 模块配置 CSP，限制页面可以加载的资源来源，有效防止跨站脚本（XSS）攻击。

6. 高级功能

原生菜单：可以为窗口创建和设置自定义的原生应用菜单或上下文菜单。
任务栏进度条：在 Windows 和 macOS 上，可以使用 win.setProgressBar(progress) 在任务栏或 Dock 图标上显示进度条。
窗口截图：win.capturePage() 可以捕获窗口当前内容的截图。
Kiosk 模式：kiosk: true 使应用进入自助服务终端模式，即全屏且无法退出，适用于公共展示等场景。

7. 典型使用场景

主应用窗口：应用启动时创建的主要界面
设置/偏好窗口：通常实现为模态窗口，用于配置应用参数
辅助工具窗口：如浮动的工具面板，可能会使用无边框和透明窗口
通知/弹窗界面：在屏幕角落创建小型的、自动消失的无边框窗口，用于显示通知

BrowserWindow

1. 模块概述

2. 主要功能特性

窗口创建与控制

窗口样式配置

优雅地显示窗口

1. 使用 ready-to-show 事件

2. 设置 backgroundColor 属性

网页内容控制

3. 生命周期管理

4. 多窗口管理

5. 安全特性

6. 高级功能

7. 典型使用场景

1. 使用 `ready-to-show` 事件

2. 设置 `backgroundColor` 属性