上文写到,借助 electron 可以简单且快速的实现桌面端应用,对于部分业务需求可能也想实现副屏的展示(比如零售行业,副屏显示结算信息之类的)
老规矩,思路分析,首先上一篇我们知道,我们可以利用 BrowserWindow去创建窗口,然后加载对应的网页,那么副屏页可以用同样的思路,1、首先我们要知道怎么检测有没有副屏 2、其次,知道有副屏后,此时就应该去创建窗体,加载网页…,既然知道了思路,老规矩,去看看文档
1、screen.getAllDisplays()
electron 提供了这个api,返回一个窗口数组Display[],表示当前可用的窗口
const { screen } = require('electron')
let displays = screen.getAllDisplays()
// 这样就知道了副屏是否存在
let externalDisplay = displays.find((display) => {
// 可以理解为屏幕边界的坐标
return display.bounds.x !== 0 || display.bounds.y !== 0
})
之前 BrowserWindow 中还可以传递 x(Interger (可选) - (必选 如果使用了y) 窗口相对于屏幕左侧的偏移量)、y ((可选) - (必选 如果使用了x) 窗口相对于屏幕顶端的偏移量),此时我们就可以将刚刚获取到的副屏的边界值传递进去
let viceWindow = null
if (externalDisplay) {
viceWindow = new BrowserWindow({
x: externalDisplay.bounds.x,
y: externalDisplay.bounds.y,
title: 'xxxx',
icon: ...,
...
})
// 打开指定网页
viceWindow.loadURL(xxxx)
关于打开调试面板那些和之前的一样,这里就不在说了
2、小补充
笔者开始也以为这样就万事大吉了,没想到实际使用中还是出了些问题,比如关闭应用时,副屏没有关闭或者后台程序还处于挂起状态,这样肯定是不行的
// 可以在创建好副屏实例时,监听一下窗口关闭事件
if (externalDisplay) {
viceWindow = new BrowserWindow({
...
})
viceWindow.loadURL(xxx)
viceWindow.on('closed', () => {
viceWindow = null
})
}
// 当主屏关闭的时候,顺带关闭下副屏
globalmainWindow.on('close', function () {
viceWindow.closed()
})
这样基本就能实现主、副屏问题,其间还有些小细节,比如,副屏可能基本要求是全屏,或者不显示window任务栏窗口,不过这些都是可以通过部分参数实现的(skipTaskbar、fullscreen),更多需求还是要多阅读文档。