微信小程序生命周期笔记

微信小程序的三种生命周期：

1. 应用生命周期
2. 页面生命周期
3. 组件生命周期

一、应用生命周期

应用生命周期的主体是app（应用）

属性	类型	必填	描述
onLaunch	Function	否	监听小程序初始化
onShow	Function	否	监听小程序启动或切前台
onHide	Function	否	监听小程序切后台
onError	Function	否	错误监听函数
onPageNotFound	Function	否	页面不存在监听函数

onLaunch
用户首次打开小程序，小程序启动，触发 onLaunch（全局只触发一次）

1、 onLaunch函数在小程序启动并完成初始化后触发，只触发一次。
2、在onLaunch函数中，我们可以添加自己想要进行的初始操作，例如获取用户信息、申请权限、获取服务器数据等，为小程序的后续功能提供方便。

onShow
小程序初始化完成后，在屏幕上从无到有，从非当前小程序变为当前小程序，触发onShow（监听小程序显示）

1、每次从别的地方切到这个小程序当中，把这个小程序从后台切到前台，都会触发onShow。

onHide
小程序从前台进入后台，触发onHide

1、与onShow相反，onHide的时间点是微信小程序被切到后台时开始执行
2、可以实现小程序被切到后台后，计时器暂停计时、统计切后台次数等功能

注意：

1、前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台
2、小程序后台运行一定时间，或系统资源占用过高，会被销毁。
3、当小程序在进程中被杀掉，或者在微信中删除小程序，小程序就从后台运行中变成销毁。

onError
函数的执行时间点是在我们的代码运行出错时执行

1、onError函数与其他函数不同，我们需要传递一个参数err来记录错误内容。

onError: function (err) {
    console.log("Error");
    console.log(err);
}

onPageNotFound
在小程序最初启动时找不到启动页面会触发onPageNotFound。（启动页面：小程序运行后的第一个页面）

二、页面生命周期

页面生命周期的主体是page（页面）

属性	类型	必填	描述
onLoad	Function	否	监听页面加载
onShow	Function	否	监听页面显示
onReady	Function	否	监听页面初次渲染完成
onHide	Function	否	监听页面隐藏
onUnload	Function	否	监听页面卸载

onLoad
小程序初始化完成后，页面首次加载触发onLoad（页面加载），只会触发一次

1、可以在 onLoad 的参数中获取打开当前页面路径中的参数（页面js）
2、页面的onLoad是在一个页面开始加载到卸载这个页面之中是一次，不同于应用生命周期app.onLaunch，onLoad在整个小程序的运行中可以不止一次，例如反复进入（加载）并退出（卸载）同一个页面，这个页面的onLoad函数就会被调用多次。

onShow
页面生命周期和应用生命周期的onShow基本一致，都是出现一次执行一次。消失后（退出或切后台）再出现（加载或从后台切回前台），就会执行一次onShow（页面出现）

1、和应用生命周期的onShow一样，onLoad执行的时候onShow也会执行。同样，onLoad会先于onShow执行
2、先执行应用onShow方法再执行页面onShow方法

onReady
首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。

1、代表页面已经准备妥当，可以和视图层进行交互。

onHide
当小程序后台运行或跳转到其他页面时触发 onHide（页面隐藏）

1、当navigateTo、底部tab切换、上传文件选择图片时调用。

onUnload
页面卸载 onUnload 退出这个页面时触发（即后续操作不是一定要返回这个页面的，就要卸载）

当使用重定向方法wx.redirectTo(OBJECT)、关闭当前页返回上一页wx.navigateBack()、wx.relanch 都会被调用
退出页面的方法主要有两种：
1、重定向至其他页面(redirect)
2、返回至上一个或多个页面(navigateBack)

应用生命周期和页面生命周期互相影响，调用顺序
onLaunch–onLoad–onShow–onReady–onHide.
虽然说onLaunch在onLoad之前执行，但是在onLaunch里请求获取是否有权限，等待返回值的时候Page里的onLoad事件就已经执行了。
解决办法：
1、在APP里面onLanch中的网络请求中设置判断
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
2、在page的onLoad中设置一个回调
app.userInfoReadyCallback = res => {
if (res != ‘’) {
console.log(“app.globalData.userInfo”)
}

}

三、组件生命周期

属性	参数	描述
created	无	在组件实例刚刚被创建时执行
attached	无	在组件实例进入页面节点树时执行
ready	无	在组件在视图层布局完成后执行
moved	无	在组件实例被移动到节点树另一个位置时执行
detached	无	在组件实例被从页面节点树移除时执行
error	无	每当组件方法抛出错误时执行

// pages/myComponent.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
  },

  /**
   * 组件的初始数据
   */
  data: {
  },

  /**
   * 组件的方法列表
   */
  methods: {
  },

  /*组件生命周期*/ 
  lifetimes: {
    created() {
      console.log("在组件实例刚刚被创建时执行")
    },
    attached() { 
      console.log("在组件实例进入页面节点树时执行")
    },
    ready() {
      console.log("在组件在视图层布局完成后执行")
    },
    moved() {
      console.log("在组件实例被移动到节点树另一个位置时执行")
    },
    detached() {
      console.log("在组件实例被从页面节点树移除时执行")
    },
    error() {
      console.log("每当组件方法抛出错误时执行")
    },
    /*组件所在页面的生命周期 */
    pageLifetimes: {
      show: function () {
        // 页面被展示
        console.log("页面被展示")
      },
      hide: function () {
        // 页面被隐藏
        console.log("页面被隐藏")
      },
      resize: function (size) {
        // 页面尺寸变化
        console.log("页面尺寸变化")
      }
    }
  }
})

created
组件何时被小程序创造出来？当组件所在页面被调出来时，由于组件在页面wxml中被调用，此时组件必须被创造出来，否则无法在这个页面当中使用。

created的调用时间点在page.onLoad之前，即组件的创建在页面的加载（初始化）之前

attached
attached函数是在组件实例进入页面节点树时执行。组件实例需要先被创建，然后才能进入页面节点树，所以attached函数是在created函数之后执行

attached执行时间点晚于created，早于page.onLoad。说明页面加载的过程中包含组件实例进入页面节点树，也就是说组件是页面的必要成分（如果这个页面有组件的话），组件不先安置好，是没有办法完整加载页面的。

ready
ready函数是在组件在视图层布局完成后执行。你可能会有些迷惑，视图层布局完成是什么意思？是在手机页面渲染的过程？还是在构建页面视图、也就是在页面加载的过程中完成的？

onLoad是在页面加载结束后执行，而这个时间点也是onShow的执行时间点，只是前者先于后者执行。这里面我们会发现，ready是晚于Show的，说明这个组件渲染结束是在页面加载结束后，在手机端进行页面渲染时，页面中的组件渲染结束后执行的。页面基本都不止含有组件，所以页面渲染完成的时间点一般情况下都会在组件渲染结束之后。