零基础小程序开发——生命周期（保姆级教程+超详细）

零基础小程序开发——生命周期（保姆级教程+超详细）

声明周期

什么是声明周期

生命周期（Life Cycle）是一个非常重要的概念，它指的是一个对象从创建到运行再到销毁的整个时间段。这个概念不仅适用于自然界中的生物体，也广泛应用于软件开发领域，特别是在小程序开发中。

生活中的实例

为了更好地理解生命周期的概念，我们可以将其与生活中的实例进行类比。例如，一个人的一生就可以看作是一个生命周期：

• 出生：表示这个人生命周期的开始。
• 离世：表示这个人生命周期的结束。
• 中间过程：从出生到离世之间的所有时间，就是这个人的一生，也就是他的生命周期。

小程序的生命周期

在小程序开发中，生命周期同样扮演着至关重要的角。我们可以把每个小程序运行的过程也概括为生命周期：

• 启动：当用户首次打开小程序或者从后台切换到前台时，小程序开始运行，这标志着小程序生命周期的开始。在这个阶段，小程序会进行一些初始化操作，如加载数据、设置UI等。
• 运行：小程序在启动后会进入运行状态，此时用户可以与小程序进行交互。在运行过程中，小程序会根据用户的操作进行相应的处理，如更新UI、处理数据请求等。
• 关闭：当用户退出小程序或者小程序被系统强制关闭时，小程序的生命周期结束。在这个阶段，小程序会进行一些清理操作，如释放资源、保存数据等。

生命周期的重要性

了解小程序的生命周期对于开发者来说至关重要。因为只有在掌握了小程序的生命周期后，开发者才能更好地管理小程序的运行状态和资源使用，从而提高小程序的性能和用户体验。例如，在生命周期的不同阶段进行合适的数据加载和UI更新，可以确保小程序在运行时更加流畅和高效。

生命周期分类

应用生命周期

应用生命周期特指小程序从启动到运行再到销毁的整个过程。在这个过程中，小程序会经历以下几个关键阶段：

1. 启动阶段：当用户首次打开小程序或者从后台切换到前台时，小程序会进入启动阶段。在这个阶段，小程序会进行一些初始化操作，如加载必要的资源、设置全局变量等。
2. 运行阶段：启动完成后，小程序会进入运行阶段。在这个阶段，用户可以与小程序进行交互，如点击按钮、输入信息等。小程序会根据用户的操作进行相应的处理，并实时更新UI界面。
3. 销毁阶段：当用户退出小程序或者小程序被系统强制关闭时，小程序会进入销毁阶段。在这个阶段，小程序会进行一些清理操作，如释放占用的资源、保存用户数据等。

页面生命周期

页面生命周期则特指小程序中每个页面的加载、渲染以及销毁的过程。与应用生命周期类似，页面生命周期也包含以下几个关键阶段：

1. 加载阶段：当用户首次进入某个页面或者从其他页面跳转到该页面时，页面会进入加载阶段。在这个阶段，页面会加载所需的资源，如图片、视频等，并设置页面的初始状态。
2. 渲染阶段：加载完成后，页面会进入渲染阶段。在这个阶段，页面会根据加载的数据和初始状态进行渲染，生成用户可见的UI界面。
3. 销毁阶段：当用户离开当前页面或者跳转到其他页面时，页面会进入销毁阶段。在这个阶段，页面会进行一些清理操作，如释放占用的资源、取消未完成的网络请求等。

其中，页面的生命周期范围较小，应用程序的生命周期范围较大，如图所示：

什么是生命周期函数

在小程序开发中，生命周期函数是一个至关重要的概念。它允许开发者在特定的时间点执行特定的操作，从而确保小程序在运行时能够按照预期的方式工作。本文将详细介绍什么是生命周期函数，以及它在小程序开发中的重要作用。

生命周期函数的定义

生命周期函数是由小程序框架提供的内置函数。这些函数会在小程序或页面的生命周期定的时间点自动按次序执行。生命周期函数的主要作用是允许程序员在特定的时间点执行某些特定的操作，以确保小程序的正常运行。

生命周期函数的作用

生命周期函数的作用非常广泛，它们可以在小程序的不同阶段执行不同的操作。例如：

1. 页面加载时：可以在onLoad生命周期函数中初始化页面的数据，如从服务器获取数据并填充到页面上。
2. 页面显示时：可以在onShow生命周期函数中执行一些页面显示时的逻辑，如更新页面的状态或重新计算某些数据。
3. 页面隐藏时：可以在onHide生命周期函数中执行一些页面隐藏时的逻辑，如暂停播放视频或停止定时器。
4. 页面卸载时：可以在onUnload生命周期函数中执行一些页面卸载时的清理工作，如释放资源或保存用户数据。

