{this.state.resultText}
);
}
}
```
PopUpDialog.js的定义
```js
import React from 'react';
import CtMobile from '@ctmobile/react';
export default class extends CtMobile.Page.WrappedPage {
constructor(props){
super(props);
}
render() {
return (
);
}
}
```
index.js中重写pageResult方法，此方法在PopUpDialog返回或手动调用finish方法后被触发，pageResult的有三个参数e，resultCode，bundle，其中resultCode用来区分不同的来源，bundle是被带回来的值。
PopUpDialog.js中调用this.props.parent.setResult(resultCode,bundle);方法来设置返回的值，在调用this.props.parent.over();方法后页面关闭。
带有返回值的页面使用场景一般分为两种
* 多对一
a.jsx,b.jsx,c.jsx...都弹出d.jsx
* 一对多
a.jsx弹出b.jsx,c.jsx,d.jsx...
在多对一的情况下可以通过setRequest方法把父页面的标志传递过去。
在一对多的情况下可以通过pageResult方法的requestCode区分不同来源。
**7. Page的启动模式**
---------
在Router的config中设置mode属性值即可，框架一共支持5中启动模式
* standard（默认）
多例模式
多例模式通过配置或者api跳转到此页面的时候都会建立一个新的实例，所谓新的实例就是Dom和Dom对应的Page类都会是新的。
* single
单例模式(当点击返回时会销毁)
和Android中single一样,举个例子，加入有如下的页面开发顺序 :
index.jsx -> a.jsx -> b.jsx -> c.jsx -> d.jsx -> b.jsx
如果把b.jsx的mode设置为single，那么执行上述页面顺序后， 历史栈中当前是 index.jsx -> a.jsx -> b.jsx
也是删除了c.jsx和d.jsx，删除的同事也会调用相应的生命周期函数。
但是如果在b.jsx中点击返回那么b.jsx还是会销毁的。
* singleInstance
完全的单例模式(在任何时候都不会被销毁)
完全单例就是在任何时候都不会被销毁且只有一个实例存在。
* result
带有返回值的(可以向父页面带回返回值)
[参见带有返回值的页面](#6-带有返回值的页面)
* singleInstanceResult
带有返回值的完全单例(不会被销毁，可以向父页面带回返回值)
和result一样只是实例不会被销毁。
**8. Page的生命周期**
---------
Page一共有10个生命周期函数
**9. 页面转场效果**
---------
在Router的config中设置transition属性值即可，框架一共支持13种页面的过度效果
* slideleft-从右到左(overlay)
* slideright-从左到右(overlay)
* slideup-从下到上(overlay)
* slidedown-从上到下(overlay)
* wxslideleft-类似于微信的从右到左
* wxslideright-类似于微信的从左到右
* wxslideup-类似于微信的从下到上
* wxslidedown-类似于微信的从上到下
* pushslideleft-从右到左(push)
* pushslideright-从左到右(push)
* pushslideup-从下到上(push)
* pushslidedown-从上到下(push)
* material-Android Material的风格
**10. 广播(borasdcast)**
---------
借鉴了Android中Borasdcast概念，为Page之间的数据传递提供了一系列功能，广播分为有序和无序，可以通过配置和api两种方式实现广播。
* 通过配置注册
在Router的中加入intentfilterAction，intentfilterCategorys属性进行注册
Page中重写pageReceiver方法
```js
import React from 'react';
import CtMobile from '@ctmobile/react';
export default class extends CtMobile.Page.WrappedPage {
constructor(props){
super(props);
this.state = {
resultText:'',
};
}
/**
* @override
*/
pageReceiver(intent) {
this.setState({
resultText:JSON.stringify(intent),
});
}
render(){
return(
{this.state.resultText}
);
}
}
```
* 通过api注册
```js
import React from 'react';
import CtMobile from '@ctmobile/react';
export default class extends CtMobile.Page.WrappedPage {
constructor(props){
super(props);
this.state = {
resultText: '',
};
}
/**
* @override
*/
pageCreate() {
this.onRegisterReceiver = this.onRegisterReceiver.bind(this);
// 注册borasdcast
this.props.ctmobile.registerReceiver({
el: this.props.parent.getPageDOM(),
action: 'borasdcast_normal_api',
priority: 1,
categorys: []
}, this.onRegisterReceiver);
}
onRegisterReceiver(intent) {
this.setState({
resultText:JSON.stringify(intent),
});
}
render() {
return (
{this.state.resultText}
);
}
}
```
* 发送无序广播
在Page类中调用CtMobile的sendBroadcast方法
```js
this.props.ctmobile.sendBroadcast({
action: 'actionCode',
categorys: ['c1','c2'],
bundle: {
a: 1,
b: 2
}
});
```
* 发送有序广播
在Page类中调用CtMobile的sendOrderedBroadcast方法
```js
this.props.ctmobile.sendOrderedBroadcast({
action: 'actionCode',
categorys: ['c1','c2'],
bundle: {
a: 1,
b: 2
}
});
```
* 有序广播
* 通知的优先级
有序广播的通知是有顺序的，这个顺序是有priority这个属性决定的，priority越大越先被通知到，越小越晚被通知到。
使用配置设置priority
```js
const Router = {
index:{
component: import(/* webpackChunkName: "index" */ "../pages/index"),
config:{
intentfilterPriority:0
}
}
}
```
使用api注册设置priority
```js
// 注册borasdcast
this.props.ctmobile.registerReceiver({
action: 'actionCode',
priority: 0,
categorys: ['c1','c2']
}, this.onRegisterReceiver);
```
* 向后传递参数和终止传递
在有序广播的回调函数中会有2个参数intent和opt，其中intent是通知传递的参数，opt是个对象，其中有2个方法,putExtras和next，其中putExtras设置向下传递的参数，这些参数是合并在一起的。只有调用next方法才向下进行传递。
* 通知的分类(categorys)
在注册广播的时候除了Action之外，还可以定义多个category，categorys可以认为是一个二级标题，作用是用来对Action进行细粒度的定义。
**12. 其他功能**
---------
* 是否增加历史
如果不想让新跳转的页面增加到历史栈中，可以设置reload属性为true来阻止浏览器增加历史。
```js
info A
```
```js
this.props.ctmobile.startPage('#a?pageId=a',{
reload:true
});
```
比如index.jsx -> a.jsx，那么历史栈中只有a.jsx
* 使用Back进行页面的返回
```js
import React from 'react';
import CtMobile from '@ctmobile/react';
const {Back} = CtMobile;
export default class extends CtMobile.Page.WrappedPage {
render(){
return(
);
}
}
```
## 属性配置
* Router中config的配置
| 属性(property) | 取值 | 说明 |
| ------------------------------ | -------------------- | -------------------------------------------------------- |
| transition | slideleft | 从右到左(overlay) |
| | slideright | 从左到右(overlay) |
| | slideup | 从下到上(overlay) |
| | slidedown | 从上到下(overlay) |
| | wxslideleft | 类似于微信的从右到左 |
| | wxslideright | 类似于微信的从左到右 |
| | wxslideup | 类似于微信的从下到上 |
| | wxslidedown | 类似于微信的从上到下 |
| | pushslideleft | 从右到左(push) |
| | pushslideright | 从左到右(push) |
| | pushslideup | 从下到上(push) |
| | pushslidedown | 从上到下(push) |
| | material(缺省) | Android Material的风格 |
| mode | standard(缺省) | 多例 |
| | single | 单例(当点击返回时，会销毁) |
| | singleInstance | 完全单例(不会被销毁) |
| | result | 带有返回值的(可以向父页面带回返回值) |
| | singleInstanceResult | 带有返回值的完全单例(不会被销毁，可以向父页面带回返回值) |
| intentfilterAction | string | 如果页面要订阅通知时的标识 |
| intentfilterCategorys | [string1 string2 …] | 订阅时的过滤参数 |
| intentfilterPriority | number 0(缺省) | 发送有序广播时的优先级，默认值是0 |
## CtMobile应用程序展示
## Demo程序的运行
checkou后进入demo目录
```bash
$ npm install
$ npm run devDll
$ npm start
```
在浏览器上输入localhost:8000即可访问到demo的主页面
## Note程序的运行
Note是一个使用CtMobile-React来编写的一个便签程序,checkout后进入note
```bash
$ npm install
$ npm run devDll
$ npm start
```
在浏览器上输入localhost:8001即可访问到demo的主页面。
## 讨论群
## 许可
[MIT](/LICENSE)