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

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

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

生命周期是指一个小程序从创建到销毁的一系列过程

写在.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>

JS部分

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

更多详细介绍可参考API文档:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

看不懂也没事,后面还会有实例代码贴出来关于理论的东西就说这些吧,多看PAI