node.js - 使用菜单项操作 Electron 中的 DOM

Question

我希望创建一个对话框(模式窗口)，当用户单击应用程序菜单上的“关于”链接时将显示该对话框。我正在思考以下几点:

let menuTemplate = {
  menu: [
    {
      label: 'About',
      click () {
        let about = document.querySelector('.hidden');
        about.classList.remove('hidden');
      }
    }
  ]
}

const menu = Menu.buildFromTemplate(menuTemplate)
Menu.setApplicationMenu(menu)

我收到的消息是“文档未定义”，我相信这是因为 Electron 应用程序的菜单位于主进程中，而页面的 DOM 位于渲染器进程中。

我知道主进程和远程进程之间有一种通信方式，但这对我来说真的很困惑。有人可以告诉我下一步是什么吗？

ps 我正在使用 NodeJS 和 Express 以及 Electron

Answer 1

现在您可以考虑两种方法来实现此目的:一种可以在主进程中完成，另一种需要跨进程消息传递。

<小时/>

主流程(单独)

使用主进程，我们可以在 require 语句中导入 dialog 类，然后使用该方法(如 Arun 在另一个答案中建议的那样):

dialog.showMessageBox([browserWindow,]options[,callback])

这将显示操作系统 native 的对话框。您甚至可能会发现您想将其用于人们在渲染器进程中执行的某些操作，但我接下来会继续讨论。

进程间通信

您的托盘菜单将在您的主进程中实例化，但事件的结果必须在渲染器进程中发生才能显示您的模式。

在主进程中，我们可以导入 ipcMain，而在渲染器进程中 - 你猜对了，是 ipcRenderer。

在您的点击事件中，您可以使用 BrowserWindow#webContents#send 方法向渲染发送事件，我们将其称为“ShowMyModal”:

myWindowInstance.webContents.send('ShowMyModal');

现在，在主进程中，我们可以使用 ipcMain 对象监听此事件。

ipcMain.on('ShowMyModal', function () {
  // the modal event has fired!

  $('#myModal').show();
});

<小时/>

您可能会发现此类内容的进程间通信。习惯来回抛出 IPC 事件，它确实展示了 Electron 及其渲染器过程的美妙之处。