electron 模块BrowserWindow
模块BrowserWindow
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 模块的常见的实例方法有好几十个，这里只是列出几个，更多的可以查看文档。
webContents 属性
当我们在 Electron 中创建一个窗口时，窗口中的网页内容由 WebContents 对象表示。每个 BrowserWindow 实例都关联一个 WebContents 实例，它充当了与窗口中加载的网页进行交互的接口。它的文档地址：https://www.electronjs.org/zh/docs/latest/api/web-contents
WebContents 提供了一系列方法和事件，使您能够对窗口中的网页进行广泛的控制和操作，它的角色和功能比较类似于我们在浏览器中的 BOM 对象，用于控制窗口中加载的网页内容和与之进行交互。但它并不完全等同于 BOM 对象。
用大白话来说就是：BrowserWindow 实例操作的是窗口，WebContents操作的是窗口内渲染的网页内容。
const win = new BrowserWindow({
width: 800,
height: 600,
})
console.log(win.webContents);常见事件
did-finish-load当窗口中的网页加载完成时触发。dom-ready当窗口中的网页文档完成解析并可供操作时触发。did-fail-load当窗口中的网页加载失败时触发。did-start-loading当窗口开始加载网页时触发。did-stop-loading当窗口停止加载网页时触发。page-title-updated当窗口中的网页标题发生变化时触发。did-navigate当窗口中的网页导航到新的 URL 时触发。did-navigate-in-page当窗口中的网页发生内部导航（锚点跳转等）时触发。did-frame-finish-load当一个子框架加载完成时触发。did-start-navigation当窗口开始导航到新的 URL 时触发。did-stop-navigation当窗口停止导航时触发。will-navigate当窗口即将导航到新的 URL 时触发。
const win = new BrowserWindow({
width: 800,
height: 600,
})
win.loadFile('index.html')
win.webContents.on('dom-ready', () => {
console.log('DOM解析完毕');
})
win.webContents.on('did-finish-load', () => {
console.log('网页加载完毕');
})以上仅列出部分事件，更多的可以参考其官方文档。
常见方法
loadURL(url[, options])加载指定的 URL 到窗口中，可以是本地文件路径或远程 URL。reload()重新加载窗口中的网页。goBack()在网页浏览历史记录中后退一个页面。goForward()在网页浏览历史记录中前进一个页面。stop()停止窗口中正在加载的网页。executeJavaScript(code[, userGesture])在窗口中执行给定的 JavaScript 代码。insertCSS(css)将指定的 CSS 代码注入到窗口中加载的网页中。openDevTools([options])打开开发者工具，用于调试和检查窗口中的网页内容。closeDevTools()关闭开发者工具。getTitle()获取窗口中当前加载的网页的标题。getURL()获取窗口当前加载的网页的 URL。isLoading()检查窗口中是否正在加载网页。isDestroyed()检查WebContents对象是否已被销毁。clearHistory()清除窗口中网页的导航历史记录。
其它更多方法，请参看文档。
const win = new BrowserWindow({
width: 800,
height: 600,
})
win.loadFile('index.html')
win.webContents.loadFile('html/test.html')参考文档：https://www.electronjs.org/zh/docs/latest/api/browser-window