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

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

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

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

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

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

None: Собрать npm-пакет вместо готовой к использованию сборки. Для опытных пользователей, знакомых с NPM. Следуйте инструкциям ниже, чтобы продолжить создание приложения.
Windows (Intel, AMD): Windows 10 или более поздняя версия на устройствах с 64-разрядными процессорами Intel/AMD.
Windows (ARM): Windows 10 или более поздняя версия на устройствах с 64-разрядными процессорами ARM.
macOS (Apple Silicon): macOS 11 (Big Sur) или более поздняя версия, компьютеры Apple Silicon (также известные как M1-M5).
macOS (64-bit): macOS 11 (Big Sur) или более поздняя версия на платформе Intel.
Linux (Intel, AMD): Linux на устройствах с 64-разрядными процессорами Intel/AMD (Ubuntu, Fedora, RedHat).
Linux (ARM): Linux на устройствах 64-разрядными процессорами ARM.

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

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

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

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

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

Нажмите на ссылку More info («Подробнее»), затем Run anyway («Выполнить в любом случае»), чтобы запустить приложение. Чтобы решить эту проблему, особенно когда вы распространяете свою работу среди конечных пользователей, ваше приложение должно быть подписано. Подробнее смотрите в разделе подписание кода документации Electron.

В macOS вы можете получить сообщение, что приложение повреждено (хотя это не так):

В этом случае вам потребуется очистить атрибут нахождения ZIP-архива на карантине (с помощью приложения Terminal):


      xattr -r -d com.apple.quarantine my_awesome_app.zip

а затем снова распаковать и запустить приложение.

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

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

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

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

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


    win.removeMenu();

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


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

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


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

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


    const 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 можно скачать здесь.

Поместите модифицированный файл main.js в папку с приложение и снова его запустите. Вы должны получить следующее:

Продвинутая разработка Electron-приложений с помощью NPM

С помощью утилиты npm вы можете сделать разработку Electron-приложений более эффективной. Вы можете установить её, следуя этим инструкциям.

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

Изменение файлов шаблона приложений

Файлы шаблона, используемого для создания приложений на основе Electron расположены в подпапке manager/templates/Electron внутри установочной папки Verge3D. Мы не рекомендуем редактировать эти файлы напрямую, однако вы легко можете заменить любой из них, поместив файл с тем же именем внутри папки разрабатываемого приложения. Например, чтобы заменить шаблонный скрипт main.js, используемый для инициализации приложения, своей собственной реализацией, скопируйте этот файл из папки с шаблоном (либо создайте новый с нуля) и разместите внутри папки с приложением:

Создание приложений при отсутствии подключения к интернету

Для создания готового приложения, диспетчеру приложений требуется загрузить одну из сборок Electron с серверов Soft8Soft, для чего требуется соединение к интернету. Если соединения нет, либо оно ограничено (прокси-сервером или файрволлом), вам потребуется скачать сборки вручную, чтобы диспетчер приложений смог найти их на локальном носителе.

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

Затем скопируйте скачанные сборки в папку с настройками диспетчера приложений (находится в пользовательской папке). Разместите их как есть (не распаковывая!):

Windows — AppData\Roaming\Soft8Soft\Имя Продукта
macOS — Library/Application Support/Имя Продукта
Linux — .config/имя_продукта

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

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

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