微信小程序生命周期函数

微信小程序的生命周期函数分为 页面生命周期 和 组件生命周期 两类。它们分别用于管理页面和组件的创建、更新和销毁过程。以下是它们的详细说明：

---

一、页面生命周期函数

页面生命周期函数用于管理页面的整个生命周期，从页面加载到销毁。以下是主要的页面生命周期函数及其作用：

1. onLoad

• 触发时机：页面加载时触发，一个页面只会调用一次。

• 作用：用于接收页面参数（options），初始化页面数据。如：用wx.navigateTo导航过来的地址中的参数

• 示例：

  onLoad(options) {
    console.log('页面加载，参数为：', options);
  }
  

2. onShow

• 触发时机：页面显示/切入前台时触发。
• 作用：用于页面显示时的逻辑处理，例如刷新数据。
• 示例：

  onShow() {
    console.log('页面显示');
  }
  

3. onReady

• 触发时机：页面初次渲染完成时触发，一个页面只会调用一次。
• 作用：用于页面渲染完成后的逻辑处理，例如操作页面元素。
• 示例：

  onReady() {
    console.log('页面初次渲染完成');
  }
  

4. onHide

• 触发时机：页面隐藏/切入后台时触发。
• 作用：用于页面隐藏时的逻辑处理，例如清除定时器。
• 示例：

  onHide() {
    console.log('页面隐藏');
  }
  

5. onUnload

• 触发时机：页面卸载时触发。
• 作用：用于页面销毁前的逻辑处理，例如清理数据或资源。
• 示例：

  onUnload() {
    console.log('页面卸载');
  }
  

6. onPullDownRefresh

• 触发时机：用户下拉刷新时触发。
• 作用：用于处理下拉刷新的逻辑，例如重新加载数据。
• 示例：

  onPullDownRefresh() {
    console.log('用户下拉刷新');
    wx.stopPullDownRefresh(); // 停止下拉刷新动画
  }
  

7. onReachBottom

• 触发时机：用户上拉触底时触发。
• 作用：用于处理上拉加载更多的逻辑，例如加载下一页数据。
• 示例：

  onReachBottom() {
    console.log('用户上拉触底');
  }
  

8. onShareAppMessage

• 触发时机：用户点击右上角分享时触发。
• 作用：用于自定义分享内容。
• 示例：

  onShareAppMessage() {
    return {
      title: '自定义分享标题',
      path: '/pages/index/index',
    };
  }
  

---

二、组件生命周期函数

组件生命周期函数用于管理组件的整个生命周期，从组件创建到销毁。以下是主要的组件生命周期函数及其作用：

1. created

• 触发时机：组件实例刚刚被创建时触发。
• 作用：用于初始化组件内部数据，但不能调用 setData。
• 示例：

  created() {
    console.log('组件实例创建完成');
  }
  

2. attached

• 触发时机：组件实例进入页面节点树时触发。
• 作用：用于初始化组件数据，可以调用 setData。
• 示例：

  attached() {
    console.log('组件进入页面节点树');
  }
  

3. ready

• 触发时机：组件布局完成时触发。
• 作用：用于操作组件节点或请求数据。
• 示例：

  ready() {
    console.log('组件布局完成');
  }
  

4. moved

• 触发时机：组件实例被移动到节点树另一个位置时触发。
• 作用：用于处理组件位置变化的逻辑。
• 示例：

  moved() {
    console.log('组件被移动');
  }
  

5. detached

• 触发时机：组件实例从页面节点树移除时触发。
• 作用：用于清理组件资源或数据。
• 示例：

  detached() {
    console.log('组件从页面节点树移除');
  }
  

6. error

• 触发时机：组件方法抛出错误时触发。
• 作用：用于捕获和处理组件错误。
• 示例：

  error(err) {
    console.error('组件发生错误：', err);
  }
  

---

三、页面与组件生命周期的执行顺序

1. 页面加载时：

   • 页面 onLoad → 页面 onShow → 页面 onReady → 组件 created → 组件 attached → 组件 ready。

2. 页面隐藏时：

   • 页面 onHide → 组件 detached（如果组件被移除）。

3. 页面卸载时：

   • 页面 onUnload → 组件 detached。

---

总结

微信小程序的生命周期函数分为页面生命周期和组件生命周期两类，分别用于管理页面和组件的创建、更新和销毁过程。通过合理使用这些生命周期函数，开发者可以在不同的阶段执行相应的逻辑，从而更好地控制页面和组件的行为。