electron如何创建新窗口模态框并实现主进程传值给子进程

发布时间：2023-02-16 09:34:28 作者：iii
来源：亿速云阅读：213

Electron如何创建新窗口模态框并实现主进程传值给子进程

引言

Electron 是一个基于 Node.js 和 Chromium 的框架，允许开发者使用 Web 技术（HTML、CSS、JavaScript）构建跨平台的桌面应用程序。在开发桌面应用时，模态框（Modal Window）是一个常见的需求，它通常用于显示一些重要的信息或要求用户输入。本文将详细介绍如何在 Electron 中创建一个新窗口模态框，并实现主进程向子进程传递数据。

1. 创建 Electron 项目

首先，我们需要创建一个新的 Electron 项目。如果你已经有一个 Electron 项目，可以跳过这一步。

1.1 初始化项目

在终端中运行以下命令来初始化一个新的 Node.js 项目：

mkdir electron-modal-demo
cd electron-modal-demo
npm init -y

1.2 安装 Electron

接下来，安装 Electron 作为项目的依赖：

npm install electron --save-dev

1.3 创建主进程文件

在项目根目录下创建一个 main.js 文件，这将是 Electron 应用的主进程文件。

// main.js
const { app, BrowserWindow } = require('electron');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  mainWindow.loadFile('index.html');

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

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

1.4 创建渲染进程文件

在项目根目录下创建一个 index.html 文件，这将是 Electron 应用的渲染进程文件。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Electron Modal Demo</title>
</head>
<body>
  <h1>Hello, Electron!</h1>
  <button id="open-modal">Open Modal</button>

  <script>
    const { ipcRenderer } = require('electron');

    document.getElementById('open-modal').addEventListener('click', () => {
      ipcRenderer.send('open-modal');
    });

    ipcRenderer.on('modal-data', (event, data) => {
      console.log('Received data from modal:', data);
    });
  </script>
</body>
</html>

2. 创建模态框窗口

接下来，我们将创建一个模态框窗口。模态框窗口通常是一个新的 BrowserWindow 实例，并且它应该是模态的，即它应该阻止用户与主窗口交互。

2.1 修改主进程文件

在 main.js 中，我们需要添加创建模态框窗口的代码。

// main.js
const { app, BrowserWindow, ipcMain } = require('electron');

let mainWindow;
let modalWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  mainWindow.loadFile('index.html');

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

  ipcMain.on('open-modal', () => {
    if (!modalWindow) {
      modalWindow = new BrowserWindow({
        width: 400,
        height: 300,
        parent: mainWindow,
        modal: true,
        webPreferences: {
          nodeIntegration: true,
          contextIsolation: false,
        },
      });

      modalWindow.loadFile('modal.html');

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

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

2.2 创建模态框的 HTML 文件

在项目根目录下创建一个 modal.html 文件，这将是模态框窗口的渲染进程文件。

<!-- modal.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modal Window</title>
</head>
<body>
  <h1>Modal Window</h1>
  <button id="send-data">Send Data to Main Window</button>

  <script>
    const { ipcRenderer } = require('electron');

    document.getElementById('send-data').addEventListener('click', () => {
      const data = { message: 'Hello from Modal!' };
      ipcRenderer.send('modal-data', data);
    });
  </script>
</body>
</html>

3. 主进程向子进程传递数据

在 Electron 中，主进程和渲染进程之间的通信是通过 ipcMain 和 ipcRenderer 模块实现的。我们已经在前面的步骤中实现了从模态框窗口向主窗口发送数据的功能。现在，我们将实现从主进程向模态框窗口传递数据。

3.1 修改主进程文件

在 main.js 中，我们需要在创建模态框窗口时传递数据。

// main.js
const { app, BrowserWindow, ipcMain } = require('electron');

let mainWindow;
let modalWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  mainWindow.loadFile('index.html');

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

  ipcMain.on('open-modal', () => {
    if (!modalWindow) {
      modalWindow = new BrowserWindow({
        width: 400,
        height: 300,
        parent: mainWindow,
        modal: true,
        webPreferences: {
          nodeIntegration: true,
          contextIsolation: false,
        },
      });

      modalWindow.loadFile('modal.html');

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

      // 向模态框窗口传递数据
      modalWindow.webContents.on('did-finish-load', () => {
        modalWindow.webContents.send('init-data', { message: 'Hello from Main Window!' });
      });
    }
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

3.2 修改模态框的 HTML 文件

在 modal.html 中，我们需要监听来自主进程的数据。

<!-- modal.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modal Window</title>
</head>
<body>
  <h1>Modal Window</h1>
  <button id="send-data">Send Data to Main Window</button>

  <script>
    const { ipcRenderer } = require('electron');

    document.getElementById('send-data').addEventListener('click', () => {
      const data = { message: 'Hello from Modal!' };
      ipcRenderer.send('modal-data', data);
    });

    ipcRenderer.on('init-data', (event, data) => {
      console.log('Received data from main window:', data);
    });
  </script>
</body>
</html>

4. 运行项目

现在，我们已经完成了所有代码的编写。接下来，我们可以运行项目来测试模态框窗口和数据传递功能。

在终端中运行以下命令来启动 Electron 应用：

npx electron .

点击主窗口中的 “Open Modal” 按钮，将会打开一个模态框窗口。在模态框窗口中，点击 “Send Data to Main Window” 按钮，将会向主窗口发送数据。同时，模态框窗口也会接收到来自主窗口的数据。

5. 总结

本文详细介绍了如何在 Electron 中创建一个新窗口模态框，并实现主进程向子进程传递数据。通过使用 ipcMain 和 ipcRenderer 模块，我们可以轻松地在主进程和渲染进程之间进行通信。希望本文能帮助你更好地理解 Electron 的进程间通信机制，并在实际项目中应用这些知识。