小程序中的每一个页面, 都有一个对应的js文件, 调用js文件内的Page方法注册页面示例, Page方法接受一个 Object 类型参数，绑定页面的初始数据、生命周期回调、事件处理函数等。
官方文档
注册一个Page页面时，我们一般需要做什么？
- 在生命周期函数中发送网络请求，从服务器获取数据
- 初始化数据，wxml引用展示
- 监听wxml中的事件，绑定对应的事件函数
- 其他一些监听（比如页面滚动、上拉刷新、下拉加载等）
Page实例有哪些生命周期函数
监听页面的生命周期函数
// 注册一个页面, 页面也有自己的生命周期函数
Page({
// 监听页面的生命周期函数
// 页面加载出来时
onLoad: function (options) { },
// 页面显示出来时
onShow: function () { },
// 页面初次渲染完成时
onReady: function () { },
// 页面隐藏时
onHide: function () { },
// 页面被销毁时
})
所有函数:
image
Page实例生命周期
生命周期函数触发顺序参考下图
image
初始化数据
用request请求为例
wxml:
<view>
<view wx:for="{{list}}">{{item.id}}</view>
</view>
js:
Page({
data: {
list: []
},
onLoad: function(options) {
wx.request({
url: 'http://rap2api.taobao.org/app/mock/7058/index/hotLists',
success: (res)=> {
// this.list = res.data.lists Vue写法, 页面不能响应式更新
this.setData({
list: res.data.lists
})
},
})
}
})
事件监听
页面常用函数
-
onPullDownRefresh函数监听页面下拉刷新事件, 不过要同时在json文件里把下拉刷新功能打开
"enablePullDownRefresh": true -
onReachBottom函数监听用户上拉触底事件, 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance(单位px)。 -
onPageScroll函数监听页面的滚动, 他会返回一个obj, obj里面scrollTop的值是页面在垂直方向上已滚动的距离(单位px)
