Блог

Я хочу создать приложение Electronjs с некоторыми шаблонами react. Я думаю, что лучшим является тот, у которого больше всего звезд в github, но я открыт для предложений. Моя цель — иметь одно окно, которое будет основным, и другое, которое будет отображаться только тогда, когда пользователь нажимает на лоток (https://github.com/sfatihk/electron-tray-window ). Каково наилучшее решение, без использования второго html и, если возможно, без извлечения.

Недавно я исследовал методы интеграции 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 в один проект. Вместо этого я вложил проект CRA в electron-forge, и я говорю electron загрузить папку / build из CRA. Это работает для упаковки приложения, но во время разработки я использую electron-is-dev для загрузки сервера CRA dev на порт 3001. Используйте конфигурацию .env, чтобы изменить порт, используемый сервером разработки CRA, на 3001, потому что electron-forge и CRA хотят использовать 3000 по умолчанию.

Чтобы связать действия из вашего окна в трее с главным окном приложения, используйте сообщения IPC для связи между этими 2 средствами визуализации, а основной процесс между ними для передачи сообщений.

Вашим лучшим решением, учитывая существующие параметры, вероятно, будет иметь отдельный маршрут в вашем приложении (поскольку вам не нужна отдельная html-страница), и при нажатии на значок в трее подключите его к чему-то вроде

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

Для этого вы можете использовать Tray в 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)
})