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

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

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

原因是 : 整个小程序应用有2个线程.

一个线程做视图渲染.一个线程做逻辑处理. 这样你差不多应该清楚了 : wxml和wxss文件主要做视图展示,而js文件主要是做响应事件的逻辑处理,分工明确!

其次,我们再来分析:我们使用小程序会发现有很多的页面,那么谁来管理这些页面呢?页面和整个程序之间又是个什么样儿的关系呢?

[x] 一个app,有app和pages构成,有着不同的生命周期app 一个程序启动后,执行onLaunch—>onShow

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 () { }})-

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

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

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

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

原来页面:onHide新的页面:onLoad—>onShow—>onReady

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

原来页面:onUnload新的页面:onLoad—>onShow—>onReady

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

新的页面:onUnload原来页面:onShow

Tab切换

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。