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()
}
效果圖: