BrowserWindow模块是用于创建和管理图形用户界面的窗口。它提供了一种在桌面应用程序中创建原生窗口的方式，类似于浏览器中的窗口。
const { app, BrowserWindow } = require('electron')
app.on('ready', () => {
// 创建一个 宽800高600的窗口
const win = new BrowserWindow({ width: 800, height: 600 })
})常见配置项
width：窗口的宽度（以像素为单位）。height：窗口的高度（以像素为单位）。x：窗口的左上角 x 坐标。y：窗口的左上角 y 坐标。center：布尔值，指定是否将窗口居中显示。minWidth：窗口的最小宽度。minHeight：窗口的最小高度。maxWidth：窗口的最大宽度。maxHeight：窗口的最大高度。resizable：布尔值，指定是否允许用户调整窗口大小。movable：布尔值，指定是否允许用户移动窗口。closable：布尔值，指定是否显示关闭按钮。alwaysOnTop：布尔值，指定窗口是否始终显示在其他窗口之上。fullscreen：布尔值，指定窗口是否全屏显示。fullscreenable：布尔值，指定窗口是否可以进入全屏模式。title：窗口的标题。backgroundColor：窗口的背景颜色。frame：布尔值，指定是否显示窗口的边框和标题栏。show：布尔值，指定创建窗口后是否立即显示。webPreferences：对象，用于配置网页的相关选项，例如启用 Node.js 集成、使用上下文隔离等。
这只是一些常见的配置项，还有其他可用的选项可以根据您的需求进行配置。您可以查阅 Electron 的官方文档以获取更详细的配置项列表和说明：https://www.electronjs.org/zh/docs/latest/api/browser-window#new-browserwindowoptions
const win = new BrowserWindow({
width: 800,
height: 600,
backgroundColor: 'skyblue',
resizable:false,
fullscreenable:false
})常见实例事件
绑定事件我们可以使用 on()方法或者once()方法。once()方法用来注册一次性事件。
closed: 当窗口关闭时触发此事件。close: 在关闭窗口之前触发此事件。可以在此事件的处理程序中执行清理操作或阻止窗口关闭。show: 当窗口被显示时触发此事件。hide: 当窗口被隐藏时触发此事件。minimize: 当窗口被最小化时触发此事件。maximize: 当窗口被最大化时触发此事件。restore: 当窗口从最大化或最小化状态恢复时触发此事件。resize: 当窗口大小发生改变时触发此事件。move: 当窗口位置发生改变时触发此事件。focus: 当窗口获取焦点时触发此事件。blur: 当窗口失去焦点时触发此事件。enter-full-screen: 当窗口进入全屏模式时触发此事件。leave-full-screen: 当窗口退出全屏模式时触发此事件。
const { app, BrowserWindow } = require('electron')
app.on('ready', () => {
// 创建一个窗口
const win = new BrowserWindow({ width: 800, height: 600 })
win.on('close', () => {
console.log('窗口马上要关闭了');
})
win.on('closed', () => {
console.log('窗口关闭了');
})
win.on('show', () => {
console.log('窗口显示了');
})
win.on('hide', () => {
console.log('窗口隐藏了');
})
win.on('minimize', () => {
console.log('窗口最小化了');
})
win.on('maximize', () => {
console.log('窗口最大化了');
})
win.on('restore', () => {
console.log('窗口从最大化或最小化变回去了了');
})
win.on('resize', () => {
console.log('窗口尺寸改变了');
})
win.on('move', () => {
console.log('窗口位置改变了');
})
win.on('focus', () => {
console.log('窗口获得焦点了');
})
win.on('blur', () => {
console.log('窗口失去焦点了');
})
win.on('enter-full-screen', () => {
console.log('窗口进入全屏了');
})
win.on('leave-full-screen', () => {
console.log('窗口退出全屏了');
})
})这只是一些常见的生命周期事件示例，还有其他事件可以根据需要使用。您可以根据 Electron 的文档详细了解每个事件的用法和触发时机。
ready-to-show 事件
当您创建一个新的 BrowserWindow 对象并加载内容后，窗口需要一些时间来完成渲染和准备显示。一旦窗口准备好显示，ready-to-show 事件将被触发，表示窗口已经可以显示给用户了。
我们创建一个窗口，主要是为了在它里面渲染页面，比如我们的代码可能是这样的：
const { app, BrowserWindow } = require('electron')
app.on('ready', () => {
// 创建一个窗口
const win = new BrowserWindow({ width: 800, height: 600 })
// 加载页面文件
win.loadFile('index.html')
})上面的代码，我们创建一个窗口，然后在窗口里面渲染index.html 的内容。但是，这样写代码会有一个问题：我们创建完窗口，就会立即显示出来，加载index.html 紧随其后，但是这中间会有个时间间隔，会出现一瞬间的白屏现象，我了解决这个问题，我们可以在创建窗口的时候，不让窗口显示，当窗口准备好在进行窗口显示。我们的代码可以这样修改：
const { app, BrowserWindow } = require('electron')
app.on('ready', () => {
const win = new BrowserWindow({
width: 800,
height: 600,
// 创建完不显示
show: false
})
win.loadFile('index.html')
// 注册一个一次性事件
win.once('ready-to-show', () => {
// 显示窗口
win.show()
})
})常见实例方法
loadFile(filePath[, options])用于加载本地文件到窗口中。loadURL(url)加载指定的 URL 到窗口中。可以是本地文件路径或远程 URL。webContents返回窗口的WebContents对象，它提供了对窗口中加载的网页内容的控制和交互。close()关闭窗口。destroy()销毁窗口及其关联的资源。focus()将焦点设置到窗口。show()显示窗口。hide()隐藏窗口。maximize()最大化窗口。minimize()最小化窗口。restore()还原窗口大小，如果窗口当前是最大化或最小化状态。isMaximized()返回一个布尔值，表示窗口是否处于最大化状态。isMinimized()返回一个布尔值，表示窗口是否处于最小化状态。isFullScreen()返回一个布尔值，表示窗口是否处于全屏模式。setFullScreen(flag)将窗口设置为全屏模式。flag为true表示全屏，为false表示退出全屏。setResizable(flag)设置窗口是否可调整。flag是一个布尔值。setPosition(x, y)设置窗口的位置，x和y是窗口的坐标。getParentWindow()返回当前窗口的父窗口，如果存在的话。getChildWindows()返回当前窗口的所有子窗口的数组isModal()返回一个布尔值，表示窗口是否是模态窗口。
BrowserWindow 模块的常见的实例方法有好几十个，这里只是列出几个，更多的可以查看文档。
参考文档：https://www.electronjs.org/zh/docs/latest/api/browser-window
