mvc redirect 返回跳转新打开一个页面_30. 教你零基础搭建小程序：页面生命周期...

图文版

官方文档介绍的Page 界面的页面生命周期函数：

Page | 微信开放文档​developers.weixin.qq.com

我们整理的主要属性及其使用说明：

我们一一来介绍一下哈。

（一）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文件，加入导航标签，代码如下：

<navigator url="pages/demo17/demo17" open-type="navigate">
demo17
</navigator>

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

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

（六）onUnload

这是一枚生命周期回调函数，用来监听页面卸载的情况。

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

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

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

步骤如下：

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

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

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

<navigator url="pages/demo17/demo17" open-type="redirect ">
 demo17 redirect 
</navigator>

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

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

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