Недавно я изучал разработку приложений с помощью JavaScript, и могу сказать, что это действительно круто, менее напряженно и не так сложно, как написание приложений на таких языках, как Java, Kotlin и т. Д.
Прежде чем мы начнем, позвольте мне пролить свет на то, что такое Framework7 и Cordova.
Что такое Framework7?
Framework7 - это бесплатная платформа с открытым исходным кодом для разработки мобильных, настольных или веб-приложений с естественным внешним видом. Это также незаменимый инструмент для создания прототипов, позволяющий как можно скорее показать рабочий прототип приложения, если вам это нужно.
Недавно я потратил некоторое время на его оценку и был удивлен, увидев, что теперь он поддерживает Material Design, а также несколько новых компонентов. Если вы ищете платформу для мобильных приложений, чтобы быстро приступить к созданию красивых приложений, вам обязательно стоит попробовать Framework7. Он не полагается на какой-либо конкретный фреймворк, кроме собственного фреймворка для манипуляций с DOM (DOM7), считайте его оптимизированной для мобильных устройств версией jQuery. Теперь его можно использовать с другими популярными фреймворками, такими как React.JS, Vue.JS, Angular и т. Д.
Функции
- Управление просмотром / Поддержка навигации - вид представляет собой стопку страниц с собственной навигацией, историей и настройками.
- События уровня страницы
Встроенная библиотека FastClick для обработки задержек кликов для сенсорного интерфейса.
- Простой, знакомый синтаксис для всех, кто знаком с jQuery, чтобы быстро приступить к работе
- Независимость от фреймворка - может использоваться с React, Angular и другими шаблонизаторами, такими как Handlebars.
- Множество предварительно стилизованных виджетов / компонентов. Некоторые примеры перечислены ниже, но посмотрите их приложения для кухонной мойки для iOS и Android, чтобы увидеть их все для каждой платформы:
- Панель поиска со встроенной фильтрацией
- Экран входа в систему
- Всплывающие окна
- Оверлеи и сборщики
- Разделение основных / подробных видов
- Боковые панели (левая / правая с возможностью перехода)
- Браузер фотографий
- Просмотр текстовых сообщений
- Многочисленные варианты списка (список мультимедиа, список контактов, сортируемый список, виртуальный список)
- Swipeouts (элемент списка для удаления и т. Д.)
- Аккордеоны
- Вкладки
- Прелоадеры (спиннеры)
- Плавающая кнопка действия
- Карты
- Чипсы (Материальный дизайн)
- Компоненты формы
- Потяните для обновления
- Встроенная система компоновки сеток
- Настраиваемый
- Темы и цветовые решения
- Многочисленные параметры для простой обработки различных сценариев (например, скрытие панелей навигации и панелей инструментов при прокрутке и т. Д.)
- Гибкий маршрутизатор - загружайте страницы из шаблонов, используя Ajax, встраивая или динамически через гибкий маршрутизатор API.
mainView.router.load({url: 'list.html'}); mainView.router.load({ template: Template7.templates.listTemplate, context: resp.results });
- Исполнитель
- Аппаратное ускорение анимации и переходов CSS
- Поддержка отложенной загрузки
<div data-background="path/to/image.jpg" class="lazy">
- Поддержка виртуального списка
- Использует собственную прокрутку
- Настраиваемое кеширование HTML для более быстрой загрузки страницы
- Стили, похожие на бутстрап
- API плагинов
- Расширьте рамки и поделитесь с сообществом. Уже включает в себя множество полезных плагинов, перечисленных на их сайте, таких как экран приветствия / учебника, индексированный список прокрутки, 3D-панели, дополнительные настраиваемые клавиатуры и многое другое.
- Иконки - включает в себя некоторые базовые (меню, поиск), но вы можете использовать с ним любой иконочный шрифт или библиотеку, например Font Awesome или Ionicons. Ознакомьтесь со стартовыми шаблонами на noodl.io, чтобы увидеть больше примеров использования иконок.
- Хорошая документация, наглядные примеры, стартовые приложения и отличная поддержка на форуме, часто самим автором.
Что такое Кордова?
Apache Cordova - это среда разработки мобильных приложений, изначально созданная Nitobi. Adobe Systems приобрела Nitobi в 2011 году, она была переименована в PhoneGap, а позже выпустила версию программного обеспечения с открытым исходным кодом под названием Apache Cordova.
Думаю, объяснений хватит, давайте перейдем к делу. Прежде чем мы начнем писать какой-либо код, у вас должно быть установлено и настроено следующее:
Перейдите по этой ссылке, чтобы настроить среду разработки. например, переменные пути и среды и т. д. для пользователей Windows.
- Узел и NPM
- Git
- Кордова
- Android Studio (SDK) и инструменты Android
- Джава
У вас также должен быть установлен NVM (Диспетчер версий узлов). Загрузить ссылку для загрузки нажмите здесь
Если все настроено и работает, приступим.
1. Запустите командную строку или терминал.
введите «npm install framework7-cli -g» и введите, чтобы установить framework7-cli.
2. В командной строке или в терминале.
введите «npm install cordova -g» и введите, чтобы установить cordova.
3. В командной строке или в терминале.
введите «mkdir my_first_app && cd my_first_app», нажмите Enter и введите «framework7 create», нажмите Enter.
4. После ввода «framework7 create» в командной строке или в терминале интерфейс командной строки Framework 7 задаст вам вопросы о том, как настроить ваше приложение.
выберите следующие параметры:
1. Приложение Cordova (предназначено для iOS и Android).
2. Введите любое имя, которое вы хотите, я назову свое EmmanuelApp, затем нажмите Enter.
3. Просто нажмите "Ввод" в пакете приложения (идентификатор пакета).
4. Нажмите "a", чтобы переключить все, и нажмите "Ввод".
5. Выберите Framework7 Core.
6. Виды с вкладками .
7. Нет сборщика.
8. Нет, использовать цветовую тему по умолчанию.
9. Да, включить шрифты значков.
Дайте ему время закончить свои дела.
5. Откройте папку в любом текстовом редакторе. Прежде чем мы создадим приложение в виде APK, мы предварительно его предварительно увидим в браузере.
Чтобы просмотреть его в браузере, просто введите npm install http-serve -g в терминале или в командной строке, чтобы установить http- обслуживать.
6. Предварительно просматривая приложение в браузере, убедитесь, что http-serve установлен правильно, а затем убедитесь, что вы находитесь в каталоге приложения. В терминале или в командной строке введите «http-serve», он должен предоставить вам URL-адрес для предварительного просмотра приложения в браузере.
7.Предварительный просмотр приложения в браузере после посещения данного URL-адреса, вы захотите добавить www в качестве пути, например, http://192.168.56.1:8081/www/.
После проверки его из браузер остановит подачу, нажав CTRL-C
8. Теперь мы можем создать приложение для Android или iOS, просто введите
'npm run build-cordova-android' или npm run build-cordova-ios '
Я буду создавать свое приложение для Android, пусть строительный процесс!
После завершения сборки для установки приложения на ваше устройство просто перейдите к 'cordova \ platform \ android \ app \ build \ output \ apk \ debug \ app-debug.apk' внутри каталога my_first_app и скопируйте 'app-debug.apk' на свое устройство и установите его. Имя приложения в папке отладки будет «app-debug.apk». Если вы хотите, вы можете переименовать файл .apk во все, что захотите.
Вот приложение, устанавливаемое на реальное устройство:
Framework7 - это что-то действительно интересное и легкое в освоении. Надеюсь, вы найдете время, чтобы узнать о нем больше.
Спасибо, что ознакомились с моей историей !!!
Если она вам понравилась, пожалуйста, подпишитесь на меня. Средний для более интересных историй.