生命周期

在微信小程序中，页面和组件都有各自的生命周期函数。这些生命周期函数在特定的时间点被调用，可以帮助开发者更好地控制页面和组件的行为。下面是页面和组件的生命周期函数的详细介绍。

页面的生命周期

页面的生命周期函数定义在页面的 .js 文件中，通常在 Page 对象中定义。以下是页面的主要生命周期函数：

onLoad：
- 页面加载时触发。
- 一个页面只会调用一次 onLoad。
- 可以接收页面参数（如从其他页面跳转时传递的参数）。
onShow：
- 页面显示/切入前台时触发。
- 每次页面显示时都会调用 onShow。
onReady：
- 页面初次渲染完成时触发。
- 一个页面只会调用一次 onReady。
- 此时页面已经渲染完毕，可以进行一些初始化操作。
onHide：
- 页面隐藏/切出后台时触发。
- 如 navigateTo 或底部 tab 切换到其他页面，小程序切后台等。
onUnload：
- 页面卸载时触发。
- 如 redirectTo 或 navigateBack 到其他页面时。
onPullDownRefresh：
- 监听用户下拉动作。
- 需要在页面配置中开启 enablePullDownRefresh。
onReachBottom：
- 页面上拉触底事件的处理函数。
- 可用于加载更多数据。
onShareAppMessage：
- 用户点击右上角菜单中的“转发”按钮时触发。
- 返回一个对象，用于自定义转发内容。
onPageScroll：
- 页面滚动时触发。
- 可用于监听页面滚动位置。
onResize：
- 小程序基础库版本 2.3.0 开始支持。
- 页面尺寸变化时触发。

组件的生命周期

组件的生命周期函数定义在组件的 .js 文件中，通常在 Component 对象中定义。以下是组件的主要生命周期函数：

created：
- 组件实例刚刚被创建好时调用。
- 此时不能调用 setData。
attached：
- 组件实例进入页面节点树时调用。
- 可以在此处进行初始化操作。
ready：
- 组件布局完成后调用。
- 此时可以获取节点信息，使用 wx.createSelectorQuery。
moved：
- 组件实例被移动到节点树另一个位置时调用。
detached：
- 组件实例被从页面节点树移除时调用。
- 可以在此处进行清理工作。
error：
- 每当组件方法抛出错误时执行。
- 接收三个参数：错误信息、错误堆栈、当前组件实例。

示例代码

页面示例

javascript

// pages/index/index.js
Page({
  data: {
    message: "Hello, World!",
  },

  onLoad: function (options) {
    console.log("Page onLoad", options);
  },

  onShow: function () {
    console.log("Page onShow");
  },

  onReady: function () {
    console.log("Page onReady");
  },

  onHide: function () {
    console.log("Page onHide");
  },

  onUnload: function () {
    console.log("Page onUnload");
  },

  onPullDownRefresh: function () {
    console.log("Page onPullDownRefresh");
    // 停止下拉刷新
    wx.stopPullDownRefresh();
  },

  onReachBottom: function () {
    console.log("Page onReachBottom");
  },

  onPageScroll: function (event) {
    console.log("Page onPageScroll", event);
  },

  onResize: function (size) {
    console.log("Page onResize", size);
  },
});

组件示例

javascript

// components/my-component/my-component.js
Component({
  properties: {
    myProperty: {
      type: String,
      value: "",
    },
  },

  created: function () {
    console.log("Component created");
  },

  attached: function () {
    console.log("Component attached");
  },

  ready: function () {
    console.log("Component ready");
  },

  moved: function () {
    console.log("Component moved");
  },

  detached: function () {
    console.log("Component detached");
  },

  error: function (error) {
    console.error("Component error", error);
  },

  methods: {
    someMethod: function () {
      console.log("Some method called");
    },
  },
});

通过理解和使用这些生命周期函数，你可以更好地控制页面和组件的行为，实现更复杂的功能。希望这些示例能够帮助你更好地理解微信小程序的生命周期。

生命周期 ​

页面的生命周期 ​

组件的生命周期 ​

示例代码 ​

页面示例 ​

组件示例 ​