BrowserWindow
创建并控制浏览器窗口。
进程:主进程
在 app
模块 emitted ready
事件之前,您不能使用此模块。
// 在主进程中.
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ width: 800, height: 600 })
// Load a remote URL
win.loadURL('https://github.com')
// Or load a local HTML file
win.loadFile('index.html')
自定义窗口
BrowserWindow
类暴露了各种方法来修改应用窗口的外观和行为。 详细信息,请参阅 窗口自定义 教程。
优雅地显示窗口
每次加载页面都是直接展示,用户突然就看到了,这不是一个好的本地应用使用体验 要使窗口显示时没有视觉闪烁,对于不同情况有两种解决方案。
使用 ready-to-show
事件
在加载页面时,渲染进程第一次完成绘制时,如果窗口还没有被显示,渲染进程会发出 ready-to-show
事件 。 在此事件后显示窗口将没有视觉闪烁:
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ show: false })
win.once('ready-to-show', () => {
win.show()
})
这个事件通常在 did-finish-load
事件之后发出,但是页面有许多远程资源时,它可能会在 did-finish-load
之前发出事件。
请注意,使用此事件意味着渲染器会被认为是"可见的"并绘制,即使 show
是false。 如果您使用 paintWhenInitiallyHidden: false
,此事件将永远不会被触发。
设置 backgroundColor
属性
对于一个复杂的应用,ready-to-show
可能发出的太晚,会让应用感觉缓慢。 在这种情况下,建议立刻显示窗口,并使用接近应用程序背景的 backgroundColor
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ backgroundColor: '#2e2c29' })
win.loadURL('https://github.com')
请注意,即使对于使用 ready-to-show
事件的应用,仍建议 设置 backgroundColor
,以使应用感觉更接近原生。
一些包括 backgroundColor
的有效值的例子:
const win = new BrowserWindow()
win.setBackgroundColor('hsl(230, 100%, 50%)')
win.setBackgroundColor('rgb(255, 145, 145)')
win.setBackgroundColor('#ff00a3')
win.setBackgroundColor('blueviolet')
有关这些颜色类型的有效选项,请参阅 win.setBackgroundColor。
父子窗口
通过使用 parent
选项,你可以创建子窗口:
const { BrowserWindow } = require('electron')
const top = new BrowserWindow()
const child = new BrowserWindow({ parent: top })
child.show()
top.show()
child
窗口将总是显示在 top
窗口的顶部.
模态窗口
模态窗口是禁用父窗口的子窗口。 要创建模态窗口,必须同时设置parent
和modal
属性:
const { BrowserWindow } = require('electron')
const top = new BrowserWindow()
const child = new BrowserWindow({ parent: top, modal: true, show: false })
child.loadURL('https://github.com')
child.once('ready-to-show', () => {
child.show()
})
页面可见性
页面可见性 API 的工作方式如下:
- 在所有平台上, 可见性状态与窗口是否隐藏/最小化相关。
- 此外, 在 macOS 上, 可见性状态还会跟踪窗口的遮挡状态。 如果窗口被另一个窗口完全遮挡了,可见性状态为
hidden
. 在其他平台上,可见性状态只有在使用win.hide()
使窗口最小化或者隐藏时才为hidden
- 如果创建
BrowserWindow
时带有show: false
的参数, 最初的可见性状态将为visible
尽管窗口实际上是隐藏的。 - 如果
backgroundThrottling
被禁用,可见性状态将保持为visible
即使窗口被最小化、遮挡或隐藏。
推荐您在可见性状态为 hidden
时暂停消耗资源的操作以便减少电力消耗。