微信小程序开发详细流程 五 (小程序的生命周期)

在微信小程序开发详细流程 四 (开发前的基本配置)只说了如何配置全局文件

这里来介绍一下这微信小程序的周期方法

生命周期是指一个小程序从创建到销毁的一系列过程写在.JS文件中

Page({

/**
* 页面的初始数据
*/
data: {

},

//---------------------------------
//以下生命周期函数

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 页面加载
//一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。
},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
// 页面初次渲染完成
//一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
//对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
//页面显示
//每次打开页面都会调用一次。

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
//页面隐藏
//当navigateTo或底部tab切换时调用。
},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
//页面卸载
//当redirectTo或navigateBack的时候调用。
},

//--------------------------------
//以下为页面相关事件处理函数

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
//下拉刷新
//监听用户下拉刷新事件。
//需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
//当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
//上拉触底
//监听用户上拉触底事件。
//可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
//在触发距离内滑动期间，本事件只会被触发一次。
},

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

}

})

生命周期函数 和 页面相关事件处理函数

生命周期的调用以及页面的路由方式详见

事件处理函数

除了初始化数据和生命周期函数，Page 中还可以定义一些特殊的函数：事件处理函数。在渲染层可以在组件中加入事件绑定，当达到触发事件时，就会执行 Page 中定义的事件处理函数。

示例代码：

xml部分

<view bindtap="viewTap"> click me </view>

Page({
viewTap: function() {
console.log('view tap')
}
})