小程序中生命周期的解析（附代码）

本篇文章给大家带来的内容是关于小程序中生命周期的解析（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

App({ onLaunch: function () { }, onShow: function (options) { }, onHide: function () { }, onError: function (msg) { } })

• pages
  一个程序启动后,执行onLaunch—>onShow后,接着加载首页;加载首页onLoad—>onShow—>onReady

Page({
  data: {
  },
  onLoad: function (options) {
  },
  onReady: function () {
  },
  onShow: function () {
  },
  onHide: function () {
  },
  onUnload: function () {
  },
  onPullDownRefresh: function () {
  },
  onReachBottom: function () { 
  },
  onShareAppMessage: function () {
  }
})

此时,你已经看到了渲染好的首页了!

如果此时,你想看下你的帅帅的或者美美的自拍照,按下了Home键或者点击了右上角的退出小圆圈,此时小程序发生了什么呢?
- 首页加载 onLaunch—>onShow—>onLoad—>onShow—>onReady 加载完成
- 执行退出,小程序其实是执行了onHide(page的onHide)—>onHide(app的onHide)
如果你欣赏完自拍照后,你又想起了刚才的小程序,又感兴趣想瞅瞅,咋办呢?打开呗!打开之后,想想小程序会做什么呢?难道重新加载么?
- NO NO NO!如果你的自拍欣赏时间不是很长,或者内存十分足够小程序呆一会的话,小程序只需要被唤醒一下就好喽!^.^
- onLaunch—>onShow—>onLoad—>onShow—>onReady—>onHide(page)—>onHide(app)这是刚才加载好首页,又退出后的生命线,此时如果你又进来了,那么程序将会这样走:onShow(app)—>onShow(page)

这个时候,对于一个页面的基本加载,应该没啥问题了吧

没啥问题,咱就直接上进阶干货了

1. 打开新的页面[新页面入栈]

• 原来页面:onHide

• 新的页面:onLoad—>onShow—>onReady

2. 页面重定向[原页面出栈,新页面入栈]

• 原来页面:onUnload

• 新的页面:onLoad—>onShow—>onReady

3. 页面返回[新页面出栈,显示原页面]

• 新的页面:onUnload

• 原来页面:onShow

4. Tab切换

• 新的页面:onHide

• 原来页面: 情景1(已加载):onShow 情景2(未加载):onLoad—>onShow—>onReady

相关推荐：

小程序实现自动加载的完整代码

微信小程序实例：如何实现跑马灯的动画效果（附代码）

以上就是小程序中生命周期的解析（附代码）的详细内容，更多请关注微课江湖其它相关文章！