2013-08-14 2 views
3

Я использую Phonegap для создания iPad-приложения.Как организовать HTML-файлы с телефонной связью

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

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

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

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

спасибо

ответ

0

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

+0

Я не использую jQuery Mobile, потому что дизайн приложения очень не «приложение» (без заголовка/навигационной панели и т. Д.), Поэтому я не могу использовать jQuery Mobile. – Henson

1

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

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

сайт Grunt: http://gruntjs.com/

+0

Поскольку я использую Codekit, я не использую Grunt, но я определенно буду использовать Grunt для следующих проектов, так как это выглядит наилучшей практикой в ​​наши дни. – Henson

8

вы можете использовать 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, но это будет заставляют вас использовать заранее определенный шаблон, Лично я не использую его, потому что писать мой собственный шаблон намного лучше и может дать больше вариантов.

+1

Это немного сложнее, так как каждая «страница» может иметь несколько подстраниц, и, возможно, каждая подстраница будет иметь одну или две другие подпозиции. Вот почему я сказал, это, предположительно, приложение очень не похоже на приложение в концепции. Я использую простое обновление страницы для основной навигации, но я думаю, что буду использовать jquery/ajax для некоторых ссылок на подстраницу. Спасибо за предложение. – Henson

+0

вы можете обрабатывать субстраницы таким же образом, у меня есть некоторые приложения с 30 страницами, назначьте идентификатор для каждой страницы, и это он;) это самый простой способ. если вы собираетесь создавать несколько файлов, вы должны учитывать время загрузки файлов (html, css, JS ...) –

+0

, поэтому конечным результатом будет один массивный html-файл, состоящий из всех страниц с каждой страницей, имеющих разные Я бы? – Henson

1

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

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

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

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

  1. How jQuery Mobile Eats PhoneGap Performance, See Experiment
  2. Who Is Murdering PhoneGap? It's jQuery Mobile
+0

Мне пришлось отказаться от jQuery Mobile из-за медленного рендеринга в приложении PhoneGap на Android. jQuery Mobile красив и имеет много хороших виджетов, но медленная производительность делает его невозвратным. – devdanke

0

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

Смежные вопросы