【愚公系列】2022年02月 微信小程序-页面生命周期
文章目录
一、页面生命周期
1.JS使用
注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。
小程序页面的生命周期函数如下：
属性 | 类型 | 说明 |
|---|---|---|
data | Object | 页面的初始数据 |
options | Object | 页面的组件选项，同 Component 构造器 中的 options ，需要基础库版本 2.10.1 |
behaviors | String Array | 类似于mixins和traits的组件间代码复用机制，参见 behaviors，需要基础库版本 2.9.2 |
onLoad | function | 生命周期回调—监听页面加载 |
onShow | function | 生命周期回调—监听页面显示 |
onReady | function | 生命周期回调—监听页面初次渲染完成 |
onHide | function | 生命周期回调—监听页面隐藏 |
onUnload | function | 生命周期回调—监听页面卸载 |
onPullDownRefresh | function | 监听用户下拉动作 |
onReachBottom | function | 页面上拉触底事件的处理函数 |
onShareAppMessage | function | 用户点击右上角转发 |
onShareTimeline | function | 用户点击右上角转发到朋友圈 |
onAddToFavorites | function | 用户点击右上角收藏 |
onPageScroll | function | 页面滚动触发事件的处理函数 |
onResize | function | 页面尺寸改变时触发，详见 响应显示区域变化 |
onTabItemTap | function | 当前是 tab 页时，点击 tab 时触发 |
onSaveExitState | function | 页面销毁前保留状态回调 |
其他 | any | 开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问。这部分属性会在页面实例创建时进行一次深拷贝。 |
2.页面特殊事件处理
2.1 onPullDownRefresh()
监听用户下拉刷新事件。
- 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
- 可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
- 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
2.2 onReachBottom()
监听用户上拉触底事件。
- 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
- 在触发距离内滑动期间，本事件只会被触发一次。
2.3 onPageScroll(Object object)
监听用户滑动页面事件。
2.4 onAddToFavorites(Object object)
监听用户点击右上角菜单“收藏”按钮的行为，并自定义收藏内容。
Page({
onAddToFavorites(res) {
// webview 页面返回 webViewUrl
console.log('webViewUrl: ', res.webViewUrl)
return {
title: '自定义标题',
imageUrl: 'http://demo.png',
query: 'name=xxx&age=xxx',
}
}
})2.5 onShareAppMessage(Object object)
监听用户点击页面内转发按钮（button 组件 open-type=“share”）或右上角菜单“转发”按钮的行为，并自定义转发内容。
Page({
onShareAppMessage() {
const promise = new Promise(resolve => {
setTimeout(() => {
resolve({
title: '自定义转发标题'
})
}, 2000)
})
return {
title: '自定义转发标题',
path: '/page/user?id=123',
promise
}
}
})2.6 onShareTimeline()
监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。
2.7 onResize(Object object)
小程序屏幕旋转时触发。
2.8 onTabItemTap(Object object)
点击 tab 时触发
Page({
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
}
})2.9 onSaveExitState()
每当小程序可能被销毁之前，页面回调函数 onSaveExitState 会被调用，可以进行退出状态的保存。
3.组件特殊事件处理
3.1 页面点击事件
<view bindtap="viewTap"> click me </view>Page({
viewTap: function() {
console.log('view tap')
}
})3.2 页面路由
Page({
onShow: function() {
console.log(this.route)
}
})3.3 数据改变
<!--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' // 不要直接修改 this.data
// 应该使用 setData
this.setData({
text: 'changed data'
})
},
changeNum: function() {
// 或者，可以修改 this.data 之后马上用 setData 设置一下修改了的字段
this.data.num = 1
this.setData({
num: this.data.num
})
},
changeItemInArray: function() {
// 对于对象或数组字段，可以直接修改一个其下的子字段，这样做通常比修改整个对象或数组更好
this.setData({
'array[0].text':'changed data'
})
},
changeItemInObject: function(){
this.setData({
'object.text': 'changed data'
});
},
addNewField: function() {
this.setData({
'newField.text': 'new data'
})
}
})二、具体使用
Page({
// 页面第一次渲染使用的初始数据
data: {
text: "This is page data."
},
onLoad: function(options) {
// 生命周期回调—监听页面加载
},
onShow: function() {
// 生命周期回调—监听页面显示
console.log(this.route)//页面路由
},
onReady: function() {
// 生命周期回调—监听页面初次渲染完成
},
onHide: function() {
// 生命周期回调—监听页面隐藏
},
onUnload: function() {
// 生命周期回调—监听页面卸载
},
onPullDownRefresh: function() {
// 监听用户下拉动作
},
onReachBottom: function() {
// 页面上拉触底事件的处理函数
},
onShareAppMessage: function (options) {
// 用户点击右上角转发
if (options.from === 'button') {
// 来自页面内转发按钮
console.log(res.target)
}
return {
title: '自定义转发标题',
path: '/page/user?id=123'
}
},
onShareTimeline: function () {
// 用户点击右上角转发到朋友圈
},
onAddToFavorites: function (options) {
// 用户点击右上角收藏
// webview 页面返回 webviewUrl
console.log('WebviewUrl: ', options.webviewUrl)
return {
title: '自定义标题',
imageUrl: 'http://demo.png',
query: 'name=xxx&age=xxx',
}
},
onPageScroll: function(options) {
// 页面滚动触发事件的处理函数
},
onResize: function() {
// 页面尺寸改变时触发
},
onTabItemTap(item) {
// 当前是 tab 页时，点击 tab 时触发
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
//开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问
//页面<view bindtap="viewTap"> click me </view>处理函数
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
}, function() {
// this is setData callback
})
},
})腾讯云开发者
