Дата последнего изменения: 31.01.2023
/myfirst_app/
. /myfirst_app/left.php
и /myfirst_app/index.php
.
if (CModule::IncludeModule("mobileapp")) CMobile::Init();
Т.е чтобы создать шаблон мобильного приложения, нужно вызвать метод CMobile::Init() в стандартном шаблоне сайта. С помощью этого метода инициализируются нужные константы, подключаются нужные JS-скрипты, соответствующие платформе клиента (iOS или Android), создаются нужные объекты и т.п.
/myfirst_app/
. Рекомендуется поставить сортировку подключения шаблонов 0 или 1.
/myfirst_app/
файл config.php. При обращении к файлу должен возвращаться JSON.
Файл должен быть следующего содержания:
<? header("Content-Type: application/x-javascript"); $config = array( "appmap" => array( "main"=>"/myfirst_app/index.php", "left"=>"/myfirst_app/left.php" ) ); echo json_encode($config); ?>где:
main
- стартовая страница приложения;
left
- страница, которая загружается в левую часть слайдера.
Теперь приложение может подключаться к сайту и показывать контент. После подключения уже разработчик должен обеспечить корректную навигацию по приложению. Поэтому, необходимо меню. Его часто располагают в левой части слайдера.
Согласно содержанию config.php, в качестве страницы для левой части слайдера загружается /myfirst_app/left.php
.
Давайте расположим в этом файле компонент bitrix: mobileapp.menu - компонент меню:
<? require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/header.php"); $arParams = array( "MENU_FILE_PATH" => SITE_DIR . "myfirst_app/.mobile_menu.php", ); $APPLICATION->IncludeComponent( 'bitrix:mobileapp.menu', 'mobile', $arParams, false, Array('HIDE_ICONS' => 'Y')); ?> <script type="text/javascript"> app.enableSliderMenu(true); </script> <? require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/footer.php") ?>
На вход компоненту отдаем параметр MENU_FILE_PATH
- путь к файлу меню.
Разместим этот самый файл меню по нужному пути.
<? IncludeModuleLangFile(__FILE__); $arMobileMenuItems = array( array( "type" => "section", "text" =>"Раздел меню", "sort" => "100", "items" => array( array( "text" => "Новый пункт меню!", "data-url" => SITE_DIR."myfirst_app/test.php", "class" => "menu-item", "id" => "main", "data-pageid"=>"main_page" ) ) ) ); ?>
Структура меню проста. Есть секции. Каждый пункт меню снабжается нужными атрибутами:
text
- название пункта;data-url
- куда будем переходить при клике по пункту;class
- css-класс пункта меню;id
- идентификатор;data-pageid
- идентификатор, который учитывается приложением. При клике на пункт страница прогрузится и закешируется. Таким образом, в дальнейшем она всегда будет открываться мгновенно, но за актуальностью контента на этой странице придется следить. В итоге получим вот такое меню:
В исходном коде страницы меню есть вызов функции app.enableSliderMenu(true) - разблокировка слайдера. Что за объект app? Это объект библиотеки BitrixMobile 2.0, который как раз и позволяет управлять приложением. При вызове в шаблоне приложения CMobile::Init() объект app становится доступным. Этот объект содержит множество полезных функций, которые описаны далее в курсе и в файле /bitrix/js/mobileapp/bitrix_mobile.js
Разместим нашу страницу /myfirst_app/test.php
, на которую ссылается созданный пункт меню:
<? require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/header.php"); ?> <script type="text/javascript"> function openTable() { app.openBXTable({ url: "/myfirst_app/list.php", TABLE_SETTINGS: { alphabet_index: false, // Выключим алфавитный индекс showtitle: true, //Покажем тайтл cache: false,// не кэшируем name: "Разделы", // callback: function (data) { alert(JSON.stringify(data)); } } }); } //добавить кнопку app.addButtons( { menuButton: { type: 'plus', style: 'custom', callback: function () { app.menuShow(); //app.openNewPage("/myfirst_app/test2.php"); } } } ); //добавить меню app.menuCreate({ items: [ { name: "Открыть страницу", action: function () { // alert("Hello"); app.openNewPage("/myfirst_app/test2.php"); } }, { name: "bitrix", url: "http://bitrix.ru", icon: 'settings' } ] }); //title app.setPageTitle({ title: "MyFirstApp" }); //pull-down-to-refresh app.pullDown({ enable: true, callback: function () { document.location.reload(); }, downtext: "Тяни...", pulltext: "Отпускай...", loadtext: "Жди..." }); </script> <button style="width:100%;height:50px" onclick="openTable();">Table</button> <? require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/footer.php") ?>
Далее необходимо создать /myfirst_app/list.php
с таким содержанием:
<? require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php"); $data = Array( "data"=>Array( "company"=>Array( Array( "ID"=>1, //идентификатор записи "NAME"=>"Google", //имя для отображения "URL" => "http://google.ru", "IMAGE"=>"http://www.mintfo.com/wp-content/uploads/2012/08/New-blue-logo-Google-revamps-mainpage-favicon-300x300.png", "TAGS" => "Заграничный поисковик", "SECTION_ID"=>"milk"//принадлежность к секции ), Array( "ID"=>2, "NAME"=>"Bitrix", "SECTION_ID"=>"meat", "IMAGE"=>"http://www.incr.ru/img/bitrix-logo.png", "TAGS"=>"Отечественная CMS", "URL"=>"http://bitrix.ru" ), Array( "ID"=>3, "NAME"=>"Yandex", "SECTION_ID"=>"meat", "IMAGE"=>"http://blogs.computerra.ru/wp-content/uploads/2012/10/yandex-browser-logo-289x300.jpg", "TAGS" => "Свой домашний браузер", "URL"=>"http://yandex.ru" ) ), ), "names"=>Array("company"=>"Компании") ); $data = $APPLICATION->ConvertCharsetArray($data, "windows-1251","utf-8"); $APPLICATION->RestartBuffer(); echo json_encode($data); die();
Запустим приложение и перейдем по пункту Новый пункт меню - увидим страницу с кнопкой + на панели с заголовком Потяни,чтобы-обновить и кнопкой Table. Нажмем на кнопку Table - откроется таблица c данными.
В мобильном приложении есть события, которые позволяют гибко решать множество задач. Обрабатывать эти события просто. Например:
BX.addCustomEvent("onOpenPageAfter", function(){ setTimeout(function(){ app.closeController(); },2000); });
Размещая этот код, мы как бы говорим странице: "После открытия закройся обратно через 2 секунды."
Таким образом, мы получили скелет приложения - навигацию и первую страницу. За основу также можно взять уже готовое решение Мобильный интернет-магазин (модуль eshop_app).