微信小程序的生命周期学习笔记-应用篇

在我们学习微信小程序的过程当中，我们会参考很多资料。在这些资料中，我们经常能够看到“生命周期”四个字，在前面的课程中也提到过。在这里做一个说明。

生命周期是一类函数的统称，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。他们的作用是负责监听一些操作或者状态，当到达了某些特殊的时间点或者发生了某些特殊的事件时，这些函数就会触发，我们可以通过这种函数来在相应的时间点或事件下，实现我们的小程序应有的功能。

我们在小程序中主要研究三种生命周期：应用生命周期、页面生命周期、组件生命周期。

应用生命周期

应用生命周期也称小程序生命周期，是三种生命周期中相比之下比较易懂的一种，所以我们会重点介绍应用生命周期。掌握了应用生命周期可以为页面生命周期和组件生命周期的掌握做好基础。

应用生命周期主要包含五个函数：

onLaunch

我们在创建一个新的微信小程序项目时，打开app.json文件，我们就可以看到一个叫做onLaunch的函数，如图。

Luanch在英文中是“启动”的意思。onLaunch函数在小程序启动并完成初始化后触发，只触发一次。如上图，小程序在读取用户的一些信息，可以在小程序的其他地方使用。

我们现在重新编写onLaunch函数如下。

onLaunch: function () {
    console.log("Launch");
}

这段程序所做的事情就是在小程序启动、完成初始化后，在调试器的console中输出一个“Launch”的字符串。

保存、编译后，我们在console中得到了“Launch”字符串，如图。

在onLaunch函数中，我们可以像其中添加自己想要进行的初始操作，例如获取用户信息、申请权限、获取服务器数据等，为小程序的后续功能提供方便。

onShow

Show，即为出现。在屏幕上从无到有，从非当前小程序变为当前小程序，即为出现一次。对于微信小程序的消失与重现，无非是从别的地方切到了这个小程序当中，把这个小程序切到了前台。

我们在onLaunch的同层级同样编写一个onShow函数如下，以测试onShow函数的执行时间点。（下面测试的onHide、onError和onPageNotFound都是在这个层级）

onShow: function () {
    console.log("Show");
}

在开发者工具中，有切后台的测试功能，即模拟各种情况之中将小程序从后台切回前台的状况。我们随意选择几种，每次将小程序切回前台，都会输出一个“Show”字符串。请大家自己尝试。

这里需要注意的是，小程序启动、进行初始化的时间点也属于出现一次。

将onShow函数和onLuanch函数放到一起，重新启动小程序，会发现，onLuanch的执行时间点早于onShow的执行时间点。

onHide

Hide，即为隐藏。与onShow相反，onHide的时间点是微信小程序被切到后台时开始执行。通过onHide函数，我们可以实现小程序被切到后台后，计时器暂停计时、统计切后台次数等自己想要的功能。

测试代码如下：

onHide: function () {
    console.log("Hide");
}

和之前的测试代码一样，在执行onHide函数时我们会在console中得到一个“Hide”字符串。

当我们点击开发者工具中切后台的按键的一瞬间，就可以得到“Hide”字符串了。大家可以自行尝试。

onError

Error是错误的意思。onError函数的执行时间点是在我们的代码运行出错时执行。

onError测试代码如下：

onError: function (err) {
    console.log("Error");
    console.log(err);
}

onError函数与其他函数不同，我们需要传递一个参数err来记录错误内容。当然这里给参数起的名字是err，起别的名字也可以，根据自己的习惯来命名即可。

这里我们给了onError函数两个任务：当代码执行出错时，先在console中输出“Error”字符串，然后把错误信息输出出来。

至于测试的方法有很多，例如我们可以在onLaunch或onShow中随便加一行错误代码，如下：

onShow: function () {
    console.log("Show");
    abc
}

这里abc就是一行错误代码。之所以会想到用onLaunch和onShow，是因为这两个函数在小程序一启动就会执行，方便测试。大家自己尝试。

onPageNotFound

Page Not Found，是页面没有找到的意思。换言之，我们提供的页面不存在，导致代码执行出现了错误。但是，在应用生命周期中的这个onPageNotFound，触发是有一定条件的，它只有在小程序最初启动时找不到启动页面才会触发，其他情况下不会触发。所谓的启动页面，可简单理解为小程序运行后的第一个页面。

我们先把测试代码写好：

onPageNotFound: function () {
    console.log("PageNotFound");
}

我们的测试方法是：更改编译模式。

我们首先在开发者工具的上方找到编译设置，点击普通编译右侧的倒三角，如图。

选择“添加编译模式”，修改里面的启动页面，将其中的页面修改成一个不存在的页面即可。大家可以自行测试。修改后编译，就会在console中输出“PageNotFound”的字符串了。

对于其他的找不到页面的情况，我们也可以去测试。例如在启动初始化时我们想要跳转到一个不存在的页面，这种情况下不触发onPageNotFound函数，我们可以在onLaunch函数中做出如下改动：

onLaunch: function () {
    wx.navigateTo({
      url: 'pages/123/123',
    })
}

我们在js文件和json文件中用wx.navigateTo实现导航功能，其效果与我们在wxml文件中写的

<navigate url="pages/123/123">abc</navigate>

相同。这里不进行详细介绍。

测试后我们会发现，这种情况下onPageNotFound不会被触发。

与应用生命周期相关的API

与应用生命周期相关的较主要的API有两种：

wx.getLaunchOptionsSync()

微信开放文档中的介绍：获取小程序启动时的参数，与App.onLaunch的回调参数一致。

我们先在onLaunch函数中写如下代码，以作测试：

onLaunch: function () {
    console.log(wx.getLaunchOptionsSync());
}

这段代码可以将wx.getLaunchOptionsSync()的返回值在console输出。运行后可以得到如下结果：

这些都是onLaunch函数的回调参数，我们可以通过wx.getLaunchOptionsSync()来获取这些参数。

wx.getLaunchOptionsSync()的相关值和referredInfo的结构，以及返回有效referredInfo的场景，详见微信开放文档：

https://developers.weixin.qq.com/miniprogram/dev/api/base/app/life-cycle/wx.getLaunchOptionsSync.html

wx.getEnterOptionsSync()

微信开放文档中的介绍：获取本次小程序启动时的参数。如果当前是冷启动，则返回值与 App.onLaunch 的回调参数一致；如果当前是热启动，则返回值与 App.onShow 一致。

冷启动，可以理解为小程序第一次启动，需要进行初始化的启动，根据之前我们的学习可知，进行初始化后，小程序将执行App.onLaunch和App.onShow两个函数。此时的wx.getEnterOptionsSync()返回App.onLaunch的参数。

热启动，可以理解为已经热过身一般，已经运行过，即为从后台将小程序切到前台。根据之前我们的学习，此时小程序只执行App.onShow。那么wx.getEnterOptionsSync()返回App.onShow的参数。

onShow: function () {
    console.log(wx.getEnterOptionsSync());
}

大家可以通过上面的代码，分别对以下两种情况进行测试：

a.冷启动：编译后运行

b.热启动：切后台后返回小程序

观察两种情况的结果，与之前我们测试wx.getLaunchOptionsSync()所得到的结果相比对，大家可以自己尝试。

其他与应用生命周期有关的API

获取参数的应用级事件

取消监听的应用级事件

此处不对以上API做详细介绍。大家可以借鉴上文介绍的两个API的研究方法，来对这些API进行学习。