书接上文 electron 桌面端之副屏展示 （二）

上文写到，借助 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），更多需求还是要多阅读文档。