如何制作一个 Electron React 应用程序，它有 2 个窗口 - 一个是通用窗口，一个是托盘窗口

Question

我想用一些 React 样板制作一个 Electronjs 应用程序。我想最好的就是 github 中星星最多的那个，但我愿意接受建议。我的目标是拥有一个窗口，该窗口将成为主窗口，而另一个窗口仅在用户单击托盘时才会显示（https://github.com/sfatihk/electron-tray-window）。最好的解决方案是什么，不使用第二个 html，并且如果可能的话不弹出。

Answer 1

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

这篇文章为您提供了经验丰富的 Slack 工程师提供的良好背景信息，但本质上建议您遵循 electro-forge 文档中的内容：https ://www.electronforge.io/guides/framework-integration/react-with-typescript

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

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

要将托盘窗口中的操作与主应用程序窗口连接起来，请使用 IPC 消息在这 2 个渲染器之间进行通信，并使用主进程在两者之间中继消息。