为Electron实战第五章处理多窗口内容赋能：揭秘多窗口模式的奥妙

2024-02-15 13:29:20

第五章：处理多窗口

现在，当Fire Sale启动时，它为UI创建一个窗口。当该窗口关闭时，应用程序退出。虽然这种行为完全可以接受，但我们通常希望能够打开多个独立的窗口。在本章中，我们将Fire Sale从一个单窗口应用程序转换为一个支持多个窗口的应用程序。在此过程中，我们将探索新的Electron API，并讨论多窗口应用程序的一些最佳实践。

创建新窗口

要创建一个新窗口，可以使用BrowserWindow类。BrowserWindow类有很多选项可以自定义新窗口的外观和行为。例如，可以设置窗口的标题、大小、位置和图标。还可以选择是否将窗口设置为无边框或透明。

const {BrowserWindow} = require('electron')

const createWindow = () => {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    title: 'Fire Sale',
    icon: 'icon.png'
  })

  // 加载index.html文件
  win.loadFile('index.html')

  // 打开开发者工具
  win.webContents.openDevTools()
}

在窗口之间进行通信

一旦创建了多个窗口，就需要在它们之间进行通信。这可以通过多种方式实现，例如使用ipcRenderer和ipcMain模块。

// 主进程
const {ipcMain} = require('electron')

ipcMain.on('message', (event, arg) => {
  // 处理从渲染器进程接收到的消息
  console.log(arg)
})

// 渲染器进程
const {ipcRenderer} = require('electron')

ipcRenderer.send('message', 'Hello from the renderer process!')

处理窗口关闭事件

当窗口关闭时，需要执行一些清理工作。例如，需要释放窗口占用的资源，并从窗口管理器中移除窗口。

const {BrowserWindow} = require('electron')

const createWindow = () => {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    title: 'Fire Sale',
    icon: 'icon.png'
  })

  // 加载index.html文件
  win.loadFile('index.html')

  // 打开开发者工具
  win.webContents.openDevTools()

  // 在窗口关闭时执行清理工作
  win.on('closed', () => {
    // 释放窗口占用的资源
    win = null
  })
}