我的知识记录分享

3.6 生命周期

2020-10-9 糖果小宝 小程序学习

生命周期指的是小程序App和页面Page从被打开到被关闭、卸载的过程，这个过程包含多个有顺序的阶段，比如初始化、资源是否加载完成、页面是否被显示、用户是否将小程序或页面切换到了后台、用户是否卸载了页面等。

3.6.1 构造器

App()函数注册小程序，Page()函数注册小程序中的一个页面，他们都接受的是对象Object类型的参数，包含一些生命周期函数和事件处理函数。

1、小程序构造器和页面构造器

App() 必须在 app.js 中调用，必须调用且只能调用一次，从技术文档我们可以了解小程序构造器有如下属性与方法，，而onLaunch、onShow等这些就是小程序的生命周期函数。

function (options) 

Page()则需要写在每个小程序页面的js文件里面来注册小程序中的一个页面，页面构造器有如下属性和方法，而其中onLoad、onShow等就是页面的生命周期函数：

function(options) 

可能你一开始看到这些陌生的函数名称以及功能介绍会比较迷茫，对生命周期函数以及什么是监听没有概念，这些很正常，我们可以先打开app.js以及页面的js文件看看，它们是不是都有一个这样的构造器，以及使用到了部分的生命周期函数？在后面我们会通过实战来学习。

2、页面的全局变量

在前面我们已经介绍过，我们可以在Page({})对象前添加一些变量，比如我们声明了一个user变量：

function(options) 

这个user变量可以在Page({})对象的生命周期函数里访问，因为user变量定义在了Page之外，它是整个页面的全局变量。但是Page里的data对象，就只能通过this.data来访问，不能在Page外面访问到。

3、声明变量的写法

值得一提的是在写JavaScript表达式的时候，我们要分清什么时候可以用=赋值，啥时候需要用对象赋值，使用:：

function(options) 

我们需要留意哪些是对象，哪些是函数，Page({})内是不能直接用=声明变量的，它

4、全局变量

全局变量也是相对的，比如我们把变量声明在Page外，这个变量就是Page的全局变量，而有些变量我们可以声明在生命周期函数或事件处理函数的里，如在页面的js里执行以下代码:

function (options) 

我们首先在onLoad生命周期函数里声明了一个movielist变量，然后通过this.setData将movielist数组的第二项赋值给data里面的title，然后再通过this.data调用data里面title的值。对于this.setData而言，movielist就是一个全局变量。

3.6.2 生命周期函数

1、打印日志了解生命周期

对小程序和页面的生命周期，我们可以通过打印日志的方式来了解生命周期函数具体的执行顺序和情况，使用开发者工具在app.js里给onLaunch、onShow、onHide添加一些打印日志。

	onLaunch(opts) { console.log('onLaunch监听小程序初始化。',opts)
},
onShow(opts) { console.log('onShow监听小程序启动或切前台',opts)
},
onHide() { console.log('onHide监听小程序切后台')
},

想必大家已经注意，有的参数写的options，有的写的却是opts；前面事件对象有的写的是event，有的则用的是e，这个参数都是可以自定义的哦

以及在lifecylce.js的js里添加

function(options) 

通过在模拟器执行各种动作，比如编译、点击转发按钮、点击小程序转发按钮旁的关闭按钮（并没有关闭）、页面切换等来了解生命周期函数的执行顺序（比如页面生命周期），对切前台和切后台、页面的加载、渲染、显示、隐藏、卸载有一定的了解。

3、onLaunch与onShow

onLaunch是监听小程序的初始化，初始化完成时触发，全局只会触发一次，所以在这里我们可以用来执行获取用户登录信息的函数等一些非常核心的数据，如果onLaunch的函数过多，会影响小程序的启动速度。

onShow是在小程序启动，或从后台进入前台显示时触发，也就是它会触发很多次，在这里就不大适合放获取用户登录信息的函数啦。这两者的区别要注意。

2、生命周期函数调用API

前面我们已经了解到，通过点击事件可以触发事件处理函数，也就是需要用户来点击某个组件才能触发；这里页面的生命周期函数也可以触发事件处理函数，它不需要用户点击组件，只需要用户打开小程序、打开某个页面，把小程序切后台等情况时就能触发里面的函数。

比如我们在app.js的onLaunch生命周期函数里调用wx.showLoading的接口，表示小程序正在加载中：

function () 

执行之后我们会发现”正在加载中“的loading动画一直都会在，因为我们需要在表示资源加载完成的生命周期函数里调用wx.hideLoading来隐藏这个loading动画，比如小程序 onShow 生命周期函数：

function () 

我们需要弄清楚，生命周期函数会在小程序或页面在何种阶段或什么情况下才会触发，以及这些生命周期函数的触发顺序。

3、小程序打开场景值

在App的onLaunch和onShow打印的对象里有一个scene为1001，这个是场景值。场景值用来描述用户进入小程序的路径方式。用户进入你的小程序的方式有很多，比如有的是扫描二维码、有的是长按图片识别二维码，有的是通过微信群进入的小程序，有的是朋友单聊进入的小程序，有的是通过公众号进入的小程序等等，这些就是场景值，而具体的场景值，可以看技术文档，场景值对产品、运营来说非常重要。

技术文档：场景值列表

function (options) 

在options对象里就包含着scene这个属性，属性的值即为场景值：

	path: "" //页面路径 query: {} //页面的参数 referrerInfo: {} //来源小程序、公众号或 App 的 appId scene: 1047 //场景值 shareTicket: //带 shareTicket 的转发可以获取到更多的转发信息，例如群聊的名称以及群的标识 openGId