📌  相关文章
📜  如何在 Electron JS 应用程序的多个窗口之间切换？(1)

📅  最后修改于: 2023-12-03 14:52:17.048000             🧑  作者: Mango

如何在 Electron JS 应用程序的多个窗口之间切换？

在 Electron JS 应用程序中，我们可能需要打开多个窗口。这时候，我们需要知道如何在窗口之间切换，以提高用户体验。

实现方法

我们可以通过在渲染进程使用 IPC（Inter-Process Communication，进程间通信）来发送消息给主进程，从而实现在窗口之间切换的功能。

步骤
  1. 创建多个窗口
const { BrowserWindow } = require('electron')

let win1, win2

function createWindow () {
  // 创建窗口1
  win1 = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载页面
  win1.loadFile('index.html')

  // 创建窗口2
  win2 = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    },
    show: false // 设置为不显示
  })

  // 加载页面
  win2.loadFile('index2.html')

  // 窗口关闭时清空变量
  win1.on('closed', () => {
    win1 = null
  })

  win2.on('closed', () => {
    win2 = null
  })
}

app.on('ready', createWindow)
  1. 在渲染进程中发送消息到主进程
// 在窗口1中发送消息到主进程
const { ipcRenderer } = require('electron')

ipcRenderer.send('switch-window', 'win2')
  1. 在主进程中接收消息并执行相应的逻辑
// 在主进程中接收消息
ipcMain.on('switch-window', (event, arg) => {
  if (arg === 'win2') {
    // 显示窗口2
    win2.show()

    // 隐藏窗口1
    win1.hide()
  }
})
示例代码
// main.js
const { app, BrowserWindow, ipcMain } = require('electron')

let win1, win2

function createWindow () {
  // 创建窗口1
  win1 = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载页面
  win1.loadFile('index.html')

  // 创建窗口2
  win2 = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    },
    show: false // 设置为不显示
  })

  // 加载页面
  win2.loadFile('index2.html')

  // 窗口关闭时清空变量
  win1.on('closed', () => {
    win1 = null
  })

  win2.on('closed', () => {
    win2 = null
  })
}

app.on('ready', createWindow)

// 在主进程中接收渲染进程发送的消息
ipcMain.on('switch-window', (event, arg) => {
  if (arg === 'win2') {
    // 显示窗口2
    win2.show()

    // 隐藏窗口1
    win1.hide()
  }
})

// index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>窗口1</title>
  </head>
  <body>
    <button onclick="switchWindow()">切换到窗口2</button>
    <script>
      const { ipcRenderer } = require('electron')

      function switchWindow () {
        ipcRenderer.send('switch-window', 'win2')
      }
    </script>
  </body>
</html>

// index2.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>窗口2</title>
  </head>
  <body>
    <button onclick="switchWindow()">切换到窗口1</button>
    <script>
      const { ipcRenderer } = require('electron')

      function switchWindow () {
        ipcRenderer.send('switch-window', 'win1')
      }
    </script>
  </body>
</html>
总结

通过使用 IPC，我们可以实现在 Electron JS 应用程序的多个窗口之间切换的功能。请注意，本文仅提供基本的实现方法，实际使用时可能需要进行更多适配和处理。