Не так давно наша компания объявила о выпуске нового продукта - "1С-Битрикс: Мобильное приложение".
Теперь вы можете создавать мобильные приложения с использованием Javascript +HTML5, что существенно дешевле и значительно быстрее нативной разработки.
Сейчас я расскажу как начать разрабатывать свои мобильные приложения.
С чего начать?
[spoiler]
Итак, установим приложение для разработчиков из или .
При запуске приложения появляется форма для ввода некого адреса, которого у вас пока нет
У себя на установке "1С-Битрикс: Управление сайтом" проделываем следующее:
- Установим модуль "Мобильная платформа". Это просто.
- Теперь выберем место, где будет "жить" ваше мобильное приложение. Пусть это будет папка /myfirst_app/. Создадим эту папку на сайте.
- Создадим файлики /myfirst_app/left.php и /myfirst_app/index.php.
- Шаблон сайта. Он не должен отличаться от тех шаблонов, которые создаются для "больших" сайтов. Единственное отличие - это присутствие в header.php следующего:
if (CModule::IncludeModule("mobileapp"))
CMobile::Init();
|
- Теперь в настройках сайта назначим созданый шаблон сайта для папки /myfirst_app/. Рекомендую поставить сортировку подключения шаблонов 0 или 1.
config.php
И последний шаг - создайте в папке /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);
?> |
left - страница, которая загружается в левую часть слайдера.
После этого у нас появился адрес, который нужно вбить в форме приложения для разработки - "http://<my site>/myfirst_app/".
Вбейте его:)
Что дальше? Меню.
Теперь девелоперское приложение может подключаться к вашему сайту и показывать контент. После подключения уже вы сами должны обеспечить корректную навигацию по приложению. Поэтому, вам понадобится меню. Его часто располагают в левой части слайдера.
Соглано содержанию 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?
В исходном коде страницы меню есть вызов функции app.enableSliderMenu(true) - разблокировка слайдера. Что за объект app? Это объект библиотеки BitrixMobile 2.0, который как раз и позволяет управлять приложением. При вызове в шаблоне вашего приложения CMobile::Init() объект app становится доступным. Этот объект содержим множество полезных функций. Вот некторые из них:
app.addButtons(params) - добавление кнопок на панель для текущей страницы с JS-обработчиком.
app.openBXTable(params) - открыть список из этой страницы.
app.menuCreate(params) - создание персонального меню для страницы
app.pullDown(params) - включить pull-down-to-refresh
app.openMenu(params) - открыть левое меню
app.openDocument(params) - открытие документа средствами телефона
app.openPhotos(params) - нативная фотогалерея
app.openBarCodeScanner(params) - сканер штрихкодов.
app.showLoadingScreen() - показать экран загрузки на странице. Экран полностью закрывает старницу.
app.hideLoadingScreen() - скрыть экран загрузки на странице.
app.setPageTitle(params) - заголовок страницы
Все функции пока описывать не буду.
Функции данного объекта уже в и файлике /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") ?> |
Запустим приложение и перейдем по пункту "Новый пункт меню" - увидим страницу с кнопкой "+" на панели, с "потяни-чтобы-обновить", с заголовком и кнопкой "Table". Нажмем на "Table" - открывается таблица, которая ничего не показывает
Как видно по коду вызова app.openBXTable(), данные будут браться из файлика /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". Теперь таблица отображает данные.
События
В мобильном приложении есть некоторые события, которые позволяют гибко решать множество задач. В
Обрабатывать эти события просто. Например:
BX.addCustomEvent("onOpenPageAfter", function(){
setTimeout(function(){
app.closeController();
},2000);
});
|
Размещая этот код, мы говорим странице - "После открытия, закройся обратно через 2-е секунды) ."
Вы можете написать приложение
У вас есть скелет приложения - навигация и первая страница.
Теперь вы можете начать писать свое мобильное приложение, эксперементируя с методами библиотеки.
Доступна документация по мобильным приложениям.
Документация для API 6. Пока номер версии не имеет значения, так как приложения только вышли. Но в будущем разработчикам нужно будет учитывать этот номер при разработке для клиентов. Как и во всех наших продуктах обратная совместимость будет поддерживаться, но новый функционал на старых версиях будет недоступен.
За основу можно взять уже готовое решение "Мобильный интернет-магазин" (модуль "eshop_app"
.Что будет дальше?
Эта статья является только вводным курсом. В следующих статьях я буду более подробно освещать такие вопросы:
- Работа с нативными интерфейсами
- Особенности кэширования в приложении. Как его использовать.
- Решение наиболее часто возникающих задач
- Чего стоит и чего не стоит делать при разработке мобильного приложения.
- Персонализация приложения
Всем пока. Надеюсь, у вас все получится.
Фото:
BX.addCustomEvent("onKeyboardWillShow", function () { alert(1111); }); BX.addCustomEvent("onKeyboardWillHide", function () { alert(2222); });app.visibleNavigationBar(false) - работает, но всё таки есть эффект "уезжания" этого бара после загрузки страницы. Не красиво.
Мне сейчас оно вообще в приложении не нужно, так как у меня есть своя панелька.
Как сделать чтобы после авторизации в левом меню пункт "Авторизация" менялся на имя пользователя? Без ручного обновления left.php
Интересует, насколько изменились возможности geolocation для разрабатываемого мобильного приложения.
Интересует, насколько изменились возможности geolocation для разрабатываемого мобильного приложения.
Никак не могу понять как не выводить кнопку назад, а оставлять стандартную кнопку меню. Просьба подсказать
но сейчас она упорно не хочет закрывать его.. может что-то изменилось?
В данный момент мы уже практически перешли на Cordova 3.x и на Android SDK 4.4, там будет использоваться Chrome.
В случае Android 5.0 вообще webView будет обновляться отдельно от Android, как отдельный компонент и приложения на основе браузеров будут получать последние фичи.
Допустим в меню есть пункт "авторизация", после авторизации пользователя хотелось бы видеть пункты личного кабинета, но увы, этого не происходит.
Было бы очень круто, если бы был метод app.reloadMenu() например.
На странице меню регистрируем обработчик события, например так:
BX.addCustomEvent("onUserAuthorize", function(){ document.location.reload(); });На той странице, где вы авторизуетесь (авторизацию рекомендую делать ajax-запросом) вызовите следующий код:
app.onCustomEvent("onUserAuthorize", {});Что произойдет:
Страница авторизации файрит событие "onUserAuthorize", это событие возникнет на всех экранах приложения. Соответственно, на тех экранах (страницах), где зарегистрировал обработчик этого события вы сможете что-то сделать. В данном случае, будет перегружена страница.
Так события можно использовать для добавления интерактивности приложению.
.. и ещё вопросик, есть ли возможность скрыть навигационное меню изначально? не прибегая к вызову
Так не работает
var btn_menu_param = { callback:function(){ app.openLeft(); }, id: "btnmenu", badgeCode:"btnmenu", type:"menu", bar_type: "navbar", position: "left" }; app.addButtons({ btn_menu: btn_menu_param, });подскажите , можно ли и как заблокировать поворот экрана?
чтобы при повороте девайса в альбомный вид, приложение оставалось не развернутым(зафиксированным).
Не могу найти как изменять стили меню слева, категорий, категорий на странице каталога. Возможно ли это?
Как подключить свои стили и где найти дефолтные.