Войти через социальные сети:

Страницы: 1
RSS
1C-Битрикс Мобильное приложение, BitrixMobile - создание кроссплатформенных мобильных приложений
 
  1. Установить приложение для разработчиков из Google Play или AppStore. При запуске приложения появляется форма для ввода некого адреса, которого пока нет.
Далее на установке «1С-Битрикс: Управление сайтом» необходимо:
  • Установить модуль [URL=http://www.1c-bitrix.ru/products/mobile/]Мобильная платформа[/URL].
  • Выбрать место расположения мобильного приложения. Например, это будет папка /myfirst_app/.
  • Создать файлы /myfirst_app/left.php и /myfirst_app/index.php.
  • Шаблон сайта не должен отличаться от тех шаблонов, которые создаются для обычных сайтов. Единственное отличие - это присутствие в header.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 - страница, которая загружается в левую часть слайдера.

  • После этого появится адрес, который нужно ввести в форме приложения для разработки [URL=https://dev.1c-bitrix.ru/learning/course/start]п.1[/URL] - [URL=http://my_site/myfirst_app/]http://my_site/myfirst_app/[/URL]
  • Теперь приложение может подключаться к сайту и показывать контент. После подключения уже разработчик должен обеспечить корректную навигацию по приложению. Поэтому, необходимо меню. Его часто располагают в левой части слайдера. Согласно содержанию 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 становится доступным. Этот объект содержит множество полезных функций, которые описаны далее в курсе и в файле /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).

    Вот что у нас получилось на uveb.ru


  • Страницы: 1
    Читают тему (гостей: 1)