Electron, официально известный как Atom Shell, позволяет людям использовать веб-технологии для создания кроссплатформенных приложений. К сожалению, Electron не поддерживает какую-либо платформу гибридных приложений, так что вот он, пользовательский интерфейс Onsen! В этом сообщении блога мы попытаемся интегрировать инфраструктуру пользовательского интерфейса Onsen в демонстрационное приложение Electron, чтобы увидеть, как оно работает.
Установка и настройка
Обратите внимание, что наша среда разработки выглядит следующим образом:
- Электрон: v0.36.2
- ОнсенUI: v1.3.14
- УгловойJS: v1.4.8
Установка
Во-первых, давайте установим Электрон. Мы можем просто использовать npm
для установки.
$ sudo npm install -g electron-prebuilt
Настройка проекта
Теперь нам нужно создать каталог /electron-sample
и сгенерировать файл package.json
, выполнив следующие команды:
$ mkdir /electron-sample
$ cd /electron-sample
$ npm init -y
В файле package.json
измените и включите main.js
для Electron.
Создать проект
Минимальное приложение Electron устроено следующим образом:
. ├── ./index.html ├── ./main.js └── ./package.json
main.js
должен содержать скрипт, работающий в основном процессе.
Прямо сейчас мы просто отображаем Hello World
в index.html
.
Исполнение
В корневом каталоге проекта (/electron-sample) мы можем запустить следующую команду:
$ electron .
Теперь вы должны увидеть что-то вроде этого.
Интеграция пользовательского интерфейса Onsen
Загрузите пользовательский интерфейс Onsen с помощью Bower:
$ sudo npm install -g bower
$ bower install onsenui
Теперь наш каталог должен выглядеть так.
.
├── ./bower_components
│ ├── ./OnsenUI
│ └── ./angular
├── ./index.html
├── ./main.js
└── ./package.json
Модификация
Давайте изменим index.html
, чтобы отобразить простую панель инструментов пользовательского интерфейса Onsen.
Запустите Electron, как раньше.
$ electron .
Отображение панели вкладок
Добавить панель вкладок очень просто с помощью пользовательского интерфейса Onsen. Давайте вставим его внутрь тега <body>
в index.html
следующим образом:
Таким же образом выполните команду electron .
. Нажмите на любую вкладку, чтобы увидеть переходы между страницами.
Совместимость
Я заметил, что некоторые элементы пользовательского интерфейса Onsen, такие как скользящее меню или карусель, конфликтовали с Electron из-за сценария Hammer. Кроме того, события касания/перелистывания имели проблемы совместимости с Electron. Надеемся, что эти проблемы будут решены в будущем выпуске, а также будет реализована поддержка директив AngularJS.
Вывод
Сегодня мы увидели, как быстро реализовать приложение Electron с пользовательским интерфейсом Onsen. Было несколько конфликтов, которые не должны влиять на разработку, если у вас хорошие навыки работы с AngularJS. Комбинация пользовательского интерфейса Onsen и Electron, безусловно, станет отличным выбором для разработки кроссплатформенных приложений.
Я надеюсь, что этот урок помог вам.
Удачного кодирования!