同学们大家好,我是小伊同学,上一节课中我们给大家介绍了回调函数的概念,今天我们一起来了解一下常用的回调函数。
下面,我们就来逐一介绍这些函数。
当这个页面第一次被加载时,函数的执行顺序为onLoad到onShow到onReady,依次执行这三个。其中,onLoad在页面加载时触发。一个页面只会调用一次,可以在onLoad的参数中获取打开当前页面路径中的参数。因此,我们看到一般编译器自动创建的onLoad函数参数部分有值options,而其他函数为空。
onShow一般在页面显示/切入前台时触发。在第一次加载的流程中,会被执行一次。onReady在页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互,例如实现数据绑定。
当onReady执行完毕后,我们的页面就可以显示了,无论我们跳转到了什么其他页面,只要不关闭这个页面,就能够随时切换到这个页面。此时的状态我们称之为激活状态。
当页面进入激活状态后,我们就有可能触发onShow和onHide函数。当页面显示/切入前台时触发onShow函数。当页面隐藏/切入后台时触发onHide函数。当页面卸载时触发onUnload。
那么这几种情况都是什么样子的呢?下面我们用一个生活中的例子来讲解什么是页面的显示、隐藏和前后台切入。大家都使用过浏览器上过网。当我们打开一个浏览器时,一般默认会加载首页,这个过程就和我们打开一个小程序类似。我们打开小程序,会先下载小程序代码并检查版本,然后开始加载小程序框架,之后进入在app.json中定义的第一个页面,即首页。当页面进入激活态后就相当于第一个网页在浏览器窗口中呈现给我们了。在浏览器中,一个标签页就相当于小程序中的一个页面,此时,浏览器中只有一个页面,但是,我们可以在一个浏览器中打开很多标签页,我们每次只能显示一个页面,此时其余页面均被隐藏起来了,我们在不同标签页之间切换显示其实就是小程序中页面的显示与隐藏的过程。需要注意的是,我在已经加载了的页面之间切换时与我打开新的标签页时有区别的。在已经加载了的页面之间进行切换,会先将原有页面隐藏,执行其onhide函数,然后显示新的页面,即执行新页面的onshow函数。而对于跳转到新的未曾加载过页面,则是先执行原有页面的onhide函数,进而按照第一次加载新页面的流程,依次执行onload、onshow和onready,也就是上一张ppt讲的过程。
其次,当我们在电脑上将浏览器窗口缩小到任务栏中,转而开始其他任务,这个过程就是切入后台,也就是我在微信小程序中点击右上角的按钮暂时隐藏小程序,然后可以查看其他小程序或者打开其他app。此时小程序将在后台继续运行,这是切入后台。当我们重新打开小程序,相应地,就是切入前台了。对应于浏览器的例子,就是我点击任务栏上浏览器的图标,重新将浏览器之前我浏览的那一页铺满电脑屏幕。同样,切入后台时,会执行当前显示的那个页面的onhide函数,切回来时,会执行其onshow函数。
我们看到,onshow函数每次看到页面都会加载一次,第一次加载会执行,页面显示或者切入前台也会执行,因此,我们一般将用于实时更新当前页面数据的代码放在onshow中。而对于页面的基础内容相关数据,我们往往放在onload中,仅被加载一次。当我们在浏览器窗口中关闭一个网页时,调用的就是这个页面的onunload函数。如果有需要,我们也可以将合适的代码写在这里。
当然,对于卸载了的页面也可以重新加载,此时就要重新执行第一次加载的过程,就相当于在浏览器中,你关闭了一个页面,然后当然可以复制网址再次打开这个页面,不过这样来说会增加等待的时间,小程序中也是一样,对于需要来回切换经常使用的页面,我们一般不需要对其卸载。这些就是我们学习生命周期的意义,我们能够让需要的代码在合适的位置执行。
对于上述这些操作,例如页面显示、隐藏和卸载,我们都是能够在代码中实现的。一般我们通过在按钮的响应函数中添加这些代码,使用户点击按钮跳转到响应的页面,完成我们的业务逻辑。
除了上述的一些函数,在page的内容中还定义了一些用于特定动作的函数,比如:下拉刷新动作的函数、上拉触底动作的函数和转发分享的函数。当我们希望这些动作发生后能够执行一些操作,那么我们只要将代码写在相应的函数中即可。例如,一般用户期望下拉页面时对页面刷新,那么我们只需要在onPullDownRefresh中重新获取数据并将数据更新到wxml中即可。
小程序中这些函数的函数名都是固定的、专有的,当然不是必须的,不需要的函数可以不写或者内容为空。