小程序的页面/组件的生命周期_组件的生命周期 lifetimes里实现下拉刷新

前言：

       小程序的函数方法以及生命周期

目录：

1、使用 Page 构造器注册页面 官网入口

2、使用 Component 构造器构造页面

3、App.js

4、生命周期

（1）相关

（2）流程方法

（3）应用生命周期和页面生命周期图示

5、路由变化

页面栈

路由方式

---

1、页面级别：使用 Page  官网入口

• 关于小程序的退出：当用户点击小程序左上角关闭，或者按设备Home键离开微信，小程序并没有直接销毁，而是触发onHide方法进入了后台，短时间内当再次进入微信或者再次打开小程序，小程序会从后台状态进入前台，此为“热启动”。注意当小程序进入后台状态一定时间后，或者系统资源占用过高，微信会真正销毁小程序。用户第一次进入小程序或者在小程序销毁后再次进入小程序是为“冷启动”。
• 小程序的冷启动：小程序在冷启动时会依次触发onLaunch—>onShow
• 小程序的热启动：小程序在热启动时会触发onShow
• 小程序关闭时：即小程序从前台进入后台时触发onHide
• 小程序销毁时：即小程序从前台进入后台时触发onUnload

• onLoad ：页面加载时
• onReady：页面所有内容加载完毕
• onShow：页面显示的时候触发
• onHide：当页面被隐藏时触发
• onUnload：当页面卸载是触发

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

2、封装组件内部：使用 Component 

组件内的生命周期与方法

Component({
  data: {
    text: "This is page data."
  },
  methods: {
    onLoad: function(options) {
      // 页面创建时执行
    },
    onPullDownRefresh: function() {
      // 下拉刷新时执行
    },
    // 事件响应函数
    viewTap: function() {
      // ...
    }
  }
})

组件的生命周期 lifetimes

Component({
  lifetimes: {
      created: function() {
      	//在组件实例刚刚被创建时执行
    	},
        attached: function() {
		//在组件实例进入页面节点树时执行
	    },
        ready: function() {
      // 在组件在视图层布局完成后执行
	    },
        moved: function() {
      // 在组件实例被移动到节点树另一个位置时执行
	    },
	    detached: function() {
	      // 在组件实例被从页面节点树移除时执行
	    },
	    error: function() {
	      // 每当组件方法抛出错误时执行
	    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

组件所在页面的生命周期

Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})

3、App.js

App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

4、生命周期图示

（1）小程序初始化完成后，页面首次加载触发onLoad，只会触发一次。
（2）当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法。

（3）当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法。

5、路由变化

在小程序中所有页面的路由全部由框架进行管理。

页面栈

框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候，页面栈的表现如下：

开发者可以使用 getCurrentPages() 函数获取当前页面栈。

路由方式

对于路由的触发方式以及页面生命周期函数如下：

Tab 切换对应的生命周期（以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例）：

Tips:

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 调用页面路由带的参数可以在目标页面的onLoad中获取。