小程序生命周期函数有哪些-猿码集

1. 小程序生命周期函数概述

生命周期函数是小程序中非常重要的概念，也是小程序的基石之一。生命周期函数可以理解为小程序运行时的一系列事件，它们有一个固定的顺序，每一个事件在对应的时机会被触发。

小程序的生命周期函数分为两类：全局生命周期函数和页面生命周期函数。全局生命周期函数指的是小程序整个生命周期期间内会触发的事件，而页面生命周期函数只在某个页面被打开时才会触发。

2. 全局生命周期函数

2.1. onLaunch

当小程序初始化完成时，会触发onLaunch函数。一般来说，在此函数中进行一些全局的初始化操作是比较好的。例如，从本地存储中读取用户的信息，初始化全局变量等。


App({
  onLaunch: function () {
    // 小程序初始化完成时触发
    console.log('小程序初始化完成');
  }
})

2.2. onShow

当小程序显示在前台时，会触发onShow函数。这个函数的调用频率比较高，因此在此函数中一般不要进行复杂的操作。

onShow函数有一个参数options，它是一个对象，包含了从其他页面传递过来的参数。例如，从A页面跳转到B页面时，可以在A的onLoad函数中使用wx.navigateTo({url: '/pages/B/B?id=1'})将参数传递到B页面，然后在B的onShow函数中使用options.id来获取该参数。


App({
  onShow: function (options) {
    // 小程序显示在前台时触发
    console.log('小程序显示在前台: ' + JSON.stringify(options));
  }
})

2.3. onHide

当小程序从前台进入后台时，会触发onHide函数。在此函数中可以做一些清理工作，例如清空缓存等。


App({
  onHide: function () {
    // 小程序从前台进入后台时触发
    console.log('小程序进入后台');
  }
})

3. 页面生命周期函数

3.1. onLoad

当某个页面被打开时，会触发onLoad函数。在此函数中可以获取从其他页面传递过来的参数，例如上面提到的options.id。

在此函数中可以通过setData函数来改变页面的状态，从而让页面重新渲染。


Page({
  onLoad: function (options) {
    // 页面被打开时触发
    console.log('页面被打开: ' + JSON.stringify(options));
  }
})

3.2. onShow

在某个页面被打开时，如果此页面已经被打开过，那么不会再触发onLoad函数，而是会触发onShow函数。

和全局生命周期函数中的onShow函数不同，页面生命周期函数中的onShow函数没有参数options。


Page({
  onShow: function () {
    // 页面显示时触发
    console.log('页面显示');
  }
})

3.3. onReady

当页面渲染完成时，会触发onReady函数。在此函数中可以获取页面的节点信息，例如通过wx.createSelectorQuery函数获取某个节点的信息。


Page({
  onReady: function () {
    // 页面渲染完成时触发
    wx.createSelectorQuery().select('.my-node').boundingClientRect(function (rect) {
      console.log(rect);
    }).exec();
  }
})

3.4. onHide

和全局生命周期函数中的onHide函数一样，当某个页面从前台进入后台时，会触发onHide函数。在此函数中可以做一些清理工作，例如清空缓存等。


Page({
  onHide: function () {
    // 页面从前台进入后台时触发
    console.log('页面进入后台');
  }
})

3.5. onUnload

当某个页面被销毁时，会触发onUnload函数。在此函数中可以做一些清理工作，例如取消某些定时器、关闭某些WebSocket连接等。


Page({
  onUnload: function () {
    // 页面被销毁时触发
    console.log('页面被销毁');
  }
})

4.总结

小程序生命周期函数是小程序中非常重要的概念，它们贯穿整个小程序的运行时期，为开发者提供了很多便利。

在实际开发过程中，开发者需要根据具体的需求，选择合适的生命周期函数来完成相应的操作。同时，开发者也需要注意各个生命周期函数之间的关系，尤其是在全局生命周期函数和页面生命周期函数之间的关系。

小程序生命周期函数有哪些