Electron 多显示器渲染

news/2024/10/20 16:16:14/

Electron打出的包，如果当前有俩个显示器，则可以配置当前显示倒哪个显示器上，或者可以配置不同的显示器，启动不同的项目，只在Windows和Linux下测试过，Mac没有真机，可以利用docker安装MacOS环境，按理说没问题，具体怎么配置，如下：

const { app, BrowserWindow, ipcMain, Menu, electron, screen } = require('electron')// 禁用沙盒渲染器
app.enableSandbox()
// 禁用硬件加速/GPU渲染
app.disableHardwareAcceleration()
// 不初始化菜单，使用默认菜单
Menu.setApplicationMenu(null)// 创建应用
function createWindow() {// 判断当前的窗口数量let displays = screen.getAllDisplays()// 判断是否副窗口let externalDisplay = displays.find((display) => {return display.bounds.x !== 0 || display.bounds.y !== 0})// 如果是副窗口if (externalDisplay) {// 创建应用_create({ x: externalDisplay.bounds.x + 500, y: externalDisplay.bounds.y + 50 })}// 创建应用_create()
}// Electron 结束初始化
app.whenReady().then(() => {// 400毫秒延迟，解决在Linux部分文件类型中，透明不生效的bugsetTimeout(_ => {// 创建应用createWindow()}, 400)// 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他app.on('activate', function () {// 打开的窗口，那么程序会重新创建一个窗口。if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})

然后调用_create事件

/*** @description 创建应用实例* @param {Object} option: 附加参数*/
function _create(option = {}) {let programWindow // 主屏let baseConfig = {fullscreen: true, // 全屏webPreferences: {preload: path.join(__dirname, 'preload.js'),devTools: false, // 开发者工具sandbox: false // 禁用沙盒},frame: false, // 禁用frametitleBarStyle: 'hidden', // 隐藏bartitleBarStyle: 'customButtonsOnHover',transparent: true, // 窗口透明alwaysOnTop: true, // 是否置顶backgroundColor: 'rgba(0, 0, 0, 0)' // 背景颜色}// 创建浏览器窗口if (option.x) {programWindow = new BrowserWindow(Object.assign(option, baseConfig))} else {programWindow = new BrowserWindow(baseConfig)}// 判断当前的环境，如果是开发if (!app.isPackaged) {programWindow.loadURL("http://10.0.128.101/#/?from=socluster&clientServer=true") // 将该行改为下面这一行，加载url} else {// 加载 index.htmlprogramWindow.loadURL("http://127.0.0.1/#/?from=socluster&clientServer=true") // 将该行改为下面这一行，加载url}// 监听退出ipcMain.on('quit', (event, title) => {// 销毁应用程序programWindow.destroy()})// 打开开发工具// programWindow.webContents.openDevTools()
}