生命周期与生命周期函数的区别

在理解生命周期函数时，需要注意区分生命周期和生命周期函数的概念。生命周期是指小程序或页面从创建到销毁的整个过程，而生命周期函数则是在这个过程定的时间点自动执行的函数。简而言之，生命周期是一个时间段，而生命周期函数是这个时间段内特定的时间点。

注意事项

• 不要混淆生命周期和生命周期函数：如前所述，生命周期是一个时间段，而生命周期函数是这个时间段内特定的时间点。因此，在编写代码时，需要明确区分这两个概念。
• 合理利用生命周期函数：在开发小程序时，合理利用生命周期函数可以显著提高小程序的性能和用户体验。因此，需要根据实际需求在合适的生命周期函数中执行相应的操作。

生命周期函数的分类

在小程序开发中，生命周期函数扮演着至关重要的角。它们控制着小程序及其页面的各个阶段，确保程序的正确运行。根据功能和应用场景的不同，我们可以将小程序中的生命周期函数分为三大类：应用的生命周期函数、页面的生命周期函数以及特殊生命周期函数

应用的生命周期函数

应用的生命周期函数特指小程序从启动到运行再到销毁期间依次调用的那些函数。这些函数控制着小程序的全局状态和行为。

1. 启动阶段：当小程序启动时，会调用相关的生命周期函数进行初始化操作，如加载全局配置、创建全局变量等。
2. 运行阶段：在小程序运行期间，可能会调用一些函数来处理全局事件或状态变化，如用户登录、网络状态变化等。
3. 销毁阶段：当小程序被销毁时（如用户退出小程序），会调用相关的生命周期函数进行清理操作，如释放资源、保存用户数据等。

页面的生命周期函数

页面的生命周期函数则特指小程序中每个页面从加载到渲染再到销毁期间依次调用的那些函数。这些函数控制着页面的状态和行为。

1. 加载阶段：当页面被加载时，会调用相关的生命周期函数进行初始化操作，如加载页面数据、设置页面初始状态等。
2. 渲染阶段：在页面渲染过程中，可能会调用一些函数来处理页面事件或更新页面状态，如用户点击按钮、页面滚动等。
3. 销毁阶段：当页面被销毁时（如用户跳转到其他页面），会调用相关的生命周期函数进行清理操作，如释放页面资源、取消未完成的网络请求等。

特殊生命周期函数（扩展内容）

在某些小程序框架中，还可能存在一些特殊生命周期函数，它们用于处理一些特殊场景或事件。例如：

1. 组件生命周期函数：用于处理自定义组件的加载、渲染和销毁等过程。
2. 全局事件处理函数：用于处理全局事件，如网络请求成功或失败、用户授权结果等。

**注意：**特殊生命周期函数的存在和具体实现可能因小程序框架的不同而有所差异。因此，在开发过程中，需要参考具体框架的文档来确定是否存在以及如何使用这些特殊生命周期函数。

应用的生命周期函数

在小程序开发中，应用的生命周期函数扮演着至关重要的角。它们定义了小程序在不同阶段的行为，包括初始化、启动、显示和隐藏等。这些函数需要在app.js文件中进行声明和定义。

onLaunch 函数

onLaunch函数在小程序初始化完成时执行，全局只触发一次。这个函数是小程序启动的入口点，可以在其中进行一些初始化的工作，如加载全局配置、创建全局变量、初始化数据库连接等。

代码语言：javascript代码运行次数：0运行复制

// app.js 文件
App({
  onLaunch: function(opti) {
    // 在这里执行初始化操作
    cole.log('小程序已启动');
    // 例如，加载全局配置
    wx.getSetting({
      success: (res) => {
        // 根据用户授权情况执行相应操作
      }
    });
  },
  // 其他生命周期函数...
});

onShow 函数

onShow函数在小程序启动或从后台进入前台显示时触发。这个函数可以用于处理一些需要在小程序显示时执行的逻辑，如更新页面数据、检查网络状态等。

代码语言：javascript代码运行次数：0运行复制

// app.js 文件（续）
App({
  // ...onLaunch 函数
  onShow: function(opti) {
    // 在这里处理小程序显示时的逻辑
    cole.log('小程序已显示');
    // 例如，更新页面数据
    this.updatePageData();
  },
  // 其他生命周期函数...
  // 可以定义一个方法来更新页面数据
  updatePageData: function() {
    // 实现数据更新逻辑
  },
  // ...
});

