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部分文件类型中,透明不生效的bug
setTimeout(_ => {
// 创建应用
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, // 禁用frame
titleBarStyle: 'hidden', // 隐藏bar
titleBarStyle: '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.html
programWindow.loadURL("http://127.0.0.1/#/?from=socluster&clientServer=true") // 将该行改为下面这一行,加载url
}
// 监听退出
ipcMain.on('quit', (event, title) => {
// 销毁应用程序
programWindow.destroy()
})
// 打开开发工具
// programWindow.webContents.openDevTools()
}
效果图: