如何制作一个 electron 反应应用程序，它有 2 个 windows - 一个通用的一个和一个用于托盘

Question

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

Answer 1

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

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

这是最简单的集成，您将在电子锻造中站稳脚跟，而不是 GitHub 样板。

然而，我从一个 create-react-app 项目开始。 When combining 2 frameworks, each with large package.json & lots of build tooling I do not like to merge their package.json in a single project. 相反，我在 electron-forge 中嵌套了一个 CRA 项目，并告诉 electron 从 CRA 中加载 /build 文件夹。 这适用于打包应用程序，但在开发过程中，我使用 electron-is-dev 在端口 3001 上加载 CRA 开发服务器。 使用 a.env config 将 CRA 开发服务器使用的端口更改为 3001，因为 electron-forge 和 CRA 都希望默认使用 3000。

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

Answer 2

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

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

Answer 3

您可以为此使用 electron 中的托盘

从托盘文档中引用

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

示例代码：

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)
})