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

«Электрон» — это инструмент для преобразования веб-приложений в кросс-платформенные десктопные приложения. «Электрон» может создавать приложения для «Виндоус», «Мак ОС» (поддерживаются архитектуры «Интел» и «Эпл Кремний») и «Линукс». Инструмент полностью бесплатен, прост в использовании и позволяет выполнять расширенную настройку с помощью «Ява Скрипт» (если это необходимо).

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

«Электрон» можно установить через НПМ или загрузить из интернета. Чтобы упростить работу, мы интегрировали конструктор приложений «Электрон» прямо в диспетчер приложений.

С его помощью вы можете загрузить двоичные файлы «Электрон» для выбранной целевой платформы, а затем создать готовое к использованию приложение прямо из приложения «Вердж3Д».

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

None: Не устанавливать бинарные файлы. Используйте утилиту НПМ и инструкции ниже, чтобы продолжить создание приложения.
Windows (64-bit): «Виндоус» 7 или более поздняя версия, 64 бит.
macOS (64-bit): «Мак ОС» 10.10 («Йосемите») или более поздняя версия для «Маков» на платформе «Интел».
macOS App Store (64-bit): Версия адаптированная для магазина «Мак Апп Стор». Работает на «Мак ОС» 10.10 («Йосемите») или более поздней версии, на платформе «Интел».
Linux (64-bit): «Линукс», 64 бит, такие как «Убунту», «Федора», «ОпенСусе», или «Арч».
Windows (ARM): «Виндоус» 10 на устройствах с 64-разрядными процессорами АРМ.
macOS (ARM): «Мак ОС» 11 (Big Sur) или более поздняя версия, компьютеры «Эпл Кремний» (также известные как M1/M2).
macOS App Store (ARM): Специальная версия для «Мак Апп Стор». Работает на «Мак ОС» 11 («Биг Сур») или более поздней версии, на компьютерах «Эпл Кремний» (также известных как М1/М2).
Linux (ARM): «Линукс» на 64-битных устройствах АРМ.
Windows (32-bit): «Виндоус» 7 или более поздняя версия, 32 бит.
Linux (32-bit): «Линукс», 32 бит версия.

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

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

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

Выполните ваше приложение, запустив electron.exe (или Electron.app на «Мак ОС», или electron на «Линуксе»), расположенный в каталоге app.

Имейте в виду, что поскольку ваше приложение не подписано, и «Виндоус», и «Мак ОС» (но не «Линукс») не позволят его запустить. Например, в «Виндоус» вы увидите следующее диалоговое окно Windows protected your PC:

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

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

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

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

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

Чтобы полностью отключить меню приложения, вставьте следующую строку в 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: 'Софт Эйт Софт Website',
                click() {
                    shell.openExternal('https://www.soft8soft.com');
                }
            },
            {
                label: 'Exit',
                click() {
                    app.quit()
                }
            }
        ]
    }]);
    Menu.setApplicationMenu(menu);

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

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

Расширенная разработка «Электрон» с НПМ

Для работы с «Электроном» вам понадобится утилита npm, которая является частью среды выполнения «Ноуд-Джей-Эс». Вы можете установить ее, следуя этим инструкциям.

Более подробную информацию об использовании НПМ можно найти в документации «Электрон».

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

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