Page(Object)
Page(Object)
函数用来注册一个页面。接受一个 Object
类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。
Object 参数说明:
属性 | 类型 | 描述 |
---|---|---|
data | Object | 页面的初始数据 |
onLoad | Function | 生命周期回调—监听页面加载 |
onShow | Function | 生命周期回调—监听页面显示 |
onReady | Function | 生命周期回调—监听页面初次渲染完成 |
onHide | Function | 生命周期回调—监听页面隐藏 |
onUnload | Function | 生命周期回调—监听页面卸载 |
onPullDownRefresh | Function | 监听用户下拉动作 |
onReachBottom | Function | 页面上拉触底事件的处理函数 |
onShareAppMessage | Function | 用户点击右上角转发 |
onPageScroll | Function | 页面滚动触发事件的处理函数 |
onResize | Function | 页面尺寸改变时触发,详见 响应显示区域变化 |
onTabItemTap | Function | 当前是 tab 页时,点击 tab 时触发 |
其他 | Any | 开发者可以添加任意的函数或数据到 Object 参数中,在页面的函数中用 this 可以访问 |
除了 Page
,作为高级用法,页面可以像自定义组件一样使用 Component
来创建,这样就可以使用自定义组件的特性,如 behaviors
等。具体细节请阅读 Component
构造器 章节。
初始数据
data
是页面第一次渲染使用的初始数据。
页面加载时,data
将会以JSON
字符串的形式由逻辑层传至渲染层,因此data
中的数据必须是可以转成JSON
的类型:字符串,数字,布尔值,对象,数组。
渲染层可以通过 WXML 对数据进行绑定。
比如 wxml
和 js
文件可以这么写:
|
|
|
|
声明周期回调函数
生命周期的触发以及页面的路由方式详见
onLoad(Object query)
:页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。onShow()
:页面显示/切入前台时触发。onReady()
:页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。onHide()
:页面隐藏/切入后台时触发。 如navigateTo
或底部tab
切换到其他页面,小程序切入后台等。onUnload()
:页面卸载时触发。如redirectTo
或navigateBack
到其他页面时。
页面处理函数
onPullDownRefresh()
:监听用户下拉刷新事件。可以通过
wx.startPullDownRefresh
触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。当处理完数据刷新后,
wx.stopPullDownRefresh
可以停止当前页面的下拉刷新。
onReachBottom()
:监听用户上拉触底事件。onPageScroll(Object)
:监听用户滑动页面事件。Object
属性scrollTop
表示页面在垂直方向已滚动的距离(单位px)。注意:请只在需要的时候才在 page 中定义此方法,不要定义空方法。以减少不必要的事件派发对渲染层-逻辑层通信的影响。
onShareAppMessage(Object)
:监听用户点击页面内转发按钮(`` 组件open-type="share"
)或右上角菜单“转发”按钮的行为,并自定义转发内容。注意:只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮
- Object 参数:
from
:转发事件来源。button
:页面内转发按钮;menu
:右上角转发菜单;target
:如果from
值是button
,则target
是触发这次转发事件的button
,否则为undefined
webViewUrl
:页面中包含组件时,返回当前的url
- 此事件需要 return 一个 Object,用于自定义转发内容,返回内容如下:
title
:转发标题,默认是当前小程序名称;path
:转发路径,默认是当前页面 path。必须是以 / 开头的完整路径;imageUrl
:自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。
示例代码:
1 2 3 4 5 6 7 8 9 10 11 12
Page({ onShareAppMessage(res) { if (res.from === 'button') { // 来自页面内转发按钮 console.log(res.target) } return { title: '自定义转发标题', path: '/page/user?id=123' } } })
- Object 参数:
onResize(object)
:小程序屏幕旋转时触发。详见 响应显示区域变化TabItemTap(Object)
:点击 tab 时触发。Object
属性index
、pagePath
、text
。1 2 3 4 5 6 7
Page({ onTabItemTap(item) { console.log(item.index) console.log(item.pagePath) console.log(item.text) } })
组件事件处理函数
Page
中还可以定义组件事件处理函数。在渲染层的组件中加入事件绑定,当事件被触发时,就会执行 Page 中定义的事件处理函数。
比如在 wxml
和 js
中写入以下的两段代码:
|
|
|
|
路由
Page.route
:到当前页面的路径,类型为String
。
|
|
setData
Page.prototype.setData(Object data, Function callback)
:函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data
的值(同步)。
参数说明:
字段 | 类型 | 必填 | 描述 | 最低版本 |
---|---|---|---|---|
data | Object | 是 | 这次要改变的数据 | |
callback | Function | 否 | setData引起的界面更新渲染完毕后的回调函数 | 1.5.0 |
Object
以 key: value
的形式表示,将 this.data
中的 key
对应的值改变成 value
。
其中 key 可以以数据路径的形式给出,支持改变数组中的某一项或对象的某个属性,如 array[2].message,a.b.c.d,并且不需要在 this.data 中预先定义。
注意:
- 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致。
- 仅支持设置可 JSON 化的数据。
- 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。
- 请不要把 data 中任何一项的 value 设为
undefined
,否则这一项将不被设置并可能遗留一些潜在问题。
示例代码:
|
|
|
|
生命周期
下图表示了一个页面的声明周期: