electron 模块BrowserWindow

模块BrowserWindow

BrowserWindow模块是用于创建和管理图形用户界面的窗口。它提供了一种在桌面应用程序中创建原生窗口的方式，类似于浏览器中的窗口。

const { app, BrowserWindow } = require('electron')
app.on('ready', () => {
    // 创建一个 宽800高600的窗口
    const win = new BrowserWindow({ width: 800, height: 600 })
})

常见配置项

1. width：窗口的宽度（以像素为单位）。
2. height：窗口的高度（以像素为单位）。
3. x：窗口的左上角 x 坐标。
4. y：窗口的左上角 y 坐标。
5. center：布尔值，指定是否将窗口居中显示。
6. minWidth：窗口的最小宽度。
7. minHeight：窗口的最小高度。
8. maxWidth：窗口的最大宽度。
9. maxHeight：窗口的最大高度。
10. resizable：布尔值，指定是否允许用户调整窗口大小。
11. movable：布尔值，指定是否允许用户移动窗口。
12. closable：布尔值，指定是否显示关闭按钮。
13. alwaysOnTop：布尔值，指定窗口是否始终显示在其他窗口之上。
14. fullscreen：布尔值，指定窗口是否全屏显示。
15. fullscreenable：布尔值，指定窗口是否可以进入全屏模式。
16. title：窗口的标题。
17. backgroundColor：窗口的背景颜色。
18. frame：布尔值，指定是否显示窗口的边框和标题栏。
19. show：布尔值，指定创建窗口后是否立即显示。
20. 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()方法用来注册一次性事件。

1. closed: 当窗口关闭时触发此事件。
2. close: 在关闭窗口之前触发此事件。可以在此事件的处理程序中执行清理操作或阻止窗口关闭。
3. show: 当窗口被显示时触发此事件。
4. hide: 当窗口被隐藏时触发此事件。
5. minimize: 当窗口被最小化时触发此事件。
6. maximize: 当窗口被最大化时触发此事件。
7. restore: 当窗口从最大化或最小化状态恢复时触发此事件。
8. resize: 当窗口大小发生改变时触发此事件。
9. move: 当窗口位置发生改变时触发此事件。
10. focus: 当窗口获取焦点时触发此事件。
11. blur: 当窗口失去焦点时触发此事件。
12. enter-full-screen: 当窗口进入全屏模式时触发此事件。
13. 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()
    })
})

常见实例方法

1. loadFile(filePath[, options]) 用于加载本地文件到窗口中。
2. loadURL(url) 加载指定的 URL 到窗口中。可以是本地文件路径或远程 URL。
3. webContents 返回窗口的 WebContents 对象，它提供了对窗口中加载的网页内容的控制和交互。
4. close() 关闭窗口。
5. destroy() 销毁窗口及其关联的资源。
6. focus() 将焦点设置到窗口。
7. show() 显示窗口。
8. hide() 隐藏窗口。
9. maximize() 最大化窗口。
10. minimize() 最小化窗口。
11. restore() 还原窗口大小，如果窗口当前是最大化或最小化状态。
12. isMaximized() 返回一个布尔值，表示窗口是否处于最大化状态。
13. isMinimized() 返回一个布尔值，表示窗口是否处于最小化状态。
14. isFullScreen() 返回一个布尔值，表示窗口是否处于全屏模式。
15. setFullScreen(flag) 将窗口设置为全屏模式。flag 为true 表示全屏，为false 表示退出全屏。
16. setResizable(flag) 设置窗口是否可调整。flag 是一个布尔值。
17. setPosition(x, y) 设置窗口的位置，x 和 y 是窗口的坐标。
18. getParentWindow() 返回当前窗口的父窗口，如果存在的话。
19. getChildWindows() 返回当前窗口的所有子窗口的数组
20. 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);

常见事件

1. did-finish-load 当窗口中的网页加载完成时触发。
2. dom-ready 当窗口中的网页文档完成解析并可供操作时触发。
3. did-fail-load 当窗口中的网页加载失败时触发。
4. did-start-loading 当窗口开始加载网页时触发。
5. did-stop-loading 当窗口停止加载网页时触发。
6. page-title-updated 当窗口中的网页标题发生变化时触发。
7. did-navigate 当窗口中的网页导航到新的 URL 时触发。
8. did-navigate-in-page 当窗口中的网页发生内部导航（锚点跳转等）时触发。
9. did-frame-finish-load 当一个子框架加载完成时触发。
10. did-start-navigation 当窗口开始导航到新的 URL 时触发。
11. did-stop-navigation 当窗口停止导航时触发。
12. 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('网页加载完毕');
})

以上仅列出部分事件，更多的可以参考其官方文档。

常见方法

1. loadURL(url[, options]) 加载指定的 URL 到窗口中，可以是本地文件路径或远程 URL。
2. reload() 重新加载窗口中的网页。
3. goBack() 在网页浏览历史记录中后退一个页面。
4. goForward() 在网页浏览历史记录中前进一个页面。
5. stop() 停止窗口中正在加载的网页。
6. executeJavaScript(code[, userGesture]) 在窗口中执行给定的 JavaScript 代码。
7. insertCSS(css) 将指定的 CSS 代码注入到窗口中加载的网页中。
8. openDevTools([options]) 打开开发者工具，用于调试和检查窗口中的网页内容。
9. closeDevTools() 关闭开发者工具。
10. getTitle() 获取窗口中当前加载的网页的标题。
11. getURL() 获取窗口当前加载的网页的 URL。
12. isLoading() 检查窗口中是否正在加载网页。
13. isDestroyed() 检查 WebContents 对象是否已被销毁。
14. 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