本文主要讲解Electron 窗口的 API 和一些在开发之中遇到的问题。
官方文档 虽然比较全面，但是要想开发一个商用级别的桌面应用必须对整个 Electron API 有较深的了解，才能应对各种需求。
1. 创建窗口
通过BrowserWindow，来 创建 或者 管理 新的浏览器窗口，每个浏览器窗口都有一个进程来管理。
1.1. 简单创建窗口
const { BrowserWindow } = require('electron');
const win = new BrowserWindow();
win.loadURL('https://github.com');
效果如下：
image.png
1.1.2. 优化
问题：electron 的 BrowserWindow 模块在创建时，如果没有配置 show:false，在创建之时就会显示出来，且默认的背景是白色；然后窗口请求 HTML，会出现视觉闪烁。
解决
const { BrowserWindow } = require('electron');
const win = new BrowserWindow({ show:false });
win.loadURL('https://github.com');
win.on('ready-to-show',()=>{
win.show();
})
两者对比有很大的区别
image.png
1.2. 管理窗口
所谓的管理窗口，相当于主进程可以干预窗口多少。
- 窗口的路由跳转
- 窗口打开新的窗口
- 窗口大小、位置等
- 窗口的显示
- 窗口类型（无边框窗口、父子窗口）
- 窗口内
JavaScript的node权限，预加载脚本等 - ....
这些个方法都存在于BrowserWindow模块中。
1.2.1. 管理应用创建的窗口
BrowserWindow模块在创建窗口时，会返回 窗口实例，这些 窗口实例 上有许多功能方法，我们利用这些方法，管理控制这个窗口。
在这里使用Map对象来存储这些 窗口实例。
const BrowserWindowsMap = new Map<number, BrowserWindow>()
let mainWindowId: number;
const browserWindows = new BrowserWindow({ show:false })
browserWindows.loadURL('https://github.com')
browserWindows.once('ready-to-show', () => {
browserWindows.show()
})
BrowserWindowsMap.set(browserWindow.id, browserWindow)
mainWindowId = browserWindow.id // 记录当前窗口为主窗口
窗口被关闭，得把Map中的实例删除。
browserWindow.on('closed', () => {
BrowserWindowsMap?.delete(browserWindowID)
})
1.2.2. 管理用户创建的窗口
主进程可以控制窗口许多行为，这些行为会在后续文章一一列举；以下以主进程控制窗口建立新窗口的行为为例。
使用**new-window**监听新窗口创建
// 创建窗口监听
browserWindow.webContents.on('new-window', (event, url, frameName, disposition) => {
/** @params {string} disposition
* new-window : window.open调用
* background-tab: command+click
* foreground-tab: 右键点击新标签打开或点击a标签target _blank打开
* /
})
注：关于disposition字段的解释，移步 electron文档、electron源码、chrome 源码
扩展**new-window**
经过实验，并不是所有新窗口的建立， new-window 都能捕捉到的。
以下方式打开的窗口可以被**new-window**事件捕捉到
window.open('https://github.com')
<a href='https://github.com' target='__blank'>链接</a>
渲染进程中使用 **BrowserWindow** 创建新窗口，不会被 **new-window**事件捕捉到
const { BrowserWindow } = require('electron').remote
const win = new BrowserWindow()
win.loadURL('https://github.com')
*渲染进程访问 * *remote* *，主进程需配置 *enableRemoteModule:true
使用这种方式同样可以打开一个新的窗口，但是主进程的 new-window 捕捉不到。
应用**new-window**
new-window 控制着窗口新窗口的创建，我们利用这点，可以做到很多事情；比如链接校验、浏览器打开链接等等。默认浏览器打开链接代码如下：
import { shell } from 'electron'
function openExternal(url: string) {
const HTTP_REGEXP = /^https?:\/\//
// 非http协议不打开，防止出现自定义协议等导致的安全问题
if (!HTTP_REGEXP) {
return false
}
try {
await shell.openExternal(url, options)
return true
} catch (error) {
console.error('open external error: ', error)
return false
}
}
// 创建窗口监听
browserWindow.webContents.on('new-window', (event, url, frameName, disposition) => {
if (disposition === 'foreground-tab') {
// 阻止鼠标点击链接
event.preventDefault()
openExternal(url)
}
})
关于 *shell* 模块，可以查看官网 https://www.electronjs.org/docs/api/shell
1.3. 关闭窗口
**close** 事件和 **closed** 事件
close事件在窗口将要关闭时之前触发，但是在 DOM的 beforeunload 和 unload 事件之前触发。
// 窗口注册close事件
win.on('close',(event)=>{
event.preventDefault() // 阻止窗口关闭
})
closed 事件在窗口关闭后出触发，但是此时的窗口已经被关闭了，无法通过 event.preventDefault() 来阻止窗口关闭。
win.on('closed', handler)
主进程能够关闭窗口的 API 有很多，但都有各自的利弊。
1.3.1. win.close()
关于这个 API 的利弊
- 如果当前窗口实例注册并阻止
close事件，将不会关闭页面，而且也会 阻止计算机关闭（必须手动强制退出）； - 关闭页面的服务，如
websocket，下次打开窗口，窗口中的页面会 重新渲染； - 通过这个
API触发的close事件在unload和beforeunload之前触发，通过这点可以实现 关闭时触发弹窗；
image.png
- 会被
closed事件捕捉到。
1.3.2. win.destroy()
- 强制退出，无视
close事件（即：无法通过event.preventDefault()来阻止）； - 关闭页面，以及页面内的服务，下次打开窗口，窗口中的页面会重新渲染；
- 会被
closed事件捕捉到。
1.3.3. win.hide()
这个隐藏窗口。
- 隐藏窗口，会触发
hide和blur事件，同样也是可以通过event.preventDefault()来阻止 - 只是隐藏窗口，通过
win.show()，可以将窗口显现，并且会保持原来的窗口，里面的服务也不会挂断
2. 主窗口隐藏和恢复
2.1. 主窗口
2.1.1. 为什么需要 主窗口?
一个应用存在着许多的窗口，需要一个窗口作为 主窗口，如果该窗口关闭，则意味着整个应用被关闭。
场景：在应用只有一个页面的时，用户点击关闭按钮，不想让整个应用关闭，而是隐藏；
例如：其他的APP，像微信，QQ等桌面端。
利用上文中提到的关闭窗口的 API ,我们实现一个主窗口的隐藏和恢复。
改造一下 close 事件
let mainWindowId: number // 用于标记主窗口id
const browserWindow = new BrowserWindow()
// 记录下主窗口id
if (!mainWindowId) {
mainWindowId = browserWindow.id
}
browserWindow.on('close', event => {
// 如果关闭的是主窗口，阻止
if (browserWindow.id === mainWindowId) {
event.preventDefault()
browserWindow.hide()
}
})
2.1.2. 恢复主窗口显示
能隐藏，就能恢复。
网友评论