page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。
object 参数说明：
| 属性 | 类型 | 描述 |
|---|---|---|
| data | object | 页面的初始数据 |
| onload | function | 生命周期函数--监听页面加载 |
| onready | function | 生命周期函数--监听页面初次渲染完成 |
| onshow | function | 生命周期函数--监听页面显示 |
| onhide | function | 生命周期函数--监听页面隐藏 |
| onunload | function | 生命周期函数--监听页面卸载 |
| onpulldownrefresh | function | 页面相关事件处理函数--监听用户下拉动作 |
| onreachbottom | function | 页面上拉触底事件的处理函数 |
| onshareappmessage | function | 用户点击右上角转发 |
| onpagescroll | function | 页面滚动触发事件的处理函数 |
| 其他 | any | 开发者可以添加任意的函数或数据到 object 参数中，在页面的函数中用 this 可以访问 |
示例代码：
//index.js
page({
data: {
text: "this is page data."
},
onload: function(options) {
// do some initialize when page load.
},
onready: function() {
// do something when page ready.
},
onshow: function() {
// do something when page show.
},
onhide: function() {
// do something when page hide.
},
onunload: function() {
// do something when page close.
},
onpulldownrefresh: function() {
// do something when pull down.
},
onreachbottom: function() {
// do something when page reach bottom.
},
onshareappmessage: function () {
// return custom share data when user share.
},
onpagescroll: function() {
// do something when page scroll
},
// event handler.
viewtap: function() {
this.setdata({
text: 'set some data for updating view.'
})
},
customdata: {
hi: 'mina'
}
})初始化数据将作为页面的第一次渲染。data 将会以 json 的形式由逻辑层传至渲染层，所以其数据必须是可以转成 json 的格式：字符串，数字，布尔值，对象，数组。
渲染层可以通过 wxml 对数据进行绑定。
示例代码：
<view>{{text}}</view>
<view>{{array[0].msg}}</view>page({
data: {
text: 'init data',
array: [{msg: '1'}, {msg: '2'}]
}
})onload: 页面加载
onshow: 页面显示
onready: 页面初次渲染完成
wx.setnavigationbartitle请在onready之后设置。详见生命周期onhide: 页面隐藏
navigateto或底部tab切换时调用。onunload: 页面卸载
redirectto或navigateback的时候调用。生命周期的调用以及页面的路由方式详见
onload参数
| 类型 | 说明 |
|---|---|
| object | 其他页面打开当前页面所调用的 query 参数 |
onpulldownrefresh: 下拉刷新
config的window选项中开启enablepulldownrefresh。wx.stoppulldownrefresh可以停止当前页面的下拉刷新。onreachbottom: 上拉触底
onpagescroll: 页面滚动
| 字段 | 类型 | 说明 |
|---|---|---|
| scrolltop | number | 页面在垂直方向已滚动的距离（单位px） |
onshareappmessage: 用户转发自定义转发字段
| 字段 | 说明 | 默认值 |
|---|---|---|
| title | 转发标题 | 当前小程序名称 |
| path | 转发路径 | 当前页面 path ，必须是以 / 开头的完整路径 |
示例代码
page({
onshareappmessage: function () {
return {
title: '自定义转发标题',
path: '/page/user?id=123'
}
}
})除了初始化数据和生命周期函数，page 中还可以定义一些特殊的函数：事件处理函数。在渲染层可以在组件中加入事件绑定，当达到触发事件时，就会执行 page 中定义的事件处理函数。
示例代码：
<view bindtap="viewtap"> click me </view>page({
viewtap: function() {
console.log('view tap')
}
})route 字段可以获取到当前页面的路径。
setdata 函数用于将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值。
接受一个对象，以 key，value 的形式表示将 this.data 中的 key 对应的值改变成 value。
其中 key 可以非常灵活，以数据路径的形式给出，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。
注意：
示例代码：
<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changetext"> change normal data </button>
<view>{{num}}</view>
<button bindtap="changenum"> change normal num </button>
<view>{{array[0].text}}</view>
<button bindtap="changeiteminarray"> change array data </button>
<view>{{object.text}}</view>
<button bindtap="changeiteminobject"> change object data </button>
<view>{{newfield.text}}</view>
<button bindtap="addnewfield"> add new data </button>
//index.js
page({
data: {
text: 'init data',
num: 0,
array: [{text: 'init data'}],
object: {
text: 'init data'
}
},
changetext: function() {
// this.data.text = 'changed data' // bad, it can not work
this.setdata({
text: 'changed data'
})
},
changenum: function() {
this.data.num = 1
this.setdata({
num: this.data.num
})
},
changeiteminarray: function() {
// you can use this way to modify a danamic data path
this.setdata({
'array[0].text':'changed data'
})
},
changeiteminobject: function(){
this.setdata({
'object.text': 'changed data'
});
},
addnewfield: function() {
this.setdata({
'newfield.text': 'new data'
})
}
})
以下内容你不需要立马完全弄明白，不过以后它会有帮助。
下图说明了 page 实例的生命周期。
