JS与小程序页面生命周期

Page({
  /**
  * 页面的初始数据
  */
  data: {
  },

  /**
  * 生命周期函数--监听页面加载
  */
  onLoad: function (options) {
  },

  /**
  * 生命周期函数--监听页面初次渲染完成
  */
  onReady: function () {
  },

  /**
  * 生命周期函数--监听页面显示
  */
  onShow: function () {
  },
  
  /**
  * 生命周期函数--监听页面隐藏
  */
  onHide: function () {
  },

  /**
  * 生命周期函数--监听页面卸载
  */
  onUnload: function () {
  },

  /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
  onPullDownRefresh: function () {
  },

  /**
  * 页面上拉触底事件的处理函数
  */
  onReachBottom: function () {
  },

  /**
  * 用户点击右上角分享
  */
  onShareAppMessage: function () {
  }
})

如果是用小程序的开发工具新建的页面,默认情况下面,这个js文件中会有一些默认的代码。如上。我们看一下这些默认代码的结构。

首先鼠标停留在Page上,会发现他是一个function。这个function接受一个参数,就是花括号里面的内容。就是一个js对象,这个js对象作为一个参数传递给Page这个函数。我们编写js代码都是在这个花括号内部编写的。

我们首先看下里面的生命周期函数,首先什么是小程序的生命周期函数呢?首先呢,他是一个函数,作用就是用来描述一个页面的生命周期。比如一个人,有幼年,青年,中年,老年这些生命周期。那么这个函数也有他的一个生命周期。比如

onLoad,监听页面加载,也可以理解为页面初始化的时候,他就会执行这样一个onLoad函数。

onReady,生命周期函数--监听页面初次渲染完成。

onShow,生命周期函数--监听页面显示,就是页面显示的时候会执行这个函数。

onHide,监听页面隐藏,页面隐藏的时候会去执行。

onUnload,监听页面卸载,页面卸载的时候会去执行。

生命周期函数是一定有一个时间线的,比如人,有幼年,青年,中年,老年。页面也是有时间线的。我们执行这个js的时候,是以onload-onshow-onready的顺序执行的。一开始的时候onhide,onunload是不会执行的,要页面隐藏或卸载的时候才执行。

除了这些,还有三个函数是什么呢,这三个并不属于生命周期函数,它们是小程序执行一些特定的操作的时候会触发的函数。

onPullDownRefresh,监听用户下拉动作

onReachBottom,页面上拉触底事件的处理函数

onShareAppMessage,用户点击右上角分享的时候执行这个函数

如果我们要写自己的js代码的时候,跟默认的函数一样的。在page里面可以自己定义各种各样的函数。