Меню приложения

Меню приложения — строка «Файл», «Правка», «Вид» вверху окна в Windows и Linux или вверху экрана в macOS. Electron по умолчанию ставит стандартное меню, а своё описывают массивом-шаблоном в главном процессе. Из меню удобно вызывать команды, которые нужны всегда: «Новая заметка», «Экспорт», «Выход».

Шаблон меню

Каждый элемент массива — пункт верхнего уровня, а в submenu лежат его вложенные пункты. Добавьте в main.js:

// main.js
const { app, BrowserWindow, Menu } = require('electron');
 
function createMenu() {
  const template = [
    {
      label: 'Файл',
      submenu: [
        { label: 'Новая заметка', accelerator: 'CmdOrCtrl+N', click: () => console.log('Новая заметка') },
        { type: 'separator' },
        { role: 'quit', label: 'Выход' },
      ],
    },
  ];
  Menu.setApplicationMenu(Menu.buildFromTemplate(template));
}
 
app.whenReady().then(() => {
  createMenu();
  createWindow();
});

buildFromTemplate превращает массив в меню, setApplicationMenu делает его меню программы. Нажмите Ctrl+N (Cmd+N на Mac) — в терминале появится «Новая заметка».

Свойства пункта

CmdOrCtrl означает Cmd в macOS и Ctrl в Windows и Linux.

Роли

Роль — стандартное действие, которое Electron выполняет сам: копирование, вставка, перезагрузка окна. Для целых разделов тоже есть роли:

// main.js
const template = [
  { label: 'Файл', submenu: [{ role: 'quit', label: 'Выход' }] },
  { role: 'editMenu', label: 'Правка' },
  { role: 'viewMenu', label: 'Вид' },
  { role: 'windowMenu', label: 'Окно' },
];

editMenu добавит «Отменить», «Вырезать», «Копировать», «Вставить», viewMenu — перезагрузку, DevTools и масштаб.

Команда для страницы

Новая заметка создаётся на странице, поэтому пункт меню отправляет ей сообщение:

// main.js
{
  label: 'Новая заметка',
  accelerator: 'CmdOrCtrl+N',
  click: (menuItem, win) => win?.webContents.send('menu:new-note'),
},

Второй аргумент click — окно, которое было активным. Если окон нет, он равен undefined, поэтому стоит ?..

// preload.js
onNewNote: (callback) => ipcRenderer.on('menu:new-note', () => callback()),

// renderer.js
window.notes.onNewNote(() => {
  text.value = '';
  text.focus();
});

Теперь Ctrl+N очищает поле и ставит в него курсор.

Меню в macOS

В macOS первый пункт меню всегда называется по имени программы. Для него есть роль appMenu:

// main.js
const isMac = process.platform === 'darwin';
const template = [
  ...(isMac ? [{ role: 'appMenu' }] : []),
  { label: 'Файл', submenu: [{ role: isMac ? 'close' : 'quit' }] },
];

Частая ошибка

Если заменить меню своим и не добавить раздел с ролью editMenu, в macOS перестанут работать Cmd+C и Cmd+V в полях ввода: там эти клавиши работают только через пункты меню. Всегда оставляйте в шаблоне раздел «Правка» с ролями.