Создание десктопных приложений с использованием Electron

Electron - это инструмент для преобразования веб-приложений в кросс-платформенные десктопные приложения. Electron может создавать приложения для Windows, macOS (поддерживаются архитектуры Intel и Apple Silicon) и Linux. Инструмент полностью бесплатен, прост в использовании и позволяет выполнять расширенную настройку с помощью JavaScript (если вам это необходимо).

Создание приложения

Electron можно установить через NPM или загрузить из интернета. Чтобы упростить работу, мы интегрировали конструктор приложений Electron прямо в App Manager.

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

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

None
Не устанавливайте никаких двоичных файлов. Используйте утилиту NPM и инструкции ниже, чтобы продолжить создание вашего приложения.
Windows (64-bit)
Windows 7 или более поздняя версия, 64 бит.
macOS (64-bit)
macOS 10.10 (Yosemite) или более поздняя версия, Intel Macs.
macOS App Store (64-bit)
Уменьшенная версия для Mac App Store. Работает на macOS 10.10 (Yosemite) или более поздней версии, Intel Mac.
Linux (64-bit)
Linux, 64 bit, такие как Ubuntu, Fedora, OpenSuse, или Arch.
Windows (ARM)
Windows 10 на устройствах с 64-разрядными процессорами ARM.
macOS (ARM)
macOS 11 (Big Sur) или более поздняя версия, компьютеры Apple Silicon (также известный как M1) Mac.
macOS App Store (ARM)
Уменьшенная версия для Mac App Store. Работает на macOS 11 (Big Sur) или более поздней версии, компьютерах Apple Silicon (также известных как M1).
Linux (ARM)
Linux на 64-битных устройствах ARM.
Windows (32-bit)
Windows 7 или более поздняя версия, 32 bit.
Linux (32-bit)
Linux, 32 bit версия.

Из-за ограничений архитектуры ОС Windows невозможно создавать приложения для macOS на этой системе. Вместо этого используйте macOS или Linux.

Когда ваше приложение будет готово, скачайте его, а затем распакуйте zip-архив в какой-нибудь каталог.

Запуск вашего приложения

Выполните ваше приложение, запустив electron.exe (или Electron.app на macOS, или electron на Linux), расположенный в каталоге app.

Имейте в виду, что поскольку ваше приложение не подписано, и Windows, и macOS (но не Linux) не позволят его запустить. Например, в Windows вы увидите следующее диалоговое окно Windows защитила ваш компьютер:

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

Настройка дополнительных параметров приложения

Изменение имени и значка приложения

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

Настройка меню

Чтобы полностью отключить меню приложения, вставьте следующую строку в main.js сразу после метода loadFile():

win.removeMenu();

Чтобы создать собственное меню, сначала подключите модуль Menu к вашему приложению:

const { Menu } = require('electron');

Мы будем использовать модуль shell для открытия внешнего сайта при нажатии на меню. Поэтому добавьте модуль shell и сюда:

const { shell } = require('electron');

Затем добавьте следующий код в main.js сразу после метода loadFile():

var menu = Menu.buildFromTemplate([{ label: 'Menu', submenu: [ { label: 'Soft8Soft Website', click() { shell.openExternal('https://www.soft8soft.com'); } }, { label: 'Exit', click() { app.quit() } } ] }]); Menu.setApplicationMenu(menu);

Пример измененного файла main.js можно посмотреть здесь.

Запустите ваше приложение, и вы должны получить следующее:

Расширенная разработка Electron с NPM

Для работы с Electron вам понадобится утилита npm, которая является частью среды выполнения Node.js. Вы можете установить ее, следуя этим инструкциям.

Более подробную информацию об использовании NPM можно найти в документации Electron.

Остались вопросы?

Задайте их на нашем форуме!