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

Question

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

Answer 1

为此你可以在 electron 中使用 Tray

引自托盘文档

Add icons and context menus to the system's notification area.

示例代码：

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

Answer 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 项目，并告诉 electron 从 CRA 加载 /build 文件夹。这适用于打包应用程序，但在开发过程中，我使用 electron-is-dev 在端口 3001 上加载 CRA 开发服务器。使用 .env 配置将 CRA 开发服务器使用的端口更改为 3001，因为 electron-forge 和 CRA 都希望默认使用 3000。

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

Answer 3

根据现有参数，您的最佳解决方案可能是在您的应用程序中有一个单独的路由（因为您不想要一个单独的 html 页面），并且在单击托盘图标时，连线它类似于

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

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

How to make an electron react app, which has 2 windows - a general one and one for the Tray

javascript

reactjs

webpack

electron

create-react-app