js 监听页面跳转_33. 教你零基础搭建小程序：页面的生命周期（1）

筒子们！！

这一章开始我们来看一下最基础也是最重点的部分—— 小程序的生命周期

小程序的生命周期分为应⽤⽣命周期和⻚⾯⽣命周期两种。

今天，我们来讲解一下小程序的⻚⾯⽣命周期。

整理了其主要属性及使用说明，如下表格：

我们一一来介绍一下哈。

(一)data

这不是一个页面， 这里指对象，是我们页面中常用的初始数据。

这里不多介绍了。

(二)onLoad

这属于⽣命周期回调，用来监听⻚⾯加载。

这个功能类似于onlaunch的使用场景。

应用场景是：通过在onLoad 中发送异步请求来初始化页面数据。

具体步骤如下：

1、新建一个页面demo18

2、打开demo18.js 文件，可发现页面中已存在onload函数，

3、在onload函数中进行打印，写入如下代码：

onLoad: function (options) {console,log("onload")},

4、保存，打开调试器，发现console 中出现 onload

(三)onshow

这属于⽣命周期回调函数，用来监听⻚⾯显⽰。

我们还在demo18.js 文件中演示，步骤如下：

1、在文件中找到原先存在的oshow函数，打印 onshow ，代码如下：

onShow: function () {console,log("ononShow")},

2、保存，打开调试器，发现console 中出现 onload 、onshow。

并且是先触发 onload，再触发onshow

(四)onReady

这是一枚⽣命周期回调函数，用来监听⻚⾯初次渲染完成的情况。

具体步骤如(三)onshow

但是，

触发的顺序为onload-onshow-onReady

(五)onHide

这是一枚⽣命周期回调函数，用来监听⻚⾯隐藏的情况。

具体步骤同(三)(四)，保存后，控制台出现onHide

在整个小程序隐藏时，页面也会隐藏。

并且，在当前页面中直接跳转页面，也就相当于将此页面隐藏。

啥意思呢？

这里，我们可以做一个测试来：

1、打开demo18.wxml文件，加入导航标签，代码如下：

demo17

2、保存，小程序页面如下：

3、点击页面demo17，会发生跳转。跳转后，会发现console中出现onHide

(六)onUnload

这是一枚⽣命周期回调函数，用来监听⻚⾯卸载的情况。

这个函数只有页面卸载的时候才会触发，这里也可以通过点击超链接来操作。

但是还要增加一个步骤，使用navigator 属性中 open-type 的属性值—— redirect ，

作用就是关闭当前页面，就相当于卸载页面了。

步骤如下：

1、在demo18.js 文件，原先存在的onUnload函数中，打印这一函数，代码：

onUnload: function () {console,log("onUnload")},

2、在demo18.wxml 文件中，加入redirect ，代码如下：

demo17 redirect

3、保存，点击页面demo17 redirect ，就会触发onUnload

所以，这里使用redirect 关闭当前页面，就是指卸载该页面。

本章先找前六个函数，剩下的六个，我们下一章再见。