1. 基础窗口创建与配置

在Electron的main.js文件中，我们可以通过BrowserWindow模块创建基础窗口。下面示例演示了如何创建带有自定义属性的基础窗口，并实现父子窗口关联：

// 技术栈：Electron 28.0.0
const { app, BrowserWindow } = require('electron')

function createMainWindow() {
  // 主窗口配置
  const mainWindow = new BrowserWindow({
    width: 1200,           // 初始宽度
    height: 800,           // 初始高度
    title: '数据可视化看板', // 窗口标题
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })

  // 加载本地HTML文件
  mainWindow.loadFile('index.html')

  // 创建子窗口（工具面板）
  const childWindow = new BrowserWindow({
    parent: mainWindow,     // 设置父窗口
    width: 400,
    height: 600,
    modal: true,            // 模态窗口
    show: false             // 初始不显示
  })

  // 窗口加载完成事件
  childWindow.once('ready-to-show', () => {
    childWindow.show()
  })

  // 关闭主窗口时退出应用
  mainWindow.on('closed', () => {
    app.quit()
  })
}

app.whenReady().then(createMainWindow)

此示例展示了：

  1. 主窗口的基本配置参数
  2. 父子窗口的关联实现
  3. 异步窗口加载策略
  4. 应用生命周期管理

2. 窗口布局与多屏适配技巧

现代应用常需要适配不同分辨率的显示器，以下代码实现智能窗口布局：

// 技术栈：Electron + screen模块
const { screen } = require('electron')

function createAdaptiveWindow() {
  // 获取所有显示器信息
  const displays = screen.getAllDisplays()
  
  // 主显示器参数
  const primaryDisplay = screen.getPrimaryDisplay()
  const { width, height } = primaryDisplay.workAreaSize

  // 创建自适应窗口
  const win = new BrowserWindow({
    width: Math.min(1440, width * 0.8),  // 不超过屏幕80%宽度
    height: height * 0.75,              // 占屏幕75%高度
    x: (width - 1440) / 2,             // 水平居中
    y: 50,                             // 顶部留白
    backgroundColor: '#2e2e2e'         // 加载前的背景色
  })

  // 多显示器适配
  if (displays.length > 1) {
    const secondaryDisplay = displays.find(d => d.id !== primaryDisplay.id)
    win.setBounds({
      x: secondaryDisplay.bounds.x + 100,
      y: secondaryDisplay.bounds.y + 100,
      width: 800,
      height: 600
    })
  }
}

该方案实现：

  • 主显示器智能布局
  • 多显示器自动适配
  • 动态边界计算
  • 自适应尺寸限制

3. 窗口间通信的三种模式

窗口通信是复杂应用的核心需求，下面是三种实现方式：

// 方法1：使用webContents直接通信
// 主进程
mainWindow.webContents.send('update-data', latestData)

// 渲染进程
const { ipcRenderer } = require('electron')
ipcRenderer.on('update-data', (event, data) => {
  chart.update(data)
})

// 方法2：广播通信模式
// 主进程
function broadcastMessage(channel, message) {
  BrowserWindow.getAllWindows().forEach(win => {
    win.webContents.send(channel, message)
  })
}

// 方法3：共享内存通信（适用于大数据量）
const sharedObject = {
  dataBuffer: new SharedArrayBuffer(1024),
  updateFlag: false
}

// 主进程
global.sharedData = sharedObject

// 渲染进程
const sharedData = remote.getGlobal('sharedData')

4. 内存管理与性能优化

窗口资源管理直接影响应用性能，推荐方案：

// 窗口对象缓存管理
const windowCache = new Map()

function createCachedWindow(name, options) {
  if (windowCache.has(name)) {
    const existingWindow = windowCache.get(name)
    existingWindow.focus()
    return existingWindow
  }

  const newWindow = new BrowserWindow(options)
  windowCache.set(name, newWindow)

  // 窗口关闭时清理缓存
  newWindow.on('closed', () => {
    windowCache.delete(name)
    // 显式释放资源
    newWindow.webContents.session.clearCache()
  })

  return newWindow
}

5. 应用场景与技术选型分析

典型应用场景：

  1. 企业级数据看板应用
  2. 实时监控仪表盘
  3. 多媒体编辑工具套件
  4. 跨平台OA协作系统

技术优势：

  • 完整的浏览器功能支持
  • 原生系统API集成能力
  • 成熟的进程管理机制
  • 跨平台统一开发体验

局限考量：

  • 内存占用相对较高
  • 复杂IPC通信调试成本
  • 原生功能深度定制难度

6. 常见问题解决方案

问题1：窗口白屏

win.webContents.on('did-fail-load', () => {
  win.loadURL('fallback.html')
})

问题2：焦点丢失

win.on('blur', () => {
  if (!win.isMinimized()) {
    win.webContents.send('window-blur')
  }
})

7. 进阶：动态窗口管理系统设计

实现可扩展的窗口管理架构：

class WindowManager {
  constructor() {
    this.windows = new Map()
    this.config = this.loadConfig()
  }

  createWindow(type, options) {
    const config = this.config[type]
    const win = new BrowserWindow({
      ...config,
      ...options
    })
    
    this.windows.set(win.id, {
      instance: win,
      type: type,
      status: 'active'
    })

    return win
  }

  restoreWindow(type) {
    const candidates = Array.from(this.windows.values())
      .filter(w => w.type === type && w.status === 'closed')
    
    if (candidates.length > 0) {
      const target = candidates[0]
      target.instance.restore()
      target.status = 'active'
      return true
    }
    return false
  }
}

8. 注意事项与最佳实践

  1. 内存泄漏防护
  • 及时清理closed窗口的引用
  • 避免在渲染进程存储全局变量
  1. 安全策略
new BrowserWindow({
  webPreferences: {
    webSecurity: true,
    sandbox: true
  }
})
  1. 性能基准
  • 单个应用窗口建议内存占用<300MB
  • 子窗口数量控制在5个以内

9. 总结

本指南系统性地探讨了Electron窗口管理的各项核心技术，从基础创建到高级控制方案，覆盖了实际开发中遇到的典型场景与痛点。通过合理的窗口生命周期管理、创新的通信机制设计和科学的性能优化策略，开发者可以构建出稳定高效的跨平台桌面应用。