Вы найдете много споров о нативных мобильных приложениях против приложений, работающих в веб-представлениях. Для меня главным приоритетом было сделать приложение за минимальное время, пытаясь добиться гладкости нативного приложения.
Просматривая много контента в Интернете, я получил два основных варианта:
На самом деле это была довольно хорошо продуманная структура, которая была, если я не ошибаюсь, изначально не бесплатной, а доступной бесплатно с недавних пор. Говорят, что Sencha Touch 2 предоставляет приложения, которые напоминают нативные приложения в пространстве веб-просмотра. Первоначально я был склонен продолжать работу с Sencha Touch 2, но поскольку он основывался в основном на JavaScript, а мои знания JavaScript немного устарели и с учетом временных ограничений, мне пришлось отказаться от этой идеи, поскольку кривая обучения была слишком крутой.
- jQuery Mobile (далее именуемый JQM)
Разве мы не все поклонники jQuery? Ну, я уверен. Мне очень понравился базовый API jQuery и время, которое он сэкономил, когда мне приходилось разбираться с подробностями JavaScript. А потом они идут и разрабатывают основу для мобильного пространства. Поскольку синтаксис для меня не был чужд, как это было, когда я просматривал какой-то код Sencha Touch 2, я покопался немного глубже, чтобы узнать плюсы и минусы фреймворка. Я фактически использовал JQM поверх
PhoneGap .
Все приложения, основанные на WebView, зависят от поддержки собственного браузера, чтобы обеспечить анимацию, похожую на собственное приложение. Одним из недостатков JQM было то, что мое приложение испытывало дрожь на Android 2.3 (GingerBread). Проблема в том, что у родного браузера, который идет с GingerBread, была меньшая поддержка анимации. Все анимации отлично работают на более высоких версиях, кроме 2.3 и ниже. Это был недостаток, который мне пришлось уступить, учитывая мои временные ограничения на разработку нативного приложения.
Поэтому в этом посте я покажу общие проблемы, с которыми я столкнулся при использовании JQM, и способы их преодоления.
- Как вы привязываетесь к событиям на данной странице
Исходя из некоторого опыта работы с базовой библиотекой jQuery, я начал использовать метод готовых документов, который я использовал при создании веб-приложений и при попытке связать события DOM после загрузки документа.
Тем не менее, это не то, как все работает в мире JQM. Поскольку все страницы состоят из
элементов div в пространстве JQM, страницы загружаются с использованием запросов AJAX, что позволяет структуре походить на собственное приложение, что было бы невозможно, если бы страницы обновлялись при каждой загрузке страницы. Ниже приведен фрагмент кода, который показывает, как следует связывать события с определенной страницей в мире JQM.
<div id="firstPage" data-role="page">
<div data-role="content">
<h1>Content</h1>
<a id="showalert" data-role="button">Click Me</a>
</div>
</div>
<script type="text/javascript">
$( "#firstPage" ).on( "pageinit", function( event, ui ) {
$('#showalert').click(function(){
alert('i was clicked');
});
});
</script>
Вы увидите, что привязки страниц выполняются с помощью
метода on (), который является преемником для методов-предшественников, таких как
live () , bind () . Здесь у нас есть две опции, мы можем использовать
опцию pageinit или
опцию pagehow . Я бы не стал вдаваться в подробности этих двух, так как это говорит само за себя.
- Как программно перейти на другую страницу
По умолчанию переходы страницы осуществляются посредством использования
ссылок href на идентификатор страницы, на которую вы хотите перейти. Но в определенных ситуациях вам нужна возможность выполнять переходы страниц, например, по нажатию кнопки. Вот как бы вы достигли этого с JQM;
<div id="firstPage" data-role="page">
<div data-role="header">Hi!! </div>
<div data-role="content">
<a id="gotoPage" data-role="button">Go to second page</a>
</div>
<div data-role="footer">The End</div>
</div>
<div id="secondPage" data-role="page">
<div data-role="content">
<h1>Second page</h1>
</div>
</div>
<script type="text/javascript">
$( "#firstPage" ).on( "pageinit", function( event, ui ) {
$('#gotoPage').click(function(){
$.mobile.changePage( "#secondPage", { transition: "flip"} );
});
});
</script>
Здесь мы делаем переход с первой страницы на вторую по нажатию кнопки. Использование
$ .mobile.changePage позволяет нам достичь нашей цели. Второй параметр, переданный в него, является необязательным, где мы можем определить различные параметры конфигурации. Я определил анимацию для перехода страницы, когда это происходит.
- Динамическая загрузка контента в представление списка
Вы часто хотели бы заполнить данные в виде списка, возможно, читая данные из внешней системы. Это не сработает, просто создав контент HTML и добавив его в неупорядоченный элемент списка. Вот как это можно сделать;
<div id="firstPage" data-role="page">
<div data-role="header">Hi!! </div>
<div data-role="content">
<ul id="myList" data-role="listview" data-filter="true"
data-filter-reveal="true"
data-filter-placeholder="Search List..." data-inset="true">
</ul>
</div>
<div data-role="footer">The End</div>
</div>
<script type="text/javascript">
$( "#firstPage" ).on( "pageinit", function( event, ui ) {
var dataArr = ["one","two","three"];
var content = '';
for(i=0;i<dataArr.length;i++){
content+='<li>'+dataArr[i]+'</li>';
}
$('#myList').html(content);
/**
The following two method calls will refresh the List view with the updated data after page initialization
**/
$("#myList").listview("refresh");
$("#myList").trigger( "updatelayout");
});
</script>
Я использовал массив Javascript здесь, но ваш типичный вариант использования будет получать данные из внешнего источника. После добавления html-содержимого к списку после двух обращений к списку просмотра происходит обновление списка. В противном случае вы просто получите пустой список без данных.
- Раскрытие списка просмотра данных только по поиску
Здесь мое требование состояло в том, чтобы раскрывать данные в представлении списка, только когда пользователь вводит символы в строку поиска. Нечто похожее на функциональность мягкого поиска. Как я достиг этого, показано в следующем фрагменте кода;
<div id="firstPage" data-role="page">
<div data-role="header">Hi!! </div>
<div data-role="content">
<ul id="myList" data-role="listview" data-filter="true"
data-filter-reveal="true"
data-filter-placeholder="Search List..." data-inset="true" style="display:none;">
</ul>
</div>
<div data-role="footer">The End</div>
</div>
<script type="text/javascript">
$( document ).on( "pageinit", "#firstPage", function() {
$( "#myList" ).on( "listviewbeforefilter", function ( e, data ) {
$input = $( data.input );
value = $input.val();
if(value.length>0){
loadData();
$('#myList').css("display","block");
}
else if(value.length==0){
$('#myList').css("display","none");
}
});
function loadData(){
var dataArr = ["one","two","three"];
var content = '';
for(i=0;i<dataArr.length;i++){
content+='<li>'+dataArr[i]+'</li>';
}
$('#myList').html(content);
/**
The following two method calls will refresh the List view with the updated data after page initialization
**/
$("#myList").listview("refresh");
$("#myList").trigger( "updatelayout");
}
</script>
Используя
listviewbeforefilter, я бы проверил, введены ли пользователем какие-либо данные, и только в этом случае я бы загрузил данные в представление списка. После этого с небольшим количеством CSS я бы показывал или скрывал представление списка на основе введенной пользователем длины ввода.
- Передача данных с одной страницы на другую
Другим требованием для меня было передавать данные с одной страницы на другую при переходе на эту страницу. Поскольку в терминах JQM нет понятия POST или GET, мне пришлось искать, как это можно сделать. Следующий фрагмент кода показывает, как этого можно достичь;
<div id="firstPage" data-role="page">
<div data-role="header">Hi!! </div>
<div data-role="content">
<a href="#secondPage?name=Tom&phone=9411225597" data-role="button">Check Name</a>
</div>
<div data-role="footer">The End</div>
</div>
<div id="secondPage" data-role="page">
<div data-role="content">
<h1 id="txtName"> </h1>
<h1 id="txtPhone"> </h1>
</div>
</div>
<script type="text/javascript">
$( "#secondPage" ).on( "pageshow", function( event, ui ) {
var query = $(this).data("absUrl").split("?")[1];
if(typeof query != 'undefined'){
var params = query.split("&");
$('#txtName').html(params[0].replace("name=",""));
$('#txtPhone').html(params[1].replace("phone=",""));
}
});
</script>
Я передаю данные с помощью
тега href , добавляя параметры, как в обычном запросе GET. Ключевым моментом здесь является то, как захватить данные, как только данные передаются на вторую страницу. Сначала нам нужно извлечь URL с
помощью атрибута absUrl, а затем просто разделить и заменить параметры, встроенные в URL. Это единственный способ, которым я нашел, когда одна страница может передавать данные на другую при переходе на другую страницу.
Вот и все, люди. Точки, в которых я застрял, — это те, которые я хотел бы выделить здесь, так что любой, кто может столкнуться с подобными проблемами, получит пользу от этого поста, если они когда-нибудь столкнутся с ним вовремя ? .. Я уверен, что я столкнусь со многими другими препятствиями по пути, посредством которого я буду следить за этим постом, а также тех.
Спасибо за чтение и желаем вам благословенного дня.
И, как обычно, всегда приветствуются комментарии и критика, а также ваши взгляды на JQM в качестве основы для мобильной платформы. Так что ты думаешь?