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里面可以自己定义各种各样的函数。