В этой главе мы узнаем, как настроить базовую среду, чтобы приложения легко создавались. Хотя PhoneGap поддерживает создание приложений в автономном режиме с использованием интерфейса командной строки Cordova и механизма репозитория Github , мы сосредоточимся на процедуре минимальных усилий.
Мы предполагаем, что вы хорошо разбираетесь в веб-технологиях, и ваше веб-приложение готово к отправке в виде приложения. Поскольку PhoneGap поддерживает только HTML, CSS и JavaScript, приложение обязательно должно быть создано только с использованием этих технологий.
С точки зрения разработчика, в приложение должны быть включены следующие элементы:
- Конфигурационные файлы
- Иконки для приложения
- Информация или контент (созданный с использованием веб-технологий)
конфигурация
Наше веб-приложение будет нуждаться только в одном файле конфигурации, который должен соответствовать всем необходимым параметрам. Его имя — config.xml. Этот файл содержит всю необходимую информацию, необходимую для компиляции приложения.
Давайте посмотрим config.xml для нашего примера —
<?xml version = "1.0" encoding = "UTF-8"?> <widget xmlns = "http://www.w3.org/ns/widgets" xmlns:gap = "http://phonegap.com/ns/1.0" id = "com.tutorialspoint.onlineviewer" version = "1.0"> <name>Tutorials Point</name> <description> Tutorials Point Online Viewer </description> <author href = "http://tutorialspoint.com" email = "[email protected]"> Tutorials Point </author> <preference name = "permissions" value = "none"/> <icon src = "res/icon/android/drawable-ldpi/tp_icon.png" gap:platform = "android" gap:qualifier = "ldpi" /> <icon src = "res/icon/android/drawable-mdpi/tp_icon.png" gap:platform = "android" gap:qualifier = "mdpi" /> <icon src = "res/icon/android/drawable-hdpi/tp_icon.png" gap:platform = "android" gap:qualifier = "hdpi" /> <icon src = "res/icon/android/drawable-xhdpi/tp_icon.png" gap:platform = "android" gap:qualifier = "xhdpi" /> <icon src = "res/icon/android/drawable-xxhdpi/tp_icon.png" gap:platform = "android" gap:qualifier = "xxhdpi" /> <icon src = "res/icon/ios/Icon-72.png" gap:platform = "ios" gap:qualifier = ""/> <icon src = "res/icon/ios/icon-57.png" gap:platform = "ios" width = "57" height = "57" /> <icon src = "res/icon/ios/icon-72.png" gap:platform = "ios" width = "72" height = "72" /> <icon src = "res/icon/ios/icon-57-2x.png" gap:platform = "ios" width = "114" height = "114" /> <icon src = "res/icon/ios/icon-72-2x.png" gap:platform = "ios" width = "144" height = "144" /> </widget>
Все содержимое конфигурации заключено в тег <widget>. Краткое описание этого следующее:
<widget id = ”app_id”>
id — это ваш зарезервированный идентификатор приложения в различных магазинах приложений. Это в стиле обратного доменного имени, т.е. com.tutorialspoint.onlineviewer и т. Д.
<widget version = "x.y.z">
Это номер версии приложения в формате xyz, где (x, y, z) являются положительными целыми числами, то есть 1.0.0, он представляет систему версий major.minor.patch.
<name> App Name</name>
Это название приложения, которое будет отображаться под значком приложения на экране мобильного телефона. Ваше приложение можно искать, используя это имя.
<description> My First Web App </description>
Это краткое описание того, о чем приложение, и что это такое.
<author> Author_Name </author>
Это поле содержит имя создателя или программиста, как правило, устанавливается на имя организации, которая запускает это приложение.
<preferences name = "permissions" value = "none">
Тег предпочтений используется для установки различных параметров, таких как FullScreen, BackgroundColor и Orientation для приложения. Эти опции находятся в паре имя и значение. Например: name = «FullScreen» value = «true» и т. Д. Поскольку нам не требуются какие-либо из этих предварительных настроек, мы просто не назначаем им никаких разрешений.
<icon>
Позволяет нам добавлять иконки в наши приложения. Это может быть закодировано различными способами, но так как мы изучаем краткий путь всего, так здесь это. .Src определяет путь к значку изображения. Разрыв: платформа определяет, для какой платформы ОС этот значок будет использоваться. Разрыв: квалификатор является плотность, которая используется на устройствах Android. Устройства iOS используют параметры ширины и высоты .
Иконки
Существуют устройства разных размеров, имеющие одинаковую мобильную операционную систему, поэтому, чтобы ориентироваться на аудиторию одной платформы, необходимо предоставить значки всех типов мобильных телефонов. Важно, чтобы мы готовили значки точных форм и размеров в соответствии с требованиями конкретной мобильной операционной системы.
Здесь мы используем папки res / icon / ios и res / icon / android / drawable-xxxx. ,
Чтобы быстро выполнить эту работу, вы можете создать логотип размером 1024×1024 и войти на makeappicon.com. Этот сайт поможет вам мгновенно создавать логотипы любых размеров для платформ Android и iOS.
После предоставления изображения значка размером 1024×1024, makeappicon.com должен предоставить следующее:
Иконки для iOS
Иконки для Android
Этот веб-сайт предоставляет вам возможность отправить все логотипы в формате zip по электронной почте к вашему порогу (иначе, конечно, по электронной почте!)