Electron 多显示器渲染

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

javascript 复制代码
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事件

javascript 复制代码
/**
 * @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()
}

效果图:

相关推荐
拉不动的猪3 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪3 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
uhakadotcom5 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom5 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom5 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom5 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
咖啡教室6 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript
咖啡教室6 小时前
前端开发中JavaScript、HTML、CSS常见避坑问题
前端·javascript·css
市民中心的蟋蟀9 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js
逆袭的小黄鸭9 小时前
JavaScript 闭包:强大特性背后的概念、应用与内存考量
前端·javascript·面试