14  /  103

Офлайн-страница

Просмотров: 2107 (Статистика ведётся с 06.02.2017)

Основными ресурсами для мобильных браузеров, конечно же, являются html-страницы. Нужно помнить о правилах оформления html-страниц для мобильных браузеров.


Мета тег viewport

В отличие от классического приложения на BitrixMobile, где управление масштабированием и размерами страницы осуществляется в PHP, в офлайн-приложении мета-тег viewport не выставляется автоматически. Т.е. размеры контента, масштабирование страницы придется выставлять в каждом файле самостоятельно, включая мета-тег viewport в <head> страницы. Например, вот так:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <meta name="format-detection" content="telephone=no">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=320">
 </head>
...

Примечание: Более подробно ознакомиться с viewport-атрибутами и рекомендациями по его конфигурированию можно в официальной документации по платформам iOS и Android.


Подключение ядра платформы BitrixMobile

Опять же, на офлайн-страницах автоматически не подключается ядро мобильной платформы. Это нужно сделать самостоятельно.

Для начала нужно подключить базовый скрипт Cordova: __deviceload__/cordova.js:

<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <meta name="format-detection" content="telephone=no">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=290">
  <!--Include mobile platform-->
  <script type="text/javascript" src="__deviceload__/cordova.js"></script>
</head>

На офлайн-страницах не будут доступны javascript-библиотеки платформы «1C-Битрикс» в том виде, в котором они доступны на обычных страницах на удаленном сервере. Но будет доступен bundle из нескольких javascript-библиотек, которые нужно обязательно подключить для работы с основным API. Чтобы его использовать нужно подключить скрипт bitrix_mobile_core.js:

<head>
    <meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<meta name="format-detection" content="telephone=no">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=290">
    <!--Include mobile platform-->
    <script type="text/javascript" src="__deviceload__/cordova.js"></script>
    <script type="text/javascript" src="bitrix_mobile_core.js"></script>
    <!---->
</head>

Теперь на странице можно использовать весь API платформы BitrixMobile, который описан ниже в данном курсе в разделе API.

В bitrix_mobile_core.js входят:

  • Основная библиотека: /bitrix/js/main/core/core.js
  • Библиотека для работы с ajax-запросами: /bitrix/js/main/core/core_ajax.js
  • Библиотека для работы с базой данных SQLite: /bitrix/js/main/core/core_db.js
  • Мобильные библиотеки: /bitrix/js/mobileapp/bitrix_mobile.js и /bitrix/js/mobileapp/mobile_lib.js

Подключение скриптов и стилей

Как уже было указано в уроке Итоговая файловая структура офлайн-ресурсов, все файлы офлайн ресурсов располагаются в приложении на одном уровне (в одной папке). Поэтому подключать js- и css-файлы можно просто, указав имя файла в атрибуте src/href:

<head>
    <meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<meta name="format-detection" content="telephone=no">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=290">
    <!--Include mobile platform-->
    <script type="text/javascript" src="__deviceload__/cordova.js"></script>
    <script type="text/javascript" src="bitrix_mobile_core.js"></script>
    <!---->
    <script type="text/javascript" src="script.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>

Обращение к изображениям в css-файлах и javascript-файлах также осуществляется по простому названию файла. Он будет браться относительно текущего расположения файла.


Использование API BitrixMobile

Здесь нет ограничений. Все также как и раньше. Но для работоспособности всего набора функций нужно на странице объявить версию API, которую вы будете использовать. Сейчаc это 17 API. Также нужно определить версию платформы ios или android. Это можно сделать через определение user-agent браузера прямо javascript. В примере ниже мы просто установили platform="ios" и appVersion=17:

<head>
    <meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<meta name="format-detection" content="telephone=no">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=290">
    <!--Include mobile platform-->
      <script type="text/javascript">var appVersion = 17;var platform = "ios";</script>
    <script type="text/javascript" src="__deviceload__/cordova.js"></script>
    <script type="text/javascript" src="bitrix_mobile_core.js"></script>
    <!---->
    <script type="text/javascript" src="script.js"></script>

    <link href="style.css" rel="stylesheet" type="text/css">
</head>


2
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии