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