Как организовать HTML-файлы Phonegap

Я использую Phonegap для создания приложения для iPad.

Предполагается, что приложение будет в автономном режиме (помимо отправки формы), поэтому оно будет иметь в основном статические страницы, поэтому у меня будет много файлов HTML, поскольку я не использую JS MVC / Require JS, чтобы минимизировать сложность. Чем больше я это вижу, это в основном статический сайт, обернутый в Phonegap для создания приложения.

Поскольку у меня будет много-много файлов HTML, будет сложно управлять изменениями в (например) верхнем/нижнем колонтитуле, если я не использую какой-либо механизм шаблонов. Пока что я использую Codekit для компиляции файлов Jade в HTML, и это работает нормально, я использую Jade только для функции компоновки/блокировки/включения и компиляции HTML.

Единственное, что мне не очень нравится в использовании Jade, это то, что если в вашем файле много вложенных тегов HTML (например, сложный дизайн формы, размеченный с помощью Zurb Foundation/Twitter Bootstrap), то внезапно Jade уже не выглядит таким чистым.

Почему-то я думаю, что должен быть лучший способ сделать это. Кто-нибудь из вас делал приложение, в основном, со статическими страницами с помощью Phonegap? Любое лучшее предложение?

Спасибо


cordova html pug template-engine codekit
person Henson    schedule 14.08.2013    source источник

Ответы (5)


arrow_upward
8
arrow_downward

вы можете использовать 1 файл для всех, сохранять данные в sqlite или как переменные в файлах JS. код должен быть таким:

<!doctype html>
<html>
<head></head>
<body>
<div id="page1" class="page">...</div>
<div id="page2" class="page">...</div>
<div id="page3" class="page">...</div>
<div id="page4" class="page">...</div>
</body>
</html>

то вы можете создать функцию «навигация (page_id)» в файле js:

public function navigate(pageid){
$('page').hide();
if(pageid == 'page1'){
  $('#'+pageid).show();
  // get data and append it in the div.
}
...
}

конечно, вы можете использовать Jquery Mobile, но это заставит вас использовать заранее определенный шаблон. Лично я его не использую, потому что написание собственного шаблона намного лучше и может дать больше возможностей.

person T.Baba    schedule 20.08.2013
comment
Это немного сложнее, так как каждая страница может иметь несколько подстраниц, и, возможно, каждая подстраница будет иметь одну или две другие подстраницы. Вот почему я сказал, что это якобы приложение очень не похоже на приложение по своей концепции. Я буду использовать простое обновление страницы для основной навигации, но я думаю, что буду использовать jquery/ajax для некоторых ссылок на подстраницы. Спасибо за предложение. - person Henson; 21.08.2013
comment
вы можете работать с подстраницами таким же образом, у меня есть некоторые приложения с 30 страницами, назначить идентификатор для каждой страницы и все ;) это самый простой способ. если вы собираетесь создать несколько файлов, вам следует учитывать время загрузки файлов (html, css, JS...) - person T.Baba; 21.08.2013
comment
так что конечным результатом будет один массивный html-файл, состоящий из всех страниц, каждая из которых имеет свой идентификатор? - person Henson; 21.08.2013
comment
в основном да, как и на любом одностраничном веб-сайте html5, не беспокойтесь об этом, вы можете использовать заставку при загрузке файлов, и вы можете использовать некоторые JS, такие как AngularJS (viralpatel.net/blogs/angularjs-controller-tutorial), есть несколько советов при написании приложения html5 для мобильных устройств, используйте идентификаторы вместо class для таргетинга на ваши html-теги, упростите весь JS, удалив все пробелы и разрывные линии, используйте небольшие переменные (var mh вместо Var Main_homepage)... - person T.Baba; 21.08.2013

arrow_upward
1
arrow_downward

Я использую очень стандартный рабочий процесс, который набирает огромную популярность в веб-разработке — Grunt. Grunt выполняет задачи, очень похожие на то, как Codekit компилирует jade, только Grunt очень стабилен, имеет огромное сообщество и поддерживает jade путем установки grunt-contrib-jade. Он будет интегрироваться с несколькими механизмами шаблонов.

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

Веб-сайт Grunt: http://gruntjs.com/

person Priya Ranjan Singh    schedule 18.08.2013
comment
Поскольку я использую Codekit, я не использую Grunt, но я определенно буду использовать Grunt для следующих проектов, так как в настоящее время это лучшая практика. - person Henson; 21.08.2013

arrow_upward
1
arrow_downward

Я бы предложил эту структуру. Навигация по страницам очень проста, и вам не нужно помещать все ваши страницы в один файл, что сделает его очень трудным для чтения или обслуживания. Эта структура позволяет вам разделить любые ваши файлы (html, js, css) на очень маленькие, чтобы каждый файл было легко читать и поддерживать.

Он также использует Ajax для получения html (страниц/частичных просмотров), поэтому вы можете делать с html все, что хотите.

Наша команда phonegap завершила несколько проектов, основанных на этой структуре, и они очень успешны. На этом сайте есть демоверсии с исходным кодом, которые помогут вам настроить ваш проект. Вы можете взглянуть на структуру файлов через исходный код.

Я бы НЕ советовал jQueryMobile, так как это действительно проблема для приложений телефонной связи. Вот несколько сообщений, которые объясняют, почему:

  1. Как jQuery Mobile влияет на производительность PhoneGap, см. эксперимент
  2. Кто убивает PhoneGap? Это jQuery для мобильных устройств
person Leo Cai    schedule 22.08.2013
comment
Мне пришлось отказаться от jQuery Mobile из-за медленного рендеринга в приложении PhoneGap на Android. jQuery Mobile прекрасен и имеет множество хороших виджетов, но низкая производительность делает его бесполезным. - person devdanke; 30.01.2015

arrow_upward
0
arrow_downward

Я успешно использую мобильный JQuery. Я использую RazorEngine в качестве службы шаблонов, и они компилируют файлы в статический html. Jquery Mobile имеет хороший механизм подкачки, который использует ajax для извлечения статических html-файлов, а затем показывает их на странице, а также множество других полезных функций для мобильных устройств.

person TWilly    schedule 16.08.2013
comment
Я не использую jQuery Mobile, потому что дизайн приложения очень не похож на приложение (без заголовка/панели навигации и т. д.), поэтому я не могу использовать jQuery Mobile. - person Henson; 17.08.2013

arrow_upward
0
arrow_downward

В своем посте вы упомянули, что не использовали структуру mvc. Однако я бы посоветовал вам заглянуть в backbone.js. Backbone — это технология, которая часто используется в сочетании с Phonegap. Вы можете использовать представления Backbones для организации кода.

person Niels    schedule 22.08.2013