美文网首页
小程序的生命周期 base 官方文档

小程序的生命周期 base 官方文档

作者: 9d0edee7bcb0 | 来源:发表于2018-03-17 15:55 被阅读0次

参读过小程序文档的同学应该会发现小程序的设计和VUE有诸多相似之处,比如小程序的数据绑定方式、渲染方式和生命周期有诸多相似之处。然而相似归相似,由于小程序的应用场景繁多且情况不单一,导致小程序的生命周期比VUE的生命周期情况更为复杂。所以我们这篇文章就谈下我们小程序的生命周期。
我们知道小程序的页面分为两种 : tab页面 和 非tab页面 。这里这两种页面的情况较为独立,没有太大的穿插性,所以我们可以分开记忆,这点对我们来说是非常棒的。否则错综复杂,云里雾里。好了,我们下面就开始进入正题,本文的理解都基于官方文档的介绍,如有错误,请大佬纠正在下,感激不尽。
情况一,非tab页面
在非tab页面中,有几种跳转情况,这里请看下面官方的截图


image.png

我们从官方文档介绍这里开始分析一波。
当首次进入小程序的时候,会走'两套流程'.第一个流程就是我们的入口 app.js,第二个就是我们的首页的生命周期(onload,onshow....)。
我们页面路由的变动方式有五种
方式一
wx.navigateTo : 当页面使用小程序api的wx.navigateTo跳转到其他页面的时候(A to B),A会执行钩子函数onHide,然后B页面开始执行加载(onLoad)和显示(onShow)。注意:A只是hide了,并没有被卸载(onUnload),所以你会发现,跳转到B页面后,左上角还有一个物理返回键在那,就像下面


image.png
这里又有一点剧透请注意了: 物理返回键其实就是调用了我们的路由Api中的wx.navigateBack。执行这个api,当前打开中的页面会被卸载,原来的页面会被show,但是不会再去执行onLoad了!!!
wx.navigateBack其实就是从页面栈中去找你要的目标页面,当找到后,原来已经打开的页面都会被退出(页面出栈),直到返回到目标页面为止,单后只会执行目标页面的onShow。其实说到这里,有一个结论:只要在页面是栈中的,并且你执行的是'返回页面(wx.navigateBack)'的方式回到目标页面,就只会让目标页面执行onShow。因为他是返回原来的历史记录去找,而不是新压一个页面入栈。
方式二
wx.redirectTo : 这个方式叫页面重定向,他其实就类似于我们url的replace方法,将原来的页面出栈(onUnload),替换成我们的目标页面。不要误会了,这个替换其实也就是将新页面压入页面栈中。因此新页面会去执行onLoad以及onShow。这个方法比较好理解,我们不多做赘述。
方式三

wx.navigateBack : 在页面栈中去找目标页面,在找到后,就让页面栈里的页面不断出栈,直到返回到目标页面为止。目标页面执行onShow。
情况四
wx.reLaunch: 页面全部出栈,只留下新页面(简单粗暴)。
----------------------------------------------以上都是非tab页面的路由更替情况
这里开始,开始讨论和tab页面路由更替有关的情况,上面的情况都是非tab页面的,有tab页面参与的我们需要单独去记忆,因为这样好记。
请看下面的图(没错,我就是官网的搬运工)


image.png
上面图中的红色文字是根据官网的介绍进行翻译的,这里我做几点解释
相扣顺序 : A页面打开了B页面 ,我管这种页面关系叫相扣顺序的两个页面
A框和B框表示 tab页面A和tab页面B,没有框的C和D就表示非tab页面C和非tab页面D

----------------------------------以上为全文内容,如有错误请指正,如果觉得还行请来个赞,谢谢哈

相关文章

网友评论

      本文标题:小程序的生命周期 base 官方文档

      本文链接:https://www.haomeiwen.com/subject/kzljqftx.html