乐趣区

关于前端:微信小程序-app-page与component的生命周期

生命周期执行程序

app 生命周期

冷启动:用户首次关上或小程序被微信被动销毁后再次关上的状况,此时小程序须要从新加载启动。

热启动: 用户曾经关上过小程序,在肯定工夫内再次关上该小程序,此时无需重新启动。只需将后盾态的小程序切换到前台,这个过程就是热启动

  • onLaunch:小程序初始化实现(冷启动)时触发
  • onShow: 小程序热启动时触发
  • onHide:小程序从前台进入后盾触发
  • onError:小程序产生脚本谬误时触发
  • onPageNotFound:要关上的页面不存在时触发

page 页面生命周期

  • onLoad:页面加载时触发,只会首次渲染的时候执行一次
  • onReady: 页面首次渲染实现时触发,只会首次渲染的时候执行一次。该生命周期示意此时页面曾经能够和视图层产生交互
  • onShow:每次关上页面时都触发,当 navigateTo 或底部 tab 切换时调用
  • onHide:当页面暗藏时触发,当 redirectTo 或 navigateBack 的时候调用
  • onUnload:当页面卸载时触发,当 redirectTo 或 navigateBack 的时候调用
  • onPullDownRefresh:当用户下拉刷新事件时触发
  • onReachBottom:当用户上拉触底事件时触发
  • onShareAppMessage:当用户转发页面时触发
  • onPageScroll:当用户滑动页面时触发
  • onResize:当屏幕

component 组件生命周期

lifetimes 中的生命周期:

  • created:组件实例化时触发,此时还不能够与操作节点与更改数据
  • attached:组件实例进入页面节点树时触发,此能够更改数据,但还不能够操作视图层构造
  • ready:组件在页面视图层实现布局后触发,此时能够操作视图层构造
  • moved:当组件实例被移到页面节点树其余地位时触发
  • detached:当组件实例被页面节点树中移除时触发
  • error:当组件出错时触发

pageLifetimes 中的生命周期:

  • show:组件所在页面被展现时触发
  • hide:组件所在的页面被暗藏时触发
  • resize:组件所在的页面尺寸变动时触发

三者之间的生命周期程序

app 与 page

## 程序初始化
App onLaunch
App onShow
Page onLoad
Page onShow
Page onReady

## 程序进入后盾
Page onHide
App onHide
 

page 与 component

## 页面显示
Component created
Component attached
Page onLoad
Page onShow
Component ready
Page onReady

## 页面销毁
Page onUnload
Component detached

上拉刷新、下拉加载的实现

次要利用 page 的 onPullDownRefreshonReachBottom生命周期来实现。

  • onPullDownRefresh 中刷新数据
  • onReachBottom中获取下一分页的数据
退出移动版