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