Изучите пользовательские меню Electron

Electron

Введение. В последние годы с появлением таких технологий, как Electron/NW.js, также появился ряд отличных инструментов для настольных разработчиков, таких как VSCode, инструменты для разработчиков WeChat, Feibing (ICE) и так далее. Для разработчиков преимуществами настольных инструментов разработчика являются: возможности визуализации, доступ к API на уровне операционной системы и хороший опыт разработки и отладки. Поэтому я недавно подготовил систематическое углубленное изучение технологии Электрон и должным образом осадил полученные знания. Эта статья в основном описывает пользовательское меню Electron.

Разработка традиционного веб-приложения в основном не связана с меню, но в Electron он обеспечивает полный контроль над меню.Вы можете создавать настраиваемые меню, необходимые приложению, через модули Menu и MenuItem. В этой статье давайте обсудим, какие типы меню есть в Electron и как настроить меню с помощью кода?

Во-первых, давайте взглянем на введение в основное меню, чтобы каждый мог иметь предварительное представление об основных понятиях.

Введение в меню

Меню в Electron обычно делятся на три категории: меню приложений, контекстные меню и меню Dock (только для систем OSX).

Здесь мы берем инструменты разработчика WeChat в качестве примера (инструменты разработчика WeChat разработаны на основе NW.js, в основном для совместимости с Windows XP), чтобы представить значения этих меню соответственно. Откройте инструмент разработчика WeChat, вы можете четко найти расположение трех меню на следующем рисунке.

Значения этих трех меню:

  • Меню приложения: Меню приложения обычно находится в верхней части приложения и предоставляет различные операции, которые может использовать пользователь, такие как ярлыки программ, часто используемые папки и системные команды.
  • Контекстное меню: меню, которое вы видите, когда щелкаете правой кнопкой мыши внутри приложения.
  • Меню док-станции: доступно только в системах OSX, обычно с меньшим количеством функций, предоставляя особенно часто используемые функции.

После понимания основных концепций меню давайте посмотрим, как реализовать функции пользовательских меню с помощью кода.

меню приложений

Сначала взгляните на меню приложения, у Electron по умолчанию будет стандартное меню приложения, давайте посмотрим на эффект меню приложения по умолчанию:

Тщательный анализ структуры меню, включенной в меню приложения по умолчанию, выглядит следующим образом:

Если вы хотите настроить меню приложения, вам нужно реализовать определение всего меню самостоятельно. Здесь следует отметить, что доступ к меню приложения возможен только в основном процессе Electron. Например:

// main.js
const {
    app,
    Menu
 } = require('electron');

app.on('ready', () => {
    const appMenu = Menu.buildFromTemplate(menuTemplate);
    Menu.setApplicationMenu(appMenu);
});

Здесь мы ориентируемся на готовый блок кода приложения.Меню приложения задается через **Menu.setApplicationMenu**. Далее содержимое меню приложения систематически представлено с точки зрения шаблонов меню, разделителей, сочетаний клавиш и подменю.

Шаблон меню:

Шаблон меню представляет собой массив объектов, каждый объект будет определять независимое меню, которое будет отображаться в позиции Bar меню приложения, а отображаемый текст определяется свойством label.

Взяв этот код в качестве примера, мы определяем два меню, каждое из которых содержит два пункта меню. Пункт меню — это содержимое, которое раскрывается, когда мы нажимаем на меню.

const template = [
    {
        label: 'Edit App',
        submenu: [
            {
                label: 'Undo'
            },
            {
                label: 'Redo'
            }
        ]
    },
    {
        label: 'View App',
        submenu: [
            {
                label: 'Reload'
            },
            {
                label: 'Toggle Full Screen'
            }
        ]
    }
];

Соответствующий эффект:

Здесь стоит отметить: для OSX первым пунктом меню приложения является имя приложения, что приведет к перезаписи меню «Редактировать приложение». Поэтому нам нужна специальная обработка для OSX, которая обычно:

if (process.platform === 'darwin') {
    template.unshift({
        label: app.getName(),
        submenu: [
            {
                label: 'Quit',
                accelerator: 'CmdOrCtrl+Q',
                click() {
                    app.quit();
                }
            }
        ]
    });
}

Разделитель:

Разделитель может быть определен между двумя пунктами меню с помощью типа: «разделитель».Функция разделителя заключается в разделении пунктов меню с похожими функциями для лучшей работы.

const template = [
    {
        label: 'Edit App',
        submenu: [
            {
                label: 'Undo'
            },
            {
                type: 'separator'
            },
            {
                label: 'Redo'
            }
        ]
    }
];

Как видите, между Undo и Redo появляется разделитель.

Далее давайте рассмотрим часто используемые сочетания клавиш и встроенные ролевые функции.

горячая клавиша:

В ежедневном процессе разработки мы используем множество сочетаний клавиш, таких как Ctrl + A, чтобы выделить все, Ctrl + C, чтобы скопировать, и Ctrl + V, чтобы вставить. Сочетания клавиш, которые мы можем выбрать:

  • Команда (сокращенно Cmd)
  • Контроль (сокращенно Ctrl)
  • CommandOrControl (сокращенно CmdOrCtrl)
  • Alt
  • Option
  • AltGr
  • Shift
  • Super

