如何制作一个具有 2 个窗口的电子反应应用程序 - 一个普通的窗口和一个用于托盘的窗口答案

【问题标题】：How to make an electron react app, which has 2 windows - a general one and one for the Tray如何制作一个具有 2 个窗口的电子反应应用程序 - 一个普通的窗口和一个用于托盘的窗口
【发布时间】：2021-05-09 21:33:50
【问题描述】：

我想用一些反应样板制作一个 Electronjs 应用程序。我想最好的一个是 the one with the most stars in github，但我愿意接受建议。我的目标是有一个窗口，它将成为主窗口，而另一个只有当用户单击托盘时才会显示（https://github.com/sfatihk/electron-tray-window）。最好的解决方案是什么，不使用第二个 html，如果可能的话不弹出。

【问题讨论】：

请记住，大多数 Linux 发行版无法与屏幕上托盘图标所在的 Electron 通信，因此您可能不得不依赖 Linux 上的鼠标位置。

标签： javascript reactjs webpack electron create-react-app

【解决方案1】：

您可以在电子中为此使用Tray

从托盘文档中引用

将图标和上下文菜单添加到系统的通知区域。

示例代码：

const { app, Menu, Tray } = require('electron')

let tray = null
app.whenReady().then(() => {
  tray = new Tray('/path/to/my/icon')
  const contextMenu = Menu.buildFromTemplate([
    { label: 'Item1', type: 'radio' },
    { label: 'Item2', type: 'radio' },
    { label: 'Item3', type: 'radio', checked: true },
    { label: 'Item4', type: 'radio' }
  ])
  tray.setToolTip('This is my application.')
  tray.setContextMenu(contextMenu)
})

【讨论】：

这不是我要的。我需要有单独的窗口，一个用于托盘（使用我链接的包）和一个主窗口。您正在向我展示如何使用菜单创建托盘。问题更多是关于如何处理路由和 webpack 配置
然后在您的问题中添加更多详细信息。当电子已经内置支持时，我不知道你为什么要使用单独的包来做它
文档中没有关于浏览器窗口的信息
您可以自己编写该代码。应该很简单

【解决方案2】：

我最近研究了集成 Election + React 的方法，我强烈推荐使用 electron-forge 并像这样添加 React：https://blog.logrocket.com/electron-forge-vs-electron-react-boilerplate/

那篇文章为您提供了一位经验丰富的 Slack 工程师的良好背景，但基本上建议您在 electron-forge 文档中遵循这一点：https://www.electronforge.io/guides/framework-integration/react-with-typescript

这是最简单的集成，您将在 electron-forge 而不是 GitHub 样板中站稳脚跟。

然而，我从一个 create-react-app 项目开始。当组合 2 个框架时，每个框架都有大型 package.json 和大量构建工具，我不喜欢将它们的 package.json 合并到一个项目中。相反，我在 electron-forge 中嵌套了一个 CRA 项目，并告诉电子从 CRA 中加载 /build 文件夹。这适用于打包应用程序，但在开发过程中，我使用 electron-is-dev 在端口 3001 上加载 CRA 开发服务器。使用 .env 配置将 CRA 开发服务器使用的端口更改为 3001，因为 electron-forge 和 CRA 都希望默认使用 3000。

要将托盘窗口中的操作连接到主应用程序窗口，请使用 IPC 消息在这 2 个渲染器之间进行通信，主进程在它们之间传递消息。

【讨论】：

所以你是说我应该告诉电子为托盘和主窗口加载不同的构建？
@yovchokalev 托盘和主窗口是 2 个独立的电子“渲染器”进程，在它们自己的 Chromium 窗口中运行。这意味着如果您使用 React，它们都是 2 个不同的应用程序。然后，您可以根据需要使用电子“主”进程在它们之间进行通信。如果您采用博客和电子文档中的简单方法，webpack 将为您处理构建。我的附加信息解释了如何使用 create-react-app 并且该方法需要将 CRA 的 2 个构建复制到您的电子应用程序包中。如果您刚开始，我会使用第一种简单的方法并跳过 CRA。

【解决方案3】：

给定现有参数，您最好的解决方案可能是在您的应用程序中使用单独的路由（因为您不想要单独的 html 页面），当单击托盘图标时，将其连接到类似的东西

const window = new BrowserWindow();
window.loadUrl('path/to/app/special/route');

【讨论】：