小程序生命周期

100. 小程序生命周期

小程序作为一种轻量级的应用开发模式，在移动应用领域得到了广泛应用。为了更好地理解和掌握小程序的生命周期，本文将从应用生命周期、页面生命周期和组件生命周期三个方面进行详细讲解，并附上对应部分的代码示例。

1. 应用生命周期

应用生命周期指的是整个小程序从启动到退出的整个过程。小程序的应用生命周期主要包含以下几个阶段：

1.1 onLaunch - 小程序初始化

在小程序初始化时，会触发onLaunch生命周期函数。一般用于进行全局数据的初始化和获取，例如获取用户信息、检查登录状态等。

示例代码：

App({
  onLaunch: function () {
    // 小程序初始化时触发
    // 进行全局数据的初始化和获取
  }
})

1.2 onShow - 小程序启动或切换到前台

当小程序启动或从后台切换到前台时，会触发onShow生命周期函数。在这个阶段，可以执行一些需要实时更新的操作，比如获取用户位置、更新数据等。

示例代码：

App({
  onShow: function () {
    // 小程序启动或切换到前台时触发
    // 执行一些需要实时更新的操作
  }
})

1.3 onHide - 小程序切换到后台

当小程序切换到后台时，会触发onHide生命周期函数。在这个阶段，可以进行一些清理操作，比如保存用户数据、停止定时器等。

示例代码：

App({
  onHide: function () {
    // 小程序切换到后台时触发
    // 进行一些清理操作
  }
})

1.4 onError - 小程序发生错误

当小程序发生错误时，会触发onError生命周期函数。一般用于捕捉并处理小程序运行时的异常情况，例如网络请求失败、数据解析错误等。

示例代码：

App({
  onError: function (error) {
    // 小程序发生错误时触发
    // 处理小程序运行时的异常情况
  }
})

2. 页面生命周期

页面生命周期指的是小程序中每个页面从加载到销毁的整个过程。小程序的页面生命周期包含以下几个主要阶段：

2.1 onLoad - 页面加载

当页面加载时，会触发onLoad生命周期函数。一般在这个阶段进行页面初始化和数据加载的操作，例如请求数据、初始化参数等。

示例代码：

Page({
  onLoad: function (options) {
    // 页面加载时触发
    // 进行页面初始化和数据加载的操作
  }
})

2.2 onShow - 页面显示

当页面显示时，会触发onShow生命周期函数。一般用于执行一些需要实时更新的操作，比如更新数据、刷新界面等。

示例代码：

Page({
  onShow: function () {
    // 页面显示时触发
    // 执行一些需要实时更新的操作
  }
})

2.3 onReady - 页面初次渲染完成

当页面初次渲染完成时，会触发onReady生命周期函数。一般用于执行一些只能在页面初次渲染完成后才能进行的操作，比如操作 DOM 元素、绑定事件等。

示例代码：

Page({
  onReady: function () {
    // 页面初次渲染完成时触发
    // 执行一些只能在页面初次渲染完成后才能进行的操作
  }
})

2.4 onHide - 页面隐藏

当页面隐藏时，会触发onHide生命周期函数。一般用于执行一些页面隐藏时需要处理的操作，比如停止动画、清除定时器等。

示例代码：

Page({
  onHide: function () {
    // 页面隐藏时触发
    // 执行一些页面隐藏时需要处理的操作
  }
})

2.5 onUnload - 页面卸载

当页面被卸载时，会触发onUnload生命周期函数。一般用于执行一些页面卸载时需要处理的操作，比如释放资源、取消订阅等。

示例代码：

Page({
  onUnload: function () {
    // 页面卸载时触发
    // 执行一些页面卸载时需要处理的操作
  }
})

3. 组件生命周期

组件生命周期指的是小程序中自定义组件从创建到销毁的整个过程。小程序的组件生命周期主要包含以下几个关键阶段：

3.1 created - 组件实例被创建

当组件实例被创建时，会触发created生命周期函数。在这个阶段，可以进行一些组件实例的初始化操作。

示例代码：

Component({
  created: function () {
    // 组件实例被创建时触发
    // 进行组件实例的初始化操作
  }
})

3.2 attached - 组件被添加到页面节点树

当组件被添加到页面节点树时，会触发attached生命周期函数。一般用于执行一些组件加载和渲染的操作。

示例代码：

Component({
  attached: function () {
    // 组件被添加到页面节点树时触发
    // 执行一些组件加载和渲染的操作
  }
})

3.3 ready - 组件初次渲染完成

当组件初次渲染完成时，会触发ready生命周期函数。一般用于执行一些只能在组件初次渲染完成后才能进行的操作。

示例代码：

Component({
  ready: function () {
    // 组件初次渲染完成时触发
    // 执行一些只能在组件初次渲染完成后才能进行的操作
  }
})

3.4 detached - 组件被从页面节点树移除

当组件被从页面节点树移除时，会触发detached生命周期函数。一般用于执行一些组件卸载和清理的操作。

示例代码：

Component({
  detached: function () {
    // 组件被从页面节点树移除时触发
    // 执行一些组件卸载和清理的操作
  }
})