Page(Object object)
Page() 用来注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。
参数
Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| data | Object | 否 | 页面初始化数据 | ||
| options | Object | 否 | 页面的组件选项，同 Component 构造器 中的 options | ||
| behaviors | [String] | 否 | 代码复用机制，同 Component 构造器 中的 behaviors | ||
| onLoad | Object | 否 | 页面加载时触发 | ||
| onShow | Object | 否 | 页面显示/切入前台时触发 | ||
| onReady | Object | 否 | 页面初次渲染完成时触发 | ||
| onHide | Object | 否 | 页面隐藏/切入后台时触发 | ||
| onBeforeUnload | Object | 否 | 页面销毁前触发 | ||
| onUnload | Object | 否 | 页面销毁时触发 | ||
| onPullDownRefresh | Object | 否 | 页面下拉刷新事件 | ||
| onReachBottom | Object | 否 | 页面上拉触底事件 | ||
| onPageScroll | Object | 否 | 页面滚动事件 | ||
| onResize | Object | 否 | 页面尺寸改变时触发 | ||
| onTabItemTap | Object | 否 | 当前是 tab 页面时，点击 tab 时触发 | ||
| 其他 | Any | 否 | 开发者可自由添加任意的 Function 或数据到 Object 参数中，用this 可访问 |
Tips： -更多方法参考 Component, 具体使用时也会详细说明。
示例代码：
Page({
data: {
userName: ""
},
onLoad: function(e) {
this.getName();
},
onReady: function() {
},
onShow: function() {
},
onHide: function() {
},
onUnload: function() {
},
onPullDownRefresh: function() {
},
onReachBottom: function() {
},
onShareAppMessage: function () {
},
onPageScroll: function() {
},
onTabItemTap(item) {
console.log("当前点击的是：",JSON.stringify(item))
},
getName: function() {
this.setData({
userName:"cortana"
})
},
customData: {
dName: 'cortana'
}
})
data
页面初始化时的数据。
data 中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。
视图层可以通过 MCML 对数据进行绑定。
示例代码：
<view>{{text}}</view>
Page({
data: {
text: 'Hello MoreCross'
}
})
生命周期回调函数
onLoad(Object object)
应用初始化完成时触发, 全局只触发一次。
参数
| 名称 | 类型 | 说明 | 最低版本 |
|---|---|---|---|
| query | Object | 打开当前页面路径中的参数 |
onShow()
页面显示/切入前台时触发。
onReady
页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备完成，可以和视图层进行交互。
onHide()
页面隐藏/切入后台时触发。
onBeforeUnload()
页面销毁前触发。与 mc.disablePagePressBack() 配合使用。
参数
| 名称 | 类型 | 说明 | 最低版本 |
|---|---|---|---|
| cancel | Boolean | true 表示页面被禁止返回（执行 mc.disablePagePressBack 后，手势或点击导航栏返回时为true，api 方式返回页面为 false） |
onUnload()
页面销毁时触发。
onPullDownRefresh()
页面下拉刷新事件。
- 需要在app.json的 window 选项中或 页面配置中开启
enablePullDownRefresh。 - 可以通过 mc.startPullDownRefresh 触发下拉刷新，调用后触发下拉刷，效果与用户手动下拉刷新一致。
- 当处理完数据刷新后，可通过 mc.stopPullDownRefresh 停止当前页面的下拉刷新。
onReachBottom()
页面上拉触底事件。
onPageScroll(Object object)
页面滚动时触发。
参数
| 名称 | 类型 | 说明 | 最低版本 |
|---|---|---|---|
| scrollTop | Number | 页面在垂直方向已滚动的距离（单位px） |
onResize()
页面尺寸改变时触发（如屏幕旋转）。
onTabItemTap(Object object)
当前是 tab 页面时，点击 tab 时触发。
参数
| 名称 | 类型 | 说明 | 最低版本 |
|---|---|---|---|
| index | Number | 被点击tabItem的索引号，从0开始 | |
| pagePath | String | 被点击tabItem的页面路径 | |
| text | String | 被点击tabItem的按钮文字 |
#页面对象函数
Page.route
到当前页面的路径，类型为String。 示例代码：
Page({
onShow: function() {
console.log(this.route)
}
})
Page.route
Page.prototype.setData(Object data, Function callback) setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。
| 名称 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| data | Object | 是 | 这次要改变的数据 | ||
| callback | Function | 否 | setData引起的界面更新渲染完毕后的回调函数 |
Object 以 key: value 的形式表示，将 this.data 中的 key 对应的值改变成 value。
注意：
- 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
- 仅支持设置可 JSON 化的数据。
- 单次设置的数据量不宜过大，请尽量避免一次设置过多的数据。
- 请不要把 data 中任何一项的 value 设为 undefined。
示例代码：
<!--index.mcml-->
<view>{{message}}</view>
<button bindtap="changeMessage"> 修改消息值 </button>
//index.js
Page({
data: {
title: '我是title',
num: 0,
array: [{name: 'cortana'}],
object: {
text: 'init data'
}
},
changeText: function() {
this.setData({
title: '新标题'
})
},
changeNum: function() {
this.setData({
num: this.data.num +1
})
},
changeArray: function() {
this.setData({
'array[0].name':'Mary'
})
},
changeObject: function(){
this.setData({
'object.name': 'Mary'
});
}
})
PageObject[] getCurrentPages()
全局方法，获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页面。
注意：
- 不要尝试修改页面栈，会导致路由以及页面状态错误。
- 不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。