onHide 函数

onHide函数在小程序从前台进入后台时触发。这个函数可以用于处理一些需要在小程序隐藏时执行的逻辑，如暂停视频播放、停止定时器等。

代码语言：javascript代码运行次数：0运行复制

// app.js 文件（续）
App({
  // ...onLaunch 和 onShow 函数
  onHide: function() {
    // 在这里处理小程序隐藏时的逻辑
    cole.log('小程序已隐藏');
    // 例如，暂停视频播放
    this.pauseVideo();
  },
  // 其他生命周期函数和方法...
  // 可以定义一个方法来暂停视频播放
  pauseVideo: function() {
    // 实现暂停视频播放逻辑
  },
  // ...
});

页面的生命周期函数

在小程序开发中，页面的生命周期函数扮演着至关重要的角。它们定义了页面在不同阶段的行为，包括加载、显示、初次渲染完成、隐藏和卸载等。这些函数需要在页面的.js文件中进行声明和定义。

onLoad 函数

onLoad函数在页面加载时触发，一个页面只调用一次。这个函数是页面加载的入口点，可以在其中进行页面数据的初始化操作，如从服务器获取数据、设置页面初始状态等。

代码语言：javascript代码运行次数：0运行复制

// 页面的.js 文件
Page({
  onLoad: function(opti) {
    // 在这里进行页面数据的初始化操作
    cole.log('页面已加载');
    // 例如，从服务器获取数据
    wx.request({
      url: '',
      success: (res) => {
        // 处理服务器返回的数据
        this.setData({
          dataList: res.data
        });
      }
    });
  },
  // 其他生命周期函数...
});

onShow 函数

onShow函数在页面显示时触发。这个函数可以用于处理一些需要在页面显示时执行的逻辑，如更新页面数据、检查用户权限等。

代码语言：javascript代码运行次数：0运行复制

// 页面的.js 文件（续）
Page({
  // ...onLoad 函数
  onShow: function() {
    // 在这里处理页面显示时的逻辑
    cole.log('页面已显示');
    // 例如，更新页面数据
    this.updatePageData();
  },
  // 其他生命周期函数...
  // 可以定义一个方法来更新页面数据
  updatePageData: function() {
    // 实现数据更新逻辑
  },
  // ...
});

onReady 函数

onReady函数在页面初次渲染完成时触发，一个页面只调用一次。这个函数通常用于执行一些页面渲染后的操作，如设置、初始化插件等。

代码语言：javascript代码运行次数：0运行复制

// 页面的.js 文件（续）
Page({
  // ...onLoad 和 onShow 函数
  onReady: function() {
    // 在这里执行页面渲染后的操作
    cole.log('页面已初次渲染完成');
    // 例如，设置
    this.setData({
      someValue: 'new value'
    }, () => {
      // 监听数据变化
      this.someListener = ().select('#someElement').boundingClientRect((rect) => {
        cole.log(rect);
      }).exec();
    });
  },
  // 其他生命周期函数和方法...
  // ...
});

onHide 函数

onHide函数在页面隐藏时触发。这个函数可以用于处理一些需要在页面隐藏时执行的逻辑，如暂停视频播放、停止定时器等。

代码语言：javascript代码运行次数：0运行复制

// 页面的.js 文件（续）
Page({
  // ...onLoad、onShow 和 onReady 函数
  onHide: function() {
    // 在这里处理页面隐藏时的逻辑
    cole.log('页面已隐藏');
    // 例如，暂停视频播放
    this.pauseVideo();
  },
  // 其他生命周期函数和方法...
  // 可以定义一个方法来暂停视频播放
  pauseVideo: function() {
    // 实现暂停视频播放逻辑
    // 假设有一个视频播放上下文 this.videoContext
    if (this.videoContext) {
      this.videoContext.pause();
    }
  },
  // ...
});

onUnload 函数

onUnload函数在页面卸载时触发，一个页面只调用一次。这个函数通常用于执行一些页面卸载前的清理工作，如取消网络请求、释放资源等。

代码语言：javascript代码运行次数：0运行复制

// 页面的.js 文件（续）
Page({
  // ...onLoad、onShow、onReady 和 onHide 函数
  onUnload: function() {
    // 在这里执行页面卸载前的清理工作
    cole.log('页面已卸载');
    // 例如，取消网络请求
    if (this.requestTask) {
      this.requestTask.abort();
    }
    // 释放其他资源...
  },
  // 其他生命周期函数和方法...
  // ...
});

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-01-09，如有侵权请联系 cloudcommunity@tencent 删除前往查看生命周期小程序基础教程开发