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

创建新窗口模态框

首先，我们需要先安装 electron，然后在代码中引入相关模块。

// 引入 electron 模块
const electron = require('electron')
// 引入 BrowserWindow 模块
const BrowserWindow = electron.BrowserWindow

然后，我们可以使用以下代码创建一个新窗口：

// 创建一个新窗口
let newWindow = new BrowserWindow({
    width: 800,
    height: 600,
    // 设置父窗口为当前窗口
    modal: true,
    parent: electron.remote.getCurrentWindow()
});

// 加载新窗口的 HTML 文件
newWindow.loadFile('new-window.html');

这里设置了新窗口的大小，并将其设为了模态框。同时，使用 parent 属性将父窗口指定为当前窗口。

实现主进程传值给子进程

在新窗口中，我们可以使用 node.js 的模块来获取主进程发送的消息。例如，在新窗口的渲染进程中可以使用以下代码获取传递的值：

const { ipcRenderer } = require('electron')

ipcRenderer.on('message-from-main', (event, message) => {
    console.log(message) // 打印主进程传递的消息
})

这里使用了 ipcRenderer 模块来监听事件，当主进程发送一个名为 message-from-main 的事件时，渲染进程就能接收到并执行对应的回调函数，从而获取传递的值。

完整代码示例

以下是一个完整的示例，用于演示如何创建一个新窗口模态框，并在其中实现主进程传值给子进程：

// 引入 electron 模块
const electron = require('electron')
// 引入 BrowserWindow 模块
const BrowserWindow = electron.BrowserWindow
// 引入 ipcMain 模块
const ipcMain = electron.ipcMain

// 监听主进程发送的 'open-new-window' 事件
ipcMain.on('open-new-window', (event, arg) => {
  // 创建一个新窗口
  let newWindow = new BrowserWindow({
      width: 800,
      height: 600,
      // 设置父窗口为当前窗口
      modal: true,
      parent: electron.remote.getCurrentWindow()
  });

  // 加载新窗口的 HTML 文件
  newWindow.loadFile('new-window.html');

  // 在新窗口中打开开发者工具
  newWindow.webContents.openDevTools()

  // 发送消息给新窗口
  newWindow.webContents.send('message-from-main', 'Hello from main window!');
})

// 在新窗口的渲染进程中获取主进程发送的消息
const { ipcRenderer } = require('electron')
ipcRenderer.on('message-from-main', (event, message) => {
  console.log(message)
})

// 点击按钮时触发事件，向主进程发送消息
document.getElementById('btn-send-message').addEventListener('click', () => {
  electron.ipcRenderer.send('message-from-new-window', 'Hello from new window!');
})

总结

通过以上代码示例，我们可以看到如何在 electron 中创建新窗口模态框，并且实现主进程与子进程之间的通信。在实现过程中，需要先引入相关模块，接着使用 ipcMain 和 ipcRenderer 模块监听和发送事件，以及使用 BrowserWindow 模块创建新窗口并设置其相关属性。同时需要注意，子进程并不能直接获取主进程的变量，需要通过事件的方式传递数据。