CtMobile

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

Вдохновение для разработки

В начале работы над гибридными приложениями компания выбрала комбинацию jQueryMobile + Cordova для создания гибридных приложений. При использовании jQueryMobile я столкнулся со многими проблемами, такими как управление классами и катавади. Органичное сочетание — первоначальная идея заключается в том, что если каждая частичная страница на стороне браузера и её класс управления могут быть такими же активными, как Android, то возникает вдохновение. Реализация CtMobile полностью соответствует активности Android.

Три концепции

У CtMoble есть три важные идеи: Page, Router, BorasdCast.

• Page используется для управления всем жизненным циклом создания, инициализации и уничтожения страницы.
• Router управляет переходом по маршрутам этого фреймворка.
• BorassdCast используется для управления взаимодействием между уведомлениями и данными между страницами.

Модель разработки

1. Встроенный режим. Все страницы написаны на HTML (обычно не рекомендуется).
2. Режим ajax. Каждая страница загружается по мере необходимости и только один раз.

Режим запуска страницы (page)

1. Стандартный. Многократный режим.
2. Single. Одноэлементный режим (уничтожается при нажатии назад).
3. singleInstance. Полный одноэлементный режим (не будет уничтожен никогда).
4. Result. С возвращаемым значением (может вернуть значение родительской странице).
5. singleInstanceResult. Полный одноэлементный с возвращаемым значением (не будет уничтожен, может вернуть значение родительской странице).

Эффект перехода между страницами (page transition effect)

Переключение между страницами поддерживает множество эффектов:

1. slideleft — с правого на левый (overlay).
2. slideright — с левого на правый (overlay).
3. slideup — с нижнего на верхний (overlay).
4. slidedown — с верхнего на нижний (overlay).
5. wxslideleft — аналогично WeChat с правого на левый.
6. wxslideright — аналогично WeChat с левого на правый.
7. wxslideup — аналогично WeChat с нижнего на верхний.
8. wxslidedown — аналогично WeChat с верхнего на нижний.
9. pushslideleft — с правого на левый (push).
10. pushslideright — с левого на правый (push).
11. pushslideup — с нижнего на верхний (push).
12. pushslidedown — с верхнего на нижний (push).
13. material — стиль Android Material.

Другие функции

1. Значение между страницами.
2. Обработкой событий клика занимается фреймворк.
3. Предварительная загрузка содержимого ajax.
4. Увеличивает ли новая страница стек истории?
5. Функции можно вызывать через конфигурацию и API.

Установка

• npm:

$ npm install ctmobile --save

• unpck:

<script src="https://unpkg.com/ctmobile@^2/umd/ctmobile.min.js"></script>

Документация по API docs

Быстрый старт

1. Базовая структура HTML

<div ct-data-role="page" id="index"></div>

Элемент с атрибутом ct-data-role = «page» представляет базовую страницу, а атрибут id однозначно идентифицирует эту страницу. Следует отметить, что элемент с атрибутом ct-data-role = "page" должен быть телом. Дочерний элемент, не может быть элементом любого уровня. Также обратите внимание, что HTML содержит хотя бы одну структуру страницы для представления первого отображаемого содержимого страницы.

2. Инициализация приложения

