Electron学习笔记（十二）—— 常用api____BrowserWindow

BrowserWindow

文档地址：https://www.electronjs.org/docs/api/browser-window#使用ready-to-show事件

创建和控制浏览器窗口。

进程：主进程

// 在主进程中.
const { BrowserWindow } = require('electron')

// 或者从渲染进程中使用 `remote`.
// const { BrowserWindow } = require('electron').remote

let win = new BrowserWindow({ 
    width: 800, 
    height: 600,
})
win.on('closed', () => {
  win = null
})

// 加载远程URL
win.loadURL('https://github.com')

// 或加载本地HTML文件
win.loadURL(`file://${__dirname}/app/index.html`)

无边框窗口 frame:false

无边框窗口是不带外壳（包括窗口边框、工具栏等），只含有网页内容的窗口。 这些是  BrowserWindow 类上的选项。

详细内容请看文档

https://www.electronjs.org/docs/api/frameless-window

let win = new BrowserWindow({ 
    width: 800, 
    height: 600,
    frame:false,//无边框
})

优雅地显示窗口

当页面在窗口中直接加载时，用户会看到未完成的页面，这不是一个好的原生应用的体验。为了让画面显示时没有视觉闪烁，有两种不同的解决方案。

使用ready-to-show事件

在加载页面时，渲染进程第一次完成绘制时，如果窗口还没有被显示，渲染进程会发出 ready-to-show 事件 。 在此事件后显示窗口将没有视觉闪烁：

const { BrowserWindow } = require('electron')
let win = new BrowserWindow({ show: false })
win.once('ready-to-show', () => {
  win.show()
})

这个事件通常在 did-finish-load 事件之后发出，但是页面有许多远程资源时，它可能会在 did-finish-load之前发出事件。

Please note that using this event implies that the renderer will be considered "visible" and paint even though show is false. 如果您使用 paintWhenInitiallyHidden: false，此事件将永远不会被触发。

设置 backgroundColor

对于一个复杂的应用，ready-to-show 可能发出的太晚，会让应用感觉缓慢。 在这种情况下，建议立刻显示窗口，并使用接近应用程序背景的 backgroundColor

const { BrowserWindow } = require('electron')

let win = new BrowserWindow({ backgroundColor: '#2e2c29' })
win.loadURL('https://github.com')

父子窗口

通过使用 parent 选项，你可以创建子窗口：

const { BrowserWindow } = require('electron')

let top = new BrowserWindow()
let child = new BrowserWindow({ parent: top })
child.show()
top.show()

child 窗口将总是显示在 top 窗口的顶部.

模态窗口

模态窗口是禁用父窗口的子窗口，创建模态窗口必须设置 parent 和 modal 选项：

const { BrowserWindow } = require('electron')

let child = new BrowserWindow({ parent: top, modal: true, show: false })
child.loadURL('https://github.com')
child.once('ready-to-show', () => {
  child.show()
})