Давайте изменим приведенный выше код и добавим сочетания клавиш.Сочетания клавиш определяются свойством ускорителя.

const template = [
    {
        label: 'Edit App',
        submenu: [
            {
                label: 'Undo',
                accelerator: 'CmdOrCtrl+Z'
            },
            {
                type: 'separator'
            },
            {
                label: 'Redo',
                accelerator: 'Shift+CmdOrCtrl+Z',
            }
        ]
    }
];

После добавления ярлыка вы можете спросить, нажмите на меню или как вызвать соответствующую логику за ярлыком? Это может быть написано функцией обратного вызова click () или использовать встроенную пользовательскую роль, указанную Electron. Мы продолжим модифицировать приведенный выше код:

const template = [
    {
        label: 'Edit App',
        submenu: [
            {
                label: 'Undo',
                accelerator: 'CmdOrCtrl+Z',
                role: 'undo'
            },
            {
                type: 'separator'
            },
            {
                label: 'Redo',
                accelerator: 'Shift+CmdOrCtrl+Z',
                role: 'redo'
            }
        ]
    }
];

После добавления роли вы можете обнаружить, что есть соответствующий эффект работы.Все встроенные роли Электрона следующие:

  • отменить: отменить
  • повторить: повторить
  • резать резать
  • копировать: копировать
  • паста: паста
  • pasteAndMatchStyle
  • selectAll: выбрать все
  • удалить: удалить
  • свернуть: текущее окно свернуто
  • закрыть: закрыть текущее окно
  • выйти: выйти из приложения
  • перезагрузить: обновить текущее окно
  • forceReload: Принудительно обновить текущее окно, игнорируя кеш.
  • toggleDevTools: включить или выключить инструменты разработки
  • togglefullscreen: включить полноэкранный режим
  • resetZoom: сбросить размер окна
  • zoomIn: 10% масштаба окна.
  • zoomOut: Уменьшить масштаб окна на 10%.

Полную роль можно посмотреть:электрон JS.org/docs/API/Что…

Подменю:

Мы добавляем новое меню Sub Menu на основе предыдущего. Вы можете видеть, что пункты меню в этом меню добавили атрибут submenu. С помощью этого атрибута мы можем продолжить определение подменю. Здесь мы определяем Submenu item1 и Submenu пункт2.

const template = [
    {
        label: 'Edit App',
        submenu: [
            {
                label: 'Undo',
                accelerator: 'CmdOrCtrl+Z',
                role: 'undo'
            },
            {
                type: 'separator'
            },
            {
                label: 'Redo',
                accelerator: 'Shift+CmdOrCtrl+Z',
                role: 'redo'
            }
        ]
    },
    {
        label: 'Sub Menu',
        submenu: [
            {
                label: 'Submenu item',
                submenu: [
                    {
                        label: 'Submenu item1'
                    },
                    {
                        label: 'Submenu item2'
                    }
                ]
            }
        ]
    },
];

Эффект подменю следующий:

На этом этапе вводится самое важное содержание меню приложения, далее давайте посмотрим на контекстное меню.

контекстное меню

Контекстное меню — это то, что мы обычно называем контекстным меню, которое имеет эффект отображения в начале статьи. Следует отметить, что контекстное меню должно быть реализовано в процессе рендеринга. В процессе рендеринга модуль основного процесса необходимо вызывать через удаленный модуль.

Реализовать контекстное меню очень просто, вам нужно только прослушать событие contextmenu, а затем отобразить меню.

//renderer.js
const { remote } = require('electron');
const { Menu } = remote;

const createContextMenu = () => {
    const contextTemplate = [
        {
            label: 'Cut',
            role: 'cut'
        },
        {
            label: 'Copy',
            role: 'copy'
        }
    ];
    const contextMenu = Menu.buildFromTemplate(contextTemplate);
    return contextMenu;
}

window.addEventListener('contextmenu', (event) => {
    event.preventDefault();
    const contextMenu = createContextMenu();
    contextMenu.popup({
        window: remote.getCurrentWindow()
    });
}, false);

Док-меню

Наконец, давайте взглянем на Dock меню.Реализация Dock меню также находится в основном процессе.Идея реализации в основном похожа на предыдущую.Ядро реализовано через API app.dock.setMenu.

// main.js
const createDockMenu = () => {
    const dockTempalte = [
        {
            label: 'New Window',
            click () {
                console.log('New Window');
            }
        }, {
            label: 'New Window with Settings',
            submenu: [
                { label: 'Basic' },
                { label: 'Pro' }
            ]
        },
        {
            label: 'New Command...'
        }
    ];

    const dockMenu = Menu.buildFromTemplate(dockTempalte);
    app.dock.setMenu(dockMenu);
}

app.on('ready', function() {
    createDockMenu();
});

Действие меню Dock выглядит следующим образом:

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

Мой личный блог:GitHub.com/CPS Elvis/ был бы…

Если вы хотите узнать больше о галантерейных товарах, вы можете отсканировать код и подписаться на мой официальный аккаунт: частота отправки одной статьи в неделю.

Категории