微信小程序生命周期钩子

郭浪 Lv3

微信小程序的生命周期钩子从大的方面分为三种,应用级、组件级和页面级。每个级别都有自己的几个生命周期钩子有些钩子的名字是一样的要注意区分。

一、应用生命周期钩子

onLaunch(options):小程序初始化的时候触发,全局只触发一次。

1
2
3
4
5
App({
onLaunch: function(options) {
// 在小程序初始化时执行的代码
}
})

onShow(options):小程序从后台进入前台的时候会触发(我一般管这个叫激活钩子)。

1
2
3
4
5
App({
onShow: function(options) {
// 在小程序启动或从后台进入前台时执行的代码
}
})

onHide():小程序从前台进入后台的时候会触发一次(失活钩子)。

1
2
3
4
5
App({
onHide: function() {
// 在小程序从前台进入后台时执行的代码
}
})

onError(error):小程序发生一些脚本错误或者API调用失败的时候触发。

1
2
3
4
5
App({
onError: function(error) {
// 在小程序发生错误时执行的代码
}
})

二、页面生命周期钩子

onLoad(options):页面加载的时候会触发,可以获得页面的参数。

1
2
3
4
5
Page({
onLoad: function(options) {
// 在页面加载时执行的代码,可以使用options参数获取页面参数
}
})

onShow():页面显示的时候触发。

1
2
3
4
5
Page({
onShow: function() {
// 在页面显示时执行的代码
}
})

onReady():页面初次渲染完成时触发

1
2
3
4
5
Page({
onReady: function() {
// 在页面初次渲染完成时执行的代码
}
})

onHide():页面隐藏时触发

1
2
3
4
5
Page({
onHide: function() {
// 在页面隐藏时执行的代码
}
})

onUnload():页面卸载的时候触发

1
2
3
4
5
Page({
onUnload: function() {
// 在页面卸载时执行的代码
}
})

三、组件生命周期钩子

created():组件实例刚刚被创建,属性计算和方法之前触发

1
2
3
4
5
Component({
created: function() {
// 在组件实例被创建时执行的代码
}
})

attached():组件实例进入到页面节点树时触发(挂载之前)

1
2
3
4
5
Component({
attached: function() {
// 在组件实例进入页面节点树时执行的代码
}
})

ready():组件布局完成后触发

1
2
3
4
5
Component({
ready: function() {
// 在组件布局完成后执行的代码
}
})

moved():组件在节点树中移动的时候触发

1
2
3
4
5
Component({
moved: function() {
// 在组件在节点树中移动时执行的代码
}
})

detached():组件实例从页面节点树中被移除时触发。

1
2
3
4
5
Component({
detached: function() {
// 在组件实例从页面节点树中被移除时执行的代码
}
})

四、页面上用户触发的事件钩子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
page({
// 监听用户下拉动作
onPullDownRefresh() {},

// 页面上拉触底事件的处理函数
onReachBottom() {},

// 用户点击右上角转发
onShareAppMessage() {},

// 用户点击右上角转发到朋友圈
onShareTimeline() {},

// 用户点击右上角收藏
onAddToFavorites() {},

// 页面滚动触发事件的处理函数
onPageScroll() {},

// 页面尺寸改变时触发
onResize() {},

// 当前是 tab 页时,点击 tab 时触发
onTabItemTap() {},

// 页面销毁前保留状态回调
onSaveExitState() {}
})

  • 标题: 微信小程序生命周期钩子
  • 作者: 郭浪
  • 创建于: 2023-05-04 14:47:19
  • 更新于: 2023-08-05 10:37:12
  • 链接: https://redefine.ohevan.com/2023/05/04/微信小程序生命周期钩子/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。