程序员必备！小程序生命周期与页面生命周期解析

2024-01-23 04:06:22

小程序生命周期与页面生命周期，如何区分？

作为小程序开发者，掌握程序与页面的生命周期至关重要。然而，不少人容易将这两个概念混为一谈。本文将深入解析小程序生命周期与页面生命周期的异同，帮助开发者拨开迷雾，深入理解小程序开发的精髓。

起点不同：小程序的生命周期函数与页面的生命周期函数

小程序的生命周期函数定义在app.js文件中，用于注册小程序。这些函数接收一个对象参数，指定小程序的生命周期回调，包括：onLaunch、onShow、onHide、onError等。而页面的生命周期函数则定义在各个页面文件中，用于管理页面状态，包括：onLoad、onReady、onShow、onHide、onUnload等。

职责不同：全局管理与页面管理

小程序的生命周期函数侧重于全局管理，如初始化、前台进入、后台进入等整个小程序的运行状态。页面生命周期函数则侧重于页面管理，如页面加载、页面渲染、页面显示、页面隐藏等单个页面的状态变化。

关联性：相互影响但相对独立

虽然小程序生命周期与页面生命周期职责不同，但它们之间存在关联性。小程序生命周期的变化会触发相关页面的生命周期函数调用，但页面的生命周期变化一般不会影响小程序的生命周期函数。

举例：

当小程序从后台进入前台时，会触发小程序的onShow生命周期函数，进而触发当前页面的onShow生命周期函数。
当页面被切换到后台时，会触发页面的onHide生命周期函数，但不会影响小程序的当前生命周期状态。

实战案例

场景：开发一个音乐播放器小程序

小程序生命周期函数：

// app.js
App({
  onLaunch: function () {
    // 小程序初始化
  },
  onShow: function () {
    // 小程序前台进入
  },
  onHide: function () {
    // 小程序后台进入
  },
  onError: function (err) {
    // 小程序发生错误
  }
});

页面生命周期函数：

// music.js
Page({
  onLoad: function (options) {
    // 页面加载
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面卸载
  }
});