分享electron多窗口实践

最新推荐文章于 2025-11-14 02:47:50 发布

原创

最新推荐文章于 2025-11-14 02:47:50 发布 · 2.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#electron

在当今的软件开发领域，Electron框架以其独特的能力脱颖而出，它允许开发者使用Web技术构建跨平台的桌面应用程序。随着Electron应用的复杂性增加，多窗口管理和窗口间通信的需求也日益增长。本文将深入探讨如何在Electron中创建和管理多个窗口，并实现它们之间的有效通信。我们将从基础概念出发，逐步深入到实际代码实现，确保您能够理解并应用这些技术，以构建更加丰富和互动的桌面应用体验。让我们开始这段技术探索之旅，揭开Electron多窗口应用开发的神秘面纱。

创建并打开新窗口

const {
   
    BrowserWindow, app, ipcMain} = require('electron')
const electron = require('electron')
const url = require('url')
const path = require('path')

var window2 = null
exports.getWindow = () => {
   
   
  return window2
}
exports.launch = () => {
   
   
  /// 实现在特定窗口打开新窗口

  // id：与显示器相关联的唯一标识符（Integer）。
  // rotation：屏幕旋转的角度，可以是 0, 1, 2, 3，分别代表 0°, 90°, 180°, 270°（Integer）。
  // scaleFactor：输出设备的像素比例因子（Number）。
  // touchSupport：是否支持触摸，可能的值为 available, unavailable, unknown（String）。
  // bounds：包含显示器的边界矩形（Object）。
  // size：包含显示器的宽度和高度（Object）。
  // workArea：包含显示器的工作区域矩形（Object）。
  // workAreaSize：包含显示器工作区域的宽度和高度（Object）。
  var displays = electron.screen.getAllDisplays()
  // 主要使用到bounds 中的x和y参数
  // x：显示器左上角的横坐标（水平位置），以像素为单位。
  // y：显示器左上角的纵坐标（垂直位置），以像素为单位。x
  // 这些属性共同定义了显示器在屏幕上的确切位置和尺寸。例如，如果你有两个横向并排的显示器，主显示器（通常是0号显示器）的 bounds 可能看起来像这样：
  // {