如何制作一個 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)
})