import CtMobile from "ctmobile";
const Router = {
    index: {
      url: "/static/html/index.html",
      component: import(/* webpackChunkName: "index" */ "../pages/index"),
    },
    info: {
      url: "/static/html/info.html",
      component: import(/* webpackChunkName: "info" */ "../pages/info"),
    },
    about: {
      url: "/static/html/about.html",
      component: import(/* webpackChunkName: "about" */ "../pages/about"),
    },
};
const App = CtMobile.CtMobileFactory.create({
    supportCordova: false,
    linkCaptureReload: false,
``` **3. router**

Для детального объяснения параметров, пожалуйста, обратитесь к разделу «Конфигурация свойств» (#Конфигурация атрибутов).

**3. Router**

В коде для инициализации приложения необходимо настроить опцию маршрутизатора. Маршрутизатор — это объект. Ключ объекта должен соответствовать значению атрибута id в базовой структуре. Значение представляет собой объект, а также URL и компонент двух атрибутов.

* URL
Представляет адрес HTML-фрагмента, на который ссылается эта страница. Фрагмент является базовой структурой страницы.
* Components
Возвращает неполярный объект, представляющий класс логической обработки этой страницы. Объект, возвращаемый в обещании, должен быть подклассом унаследованного веб-класса.
При использовании WebPack для разработки его можно определить как:
```js
component: import(/* webpackChunkName: "about" */ "../pages/about")

Свойства компонента можно оставить неустановленными. Если свойства компонента не заданы, фреймворк будет считать, что загруженная страница URL только отображается и не обрабатывается логически.

4. Написание страницы, соответствующей странице

import CtMobile from 'ctmobile';

export default class extends CtMobile.Page {
    constructor(ctmobile, id) {
      super(ctmobile, id);
    }
    
    /**
     * @override
     */
    pageCreate(){
        console.log('pageCreate');
    }
    
    /**
     * @override
     */
    pageShow() {
      console.log('pageShow');
    }
    
    /**
     * @override
     */
    pageBeforeDestory(){
      console.log('pageBeforeDestory');
    }
}

Написание класса, наследуемого от класса страницы, для завершения определения страницы, где конструктор имеет два параметра, ctmobile и ID, где ctmobile представляет весь экземпляр приложения, а ID представляет значение атрибута id в основной организации страницы. Где pageCreate, pageShow и pageBeforeDestory — функции жизненного цикла страницы. Для получения дополнительной информации о функциях жизненного цикла см. раздел «Жизненный цикл страницы» (#Жизненный цикл 9-страницы).

5. Переход на новую страницу

Перейти на новую страницу можно двумя способами:

• Метод конфигурации

<a ct-pageId="info">Перейти на информационную страницу</a>

Используйте свойство CT-PAGEID в теге для перехода на новую страницу, где значением CT-PAGEID является значение идентификатора в базовой организации страницы.

• Режим API Используйте метод App.startPage для перехода на новую страницу, где объект приложения является возвращаемым значением после инициализации приложения. Если он находится в классе страницы, его можно получить с помощью метода this.getCtMobile().

this.getCtMobile().startPage("/static/html/info.html?pageId=info");

Следует отметить, что после пути HTML будет присутствовать параметр PAGEID, и значение параметра будет значением идентификатора в основной структуре страницы.

6. Передача параметров между страницами

• строковый режим
• Используйте атрибут ct-parameter

  <a ct-pageId="about" ct-parameter="&a=1&b=2"></a>

• Используйте режим API

  this.getCtMobile().startPage("/static/html/info.html?pageId=info&a=1&b=2");

• Режим памяти Вызывая метод setRequest класса страницы для передачи параметров, вызывая метод getRequest класса целевой страницы для получения параметров. Преимущество использования метода памяти заключается в том, что вы можете передавать данные любого типа данных между страницами, недостатком является то, что при непосредственном обновлении этой страницы последние данные не сохраняются, в отличие от строкового метода, вы можете постоянно сохранять значение параметра. Функция pageAfterShow вызывается, а затем метод getRequest можно вызвать в любом месте для получения параметров.

7. Страница с возвращаемым значением

   Добавьте атрибут CT-page mode в базовую структуру страницы = «Result» или CT-page mode = «singleInstanceResult».

   Например, в настоящее время есть две страницы index.html и PopUpDialog.html. На index.html есть кнопка eject, при нажатии на которую появляется PopUpDialog, эта страница PopUpDialog:

   Определение index.html:

<div ct-data-role="page" id="index">
    <a ct-pageId="PopUpDialog">Popup PopUpDialog</a>
    <div class="resultText">Возвращаемое значение PopUpDialog<div>
</div>

   Определение index.js:

import CtMobile from 'ctmobile';
import $ from 'jquery';
export default class extends CtMobile.Page{
  constructor(ctmobile,id){
    super(ctmobile,id);
  }
  
  /**
   * override
   */
  pageCreate() {
    
  }
  
  /**
   * PopUpDialogTrigger on return
   * override
   */
  pageResult(e, resultCode, bundle) {
     console.log("resultCode", resultCode, "bundle", JSON.stringify(bundle));
     alert(`resultCode:${resultCode}\r\nbundle:${JSON.stringify(bundle)}`);
  }
}

  Определение PopUpDialog html:

<div ct-data-role="page" id="PopUpDialog" ct-data-mode="result">
     <button class="result">return</button>
</div>

или

<div ct-data-role="page" id="PopUpDialog" ct-data-mode="singleInstanceResult">
     <button class="result">return</button>
</div>

  Определение PopUpDialog.js:

import CtMobile from 'ctmobile';
import $ from 'jquery';

export default class extends CtMobile.Page {
  constructor(ctmobile,id){
    super(ctmobile,id);
  }
  
  /**
   * override
   */
  pageCreate() {
    const $btnEL = this.getPageJO().find(' .result');
    $btnEl.on('click' , () => {
       this.setResult('PopUpDialog', {a: 1, b: 2});
       this.over();
    });
  }
}

  В index.html необходимо переписать метод pageResult в index.js. Этот метод запускается после возврата PopUpDialog или вручную вызывает метод finish. Метод pageResult имеет три параметра e, resultCode и bundle, где resultCode используется для различения разных источников, а bundle — это значение, которое возвращается.    В PopUpDialog.html необходимо вызвать метод this.setResult(resultCode,bundle) в PopUpDialog.js, чтобы установить возвращаемое значение. После вызова this.finish() страница закрывается.

Сценарии использования страниц с возвращаемыми значениями обычно делятся на два типа.

• Много к одному A.html, b.html, c.html... все всплывают d.html
• Один ко многим A.html всплывает b.html, c.html, d.html...

В случае «много к одному» флаг родительской страницы можно передать через метод setRequest.

В случае «один ко многим» разные источники можно различить по requestCode метода pageResult.

8. Режим запуска страницы

Установите значение атрибута ct-data-mode в базовой структуре страницы. Фреймворк поддерживает всего 5 режимов запуска.

• standard (по умолчанию)   режим нескольких случаев

  Создаётся несколько шаблонов путём настройки или API для перехода на эту страницу, будет создан новый экземпляр, так называемый новый экземпляр — это Dom и соответствующий класс Page Dom будут новыми.

• single    режим singleton (уничтожается при нажатии назад)

   То же, что и Single в Android, например, добавьте следующий порядок разработки страниц: Index.html -> a.html -> b.html -> c.html -> d.html -> b.html Если для ct-data-mode b.html установлено значение single, то после выполнения вышеуказанного порядка страниц история стека в настоящее время index.html -> a.html -> b.html Также удалены c.html и d.html, удалённые коллеги также вызовут соответствующую функцию жизненного цикла. Но если вы нажмёте назад в b.html, то b.html всё равно будет уничтожен.

• singleInstance   полный режим singleton (не будет уничтожен никогда)

  Полный синглтон никогда не уничтожается и существует только один экземпляр. Обратные действия и завершение доставки

   В функции обратного вызова упорядоченной широковещательной рассылки есть два параметра: intent и opt. Параметр intent — это параметр, передаваемый уведомлением, а opt — объект, который имеет два метода: putExtras и next. Метод putExtras используется для передачи параметров, которые объединяются вместе. Вызывается только метод next для дальнейшей передачи данных.

• Классификация уведомлений (категории)

   При регистрации широковещательного сообщения, помимо Action, можно определить несколько категорий. Категория может рассматриваться как вторичный заголовок, который используется для более детального определения действия.

12. Другие функции

• Увеличение истории Если вы не хотите добавлять новую страницу в стек истории, вы можете установить свойство ct-reload в значение true, чтобы браузер не добавлял историю.

<a ct-pageId="a" ct-reload="true">a.html</a>

this.ctmobile.startPage('/static/html/a.html?pageId=a',{
    Reload:true
});

Например, index.html -> a.html, тогда в стеке истории будет только a.html.

• Метка не обрабатывается фреймворком Иногда мы не хотим, чтобы фреймворк обрабатывал поведение тега a, поэтому мы можем добавить ct-data-ajax="false" к тегу a.

• Предварительная загрузка содержимого ajax

<div ct-data-role="page" id="index">
    <a ct-pageId="a" ct-data-preload="true">into a.html</a>
    <a ct-pageId="b" ct-data-preload="true">into b.html</a>
    <a ct-pageId="c" ct-data-preload="true">into c.html</a>
    <a ct-pageId="d" ct-data-preload="true">into d.html</a>
    <a ct-pageId="e" ct-data-preload="true">into e.html</a>
</div>

Фреймворк загрузит содержимое a-e.html во время инициализации. Если в a-e.html есть страница, которую необходимо предварительно загрузить, она также будет предварительно загружена. Каждая страница будет загружаться только один раз и не будет загружаться повторно.

• Использование конфигурации для возврата страницы

<div ct-data-role="page" id="about">
    <header>
        <a class="ct-back-icon" ct-data-rel="back"></a>
    </header>
</div>

Конфигурация атрибутов

CtMobile App Showcase

Запуск демонстрационной программы

  Проверьте и войдите в каталог демонстрации:

$ npm install
$ npm run devDll
$ npm start

   Введите localhost:8000 в браузере, чтобы получить доступ к главной странице демонстрации.

Дискуссионная группа

Лицензирование

MIT