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

Способ передачи данных через память

Для передачи параметров используется вызов метода setRequest класса Page. На целевой странице вызывается метод getRequest класса Page для получения параметров. Преимущество способа передачи через память заключается в том, что можно передавать данные любого типа между страницами. Недостаток — при обновлении страницы предыдущие данные не сохраняются, в отличие от строкового способа, который позволяет сохранить значение параметра навсегда.

A.js

<!-- Передача параметров на B.html -->
this.setRequest('requestCode', {a: 1, b: 2});
this.ctmobile.startPage("/static/html/b.html?pageId=b");

B.js

pageAfterShow() {
    <!-- Получение переданных параметров с A.html -->
    const parameter = JSON.stringify(this.getRequest());
    console.log('parameter', parameter);
}

Следует отметить, что метод getRequest необходимо вызывать в обратном вызове pageAfterShow. После вызова функции pageAfterShow можно получить параметры, вызвав метод getRequest в любом месте.

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

В базовую структуру страницы добавляются атрибуты ct-page-mode="result" или ct-page-mode="singleInstanceResult".

Например, есть две страницы index.html и PopUpDialog.html. В index.html есть кнопка, которая открывает PopUpDialog.

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

<div ct-data-role="page" id="index">
    <a ct-pageId="PopUpDialog">Открыть 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() {

  }

  /**
   * Обработка результата PopUpDialog
   * 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">Вернуться</button>
</div>

Или:

<div ct-data-role="page" id="PopUpDialog" ct-data-mode="singleInstanceResult">
    <button class="result">Вернуться</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), чтобы установить возвращаемое значение, и вызывать 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. Всего существует пять режимов запуска:

• standard (по умолчанию): многоэкземплярный режим.
• single: одноэкземплярный (уничтожается при нажатии кнопки возврата) режим. Пример: последовательность разработки страниц: index.html → a.html → b.html → c.html → d.html → b.html. Если установить режим b.html как single, то после выполнения этой последовательности в стеке истории будет index.html → a.html → b.html. Страницы c.html и d.html будут удалены, и соответствующие функции жизненного цикла будут вызваны. Однако при нажатии на кнопку возврата страница b.html всё равно будет уничтожена.
• singleInstance: полностью одноэкземплярный (никогда не уничтожается) режим.
• result: режим с возвращаемым значением (может возвращать значение родительской странице).
• singleInstanceResult: режим с полностью одноэкземплярным возвращаемым значением (никогда не уничтожается и может возвращать значение родительской странице).

9. Жизненный цикл страницы

У страницы есть 10 функций жизненного цикла.

10. Эффект перехода между страницами

Эффект перехода между страницами устанавливается в базовой структуре с помощью атрибута ct-data-transition. Всего существует 13 видов эффектов перехода между страницами:

• slideleft: переход справа налево (overlay).

• slideright: переход слева направо (overlay).

• slideup: переход снизу вверх (overlay).

• slidedown: переход сверху вниз (overlay).

• wxslideleft: переход, похожий на переход в WeChat, справа налево.

• wxslideright: переход, похожий на переход в WeChat, слева направо.

• wxslideup: переход, похожий на переход в WeChat, снизу вверх.

• wxslidedown: переход, похожий на переход в WeChat, сверху вниз.

• pushslideleft: переход, подобный переходу в WeChat, справа налево (push). 11. Трансляция (broadcast)

• pushslideright — сдвиг вправо (push);

• pushslideup — сдвиг вверх (push);

• pushslidedown — сдвиг вниз (push);

• material — стиль Android Material.

11.1. Трансляция (borasdcast)

На основе концепции трансляции Borasdcast в Android предоставляется ряд функций для передачи данных между страницами. Трансляция может быть упорядоченной и неупорядоченной, её можно реализовать двумя способами: через конфигурацию и API.

1. Регистрация через конфигурацию:
   • В базовую структуру добавляется ct-data-intentfilter-action, ct-data-intentfilter-categorys.

   <div ct-page-role="page"
       id="index"
       ct-data-intentfilter-action="actionCode"
       ct-data-intentfilter-categorys="c1,c2"
       ct-data-intentfilter-priority="0"
   ></div>
   • На странице переопределяется метод pageReceiver.

   import CtMobile from 'ctmobile';
   export default class extends CtMobile.Page {
     constructor(ctmobile, id) {
       super(ctmobile, id);
     }
   
     /**
      * @override
      */
     pageReceiver(intent) {
       console.log(intent);
     }
   }
2. Регистрация через API:

   import CtMobile from 'ctmobile';
   export default class extends CtMobile.Page {
     constructor(ctmobile,id){
       super(ctmobile,id);
     }
   
     onRegisterReceiver(intent) {
         console.log(JSON.stringify(intent));
     }
   
     /**
      * @override
      */
     pageCreate() {
       this.onRegisterReceiver = this.onRegisterReceiver.bind(this);
   
       // 注册 borasdcast
       this.ctmobile.registerReceiver({
         action: 'actionCode',
         priority: 0,
         categorys: ['c1','c2']
       }, this.onRegisterReceiver);
     }
   }
3. Отправка неупорядоченной трансляции: В классе Page вызывается метод sendBroadcast из CtMobile.

   this.ctmobile.sendBroadcast({
       action: 'actionCode',
       categorys: ['c1', 'c2'],
       bundle: {
           a: 1,
           b: 2
       }
   });
4. Отправка упорядоченной трансляции: В классе Page вызывается метод sendOrderedBroadcast из CtMobile.

   this.ctmobile.sendOrderedBroadcast({
       action: 'actionCode',
       categorys: ['c1', 'c2'],
       bundle: {
           a: 1,
           b: 2
       }
   });
5. Упорядоченная трансляция:
   • Уведомление имеет приоритет: упорядоченные уведомления имеют определённый порядок, который определяется атрибутом priority. Уведомления с большим значением приоритета будут получены раньше, а с меньшим — позже. Настройка приоритета через конфигурацию:

   <div ct-page-role="page"
       id="index"
       ct-data-intentfilter-priority="0"
   ></div>
   Регистрация через API:

   // 注册 borasdcast
   this.ctmobile.registerReceiver({
       action: 'actionCode',
       priority: 0,
       categorys: ['c1', 'c2']
   }, this.onRegisterReceiver);
   • Передача параметров и остановка передачи: в функции обратного вызова упорядоченной трансляции есть два параметра intent и opt. Intent — это передаваемый параметр, opt — объект, содержащий два метода putExtras и next. Метод putExtras устанавливает параметры для дальнейшей передачи, которые объединяются вместе. Только вызов метода next приводит к дальнейшей передаче.
6. Уведомление о категории (categorys): при регистрации трансляции помимо Action можно определить несколько категорий categorys, которые можно рассматривать как вторичный заголовок, используемый для более точного определения Action.

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

1. Добавление истории: если вы не хотите, чтобы новая переведённая страница добавлялась в историю браузера, вы можете установить атрибут 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.

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

3. Предварительная загрузка содержимого 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 есть страницы, требующие предварительной загрузки, фреймворк также предварительно загрузит их. Каждая страница будет загружена только один раз, и после завершения загрузки она больше не будет загружаться.

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

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

Свойства конфигурации

CtMobile: демонстрация приложения

Запуск Demo программы

  После выполнения checkou перейдите в каталог demo

$ npm install
$ npm run devDll
$ npm start

  Введите localhost:8000 в браузере для доступа к главной странице demo.

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

Лицензия

MIT