Учебник: как создавать приложения HTML5 на Windows Phone благодаря PhoneGap
Сначала мы увидим в этой статье, каковы дополнительные значения PhoneGap для приложений HTML5. Затем мы узнаем, как создать наш самый первый проект, в котором мы получим значения акселерометра из нашего кода JavaScript. Наконец, мы рассмотрим полный пример игрового HTML5, почти полностью перенесенный в PhoneGap, чтобы использовать акселерометр, доступный на телефонах Windows.
- Вступление
- PhoneGap: рамки, заполняющие пробел
- Давайте создадим наш первый проект PhoneGap
- Получение значений акселерометра из JavaScript
- Обзор полного примера с игрой HTML5 Platformer
- Форсировать альбомную ориентацию
- Обработка различных разрешений
- Загрузка уровней с вызовами в файловую систему вместо использования XHR
- Модификация игрового процесса для использования акселерометра
- Скриншоты результата и FPS на некоторых телефонах
- Полное решение Visual Studio для загрузки
- Вывод
Вступление
Обновление Mango для Windows Phone пришло с поддержкой HTML5 благодаря встроенному браузеру IE9 . Как и настольная версия, мобильная версия IE9 обеспечивает аппаратное ускорение с помощью графического процессора вашего Windows Phone. Таким образом, в сочетании с JavaScript IE9 теперь может служить основой для интересного пользовательского опыта, обычно зарезервированного для «нативного кода».
Преимущества использования HTML5 в качестве платформы разработки — это относительное обещание легко повторно использовать части кода на других совместимых платформах, таких как Android или iOS. В последние месяцы HTML5 вызвал много интереса в экосистеме разработчиков мобильных устройств.
Тем не менее, даже если спецификации HTML5 / CSS3 / SVG и JavaScript сильно изменились за последние месяцы, им все еще не хватает некоторых основных функций для создания мобильных приложений . Действительно, телефон или планшет обладает такими специфическими возможностями, как: GPS, акселерометр, камера, отправка SMS, доступ к контактам и т. Д.
Чтобы получить доступ к этим возможностям из кода JavaScript, W3C уже некоторое время работает над тем, что мы называем « Device APIs » или DAP . К сожалению, мы можем считать, что в настоящее время не существует реализации этих спецификаций, так как этот документ, кажется, подтверждает: Стандарты для веб-приложений на мобильных устройствах: текущее состояние в ноябре 2011 года и план действий . Mozilla начала интересную работу с более или менее разветвления этих спецификаций через то, что они называют веб-API для поддержки Boot To Gecko проект. Тогда это хорошая новость, так как форма реализации, кажется, начинается с продолжающихся дискуссий с W3C. Однако, даже если дела начнут развиваться медленно, нам, вероятно, придется подождать несколько лет, прежде чем стабильная официальная спецификация W3C будет широко внедрена на всех платформах.
Итак, вопрос в том, что мы должны делать в это время? Может ли HTML5 действительно удовлетворить эти сценарии?
PhoneGap: рамки, заполняющие пробел
В ожидании реальных стандартизированных спецификаций у нас нет выбора: нам нужно создать мосты между JavaScript и нативным кодом целевой платформы, чтобы иметь доступ к ее возможностям. Идея заключается в следующем: взять родные языки каждой платформы (C #, Objective-C и Java) и создать платформу с этими языками, которая предоставит интерфейсы разработчику JavaScript.
Это именно то, что делает PhoneGap . Давайте возьмем случай с Windows Phone, который является основной темой этой статьи. Проект PhoneGap в Windows Phone — это просто приложение Silverlight, содержащее элемент управления WebBrowser (и, следовательно, IE9), а также сборку Silverlight, написанную на C #, которая выполняет работу по доступу к акселерометру, GPS, контактам, камере и т. Д. Таким образом, как разработчик JavaScript, вы будете использовать DLL с именем WP7GapClassLib.dll (время выполнения ядра PhoneGap), даже не зная об этом, используя код, встроенный в phonegap-1.3.0.js. файл. Эта DLL содержит некоторый код C #, который выполняет вызовы среды выполнения Silverlight, доступной на телефоне. Поскольку среда выполнения имеет доступ ко всем возможностям телефона, JavaScript также подойдет. В этом случае библиотека JavaScript будет действовать в качестве шлюза между обоими мирами. Более того, хорошая польза от использования этой библиотеки в том, что ваш код будет работать в большинстве случаев как есть на версиях PhoneGap для Android или iOS. PhoneGap предлагает интересную форму переносимости.
Обратите внимание на то, что поддержка PhoneGap для Windows Phone теперь полностью завершена с последней версии 1.3.0:
Наконец, PhoneGap предлагает еще один интересный сервис. Он встраивает ваши ресурсы .js, .css, .html, .png в свои проекты, чтобы упаковать его как классическое приложение. Таким образом, вы можете использовать PhoneGap для упаковки вашего приложения HTML5 для магазинов различных приложений. Это, например, случай приложения SujiQ для Windows Phone, созданного с использованием этого подхода.
Давайте создадим наш первый проект PhoneGap
Предпосылки
Вот самые первые шаги, которые вы должны выполнить:
- Загрузить Windows Phone SDK: Windows Phone SDK
- Загрузите последнюю версию телефона (1.3.0 сегодня) на их сайте: http://phonegap.com/
- Распакуйте загруженный файл
- Скопируйте файлы PhoneGapStarter.zip и PhoneGapCustom.zip в \ Documents \ Visual Studio 2010 \ Templates \ ProjectTemplates
Файл-> Новый проект
Как только предыдущие шаги будут выполнены, вы сможете создать свой первый проект PhoneGap. Запустите Visual Studio 2010, выберите шаблоны «Visual C #» и отфильтруйте их с помощью ключевого слова «Gap». Затем вы должны увидеть новый тип проекта с именем PhoneGapStarter :
Назовите свой проект « MyFirstPhoneGapProject ». После этого вы найдете файлы, о которых я говорил ранее, в обозревателе решений:
Вам только сейчас нужно вставить свое приложение HTML5 в каталог «www».
Вот несколько советов, которыми я хотел бы поделиться с вами об этом шаблоне проекта по умолчанию:
— никогда не трогайте файл phonegap-1.3.0.js, если вы хотите сохранить переносимый код в других версиях PhoneGap
— все файлы, которые вы добавите в каталог «www», должны быть установлены как « Content » в свойствах окно
— вместо двоичного файла WP7GapClassLib.dll вы можете добавить ссылку на проект C7 WP7GapClassLib.csproj, доступный в каталоге « Windows Phone \ framework » загруженного архива PhoneGap. Это поможет вам отладить или обнаружить собственный код библиотеки PhoneGap, если это необходимо.
Хорошо, теперь давайте начнем с того, что обычно делаем по умолчанию с IE9 Mango: доступ к значениям акселерометра из JavaScript.
Получение значений акселерометра из JavaScript
Здесь мы увидим, как получить значения, отправленные обратно акселерометром (эмулятора или реального устройства) очень простым способом.
Откройте страницу « index.html » и измените ее тело по умолчанию следующим образом:
Мы просто будем использовать 3 тега
Следующий шаг — изменить последний блок
Ну, код, по-моему, достаточно самоочевиден Первое, на что следует обратить внимание, это то, что вам нужно подождать, пока событие « deviceready », вызванное PhoneGap, не будет стабильным. Затем вам нужно подписаться на это событие. В нашем случае мы будем вызываться в функцию OnDeviceReady () . Эта функция получает ссылки на 3 тега
