2.4 生命周期与页面跳转
在Android、iOS开发中，每个页面都有属于自己的生命周期，包括创建页面执行、进入页面执行、离开页面执行等。微信小程序的页面样式与App非常相似，所以生命周期也大体相同。在一个应用有了页面后，它们之间就要进行跳转、返回了，这就是所谓的页面跳转功能。本节将会创建一个新的Demo，讲一讲页面的生命周期与跳转。
2.4.1 生命周期函数
【示例2-4】
（1）新建一个项目PageTest，AppID选择测试号，如图2.3所示。
图2.3 创建新项目PageTest
（2）创造两个页面，用于本节的演示。新建两个文件夹home、detail，并在文件夹下创建同名的Page。之后删除项目自动生成的index、logs这两个文件夹，如图2.4所示。
图2.4 创建新的Page
（3）现在可能会报错：找不到index和logs页面。只需要在app.json中删除依赖即可，代码如下：
提示
第1章讲过，pages这个数组是存放页面的，如果有不存在的页面，它肯定会报错。那么如何控制首页加载哪个页面呢？很简单，写在第1行就会被加载为首页。读者可以将第1行的home改成detail进行测试。
（4）将app.js中多余的代码都删除掉，代码如下：
（5）现在准备工作已经完成。打开home.js，可以看到里面已经生成了一些代码，删掉无用的代码，给生命周期函数加上注释和console.log来监控它们的执行状态，代码如下：
（6）运行代码，可以看到控制台中的输出，如图2.5所示。
图2.5 生命周期函数的输出
通过输出项，我们可以得出以下几个结论：
· 执行顺序为onLoad、onShow、onReady。
· onLoad方法在创建时会执行，只执行一次，可以进行一些数据操作。
· onShow方法会在页面返回时执行，下一节会进行测试。
· onReady方法会在页面渲染完成后执行一次，可以执行一些UI操作。
页面的切换和隐藏通常是在页面跳转时发生的，所以剩下的几个方法和onShow方法的测试留到下一小节。
2.4.2 页面跳转
在上一小节，我们对组件的生命周期做了讲解，本小节中主要讲解页面跳转，并结合起来深入解释生命周期。
想要进行页面跳转，主要有两种方法，下面通过示例来说明。
【示例2-5】
本例实现了从home页跳转到detail页，代码如下：
（1）方法一：这个跳转方式最为常见，创造一个按钮，然后在wxs中实现点击事件，其中url填写跳转页面的相对路径即可。
（2）方法二：利用微信提供的navigator组件，可以直接通过设置url和open-type实现跳转。navigator是导航组件的一种，在后面的章节会有详细讲解，当前优先使用在JS中完成跳转的方法。
接下来点击页面跳转，可以看到控制台输出，如图2.6所示。
图2.6 跳转页面输出
可以看到，在页面跳转的时候输出了“执行onHide”，那么为什么没有出现“执行onUnload”呢？因为跳转页面后home页只是隐藏的，并没有被销毁。
为了测试onUnload方法的执行，我们可以在detail.js的onUnload方法中添加输出，代码如下：
重新运行程序进行测试，在页面跳转后，单击左上角的返回按钮，可以看到控制台的输出，如图2.7所示。
图2.7 跳转页面输出
从图2.7中可以看到，离开detail页时执行了onUnload方法，离开时再次进入了home页，所以onShow方法也再次执行了。
最后介绍onUnload和onShow的应用场景。比如一个页面有一个计时器，我们想在页面销毁的时候进行关闭，就可以把停止方法写在onUnload方法中，如果写在onHide方法中，就可能会出现返回后计时器中断的现象。onShow方法一般用于页面刷新，比如再次返回该页面，想要刷新数据时，就可以把网络请求写在onShow方法中，保持页面数据为最新。只要灵活掌握这几个生命周期方法，本节的任务就算完成了。