Skip to content

小程序生命周期

页面生命周期

js
代码执行顺序
onLoad() → onShow() → onshow() → 页面完全渲染完成onReady()

生命周期函数--监听页面加载
onLoad(options) { },
1.执行一次子页面back()跳转回来不会触发
2.只有页面销毁或者返回上一页在进入页面才会触发
3.请求的静态数据方法可以写在这里
4.options 可以拿到页面的传参

生命周期函数--监听页面初次渲染完成
onReady() { },
1.执行一次子页面back()跳转回来不会触发
2.只有页面销毁或者返回上一页在进入页面才会触发
3.特殊情况有用自动获取验证码
eg:在当前页面有验证码的校验在这个生命周期可以调用获取验证码的方法自动获取验证码简化用户操作

生命周期函数--监听页面
onShow() { },
1.当前页面被唤醒就会触发一次
2.通常需要动态刷新的数据方法请求写在这里
3.通过方法可以拿到传参
4.通过

生命周期函数--监听页面隐藏
onHide() { },

生命周期函数--监听页面卸载
onUnload() { },
1.通常用于销毁定时器

页面相关事件处理函数--监听用户下拉动作
onPullDownRefresh() { },

页面上拉触底事件的处理函数
onReachBottom() { },
1.通常用户触底加载更多数据列表的上拉加载更多数据

用户点击右上角分享
onShareAppMessage() { }
1.不要小看他是一个坑页面最好都有
eg:分享功能多数情况下都可以用到而且全局封装分享功能每个页面都需要有这个分享的方法

组件生命周期

js
代码执行顺序
created() → attached() → 组件渲染完成ready()

在组件实例进入页面节点树时执行
attached() { },
1.执行一次组件实例初始化触发
2.通常用于写请求

在组件实例被从页面节点树移除时执行
detached() { },
1.执行一次组件实例被销毁时触发

特殊的生命周期不常用
1.created在组件实例刚刚被创建时执行
2.ready在组件在视图层布局完成后执行

组件生命周期

js
组件的的生命周期建议在 lifetimes 字段内进行声明这是推荐的方式其优先级最高

Component({ =
  lifetimes: {
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
})

// 以下是旧式的定义方式,可以保持对 2.2.3 版本基础库的兼容
attached: function() {
  // 在组件实例进入页面节点树时执行
},
detached: function() {
  // 在组件实例被从页面节点树移除时执行...
}