微信小程序生命周期详解

news2024/11/28 5:29:39

一、全局生命周期

微信小程序的全局生命周期指的是小程序从启动到销毁期间经历的一系列阶段和事件。全局生命周期主要在 App() 构造器中定义，包括以下几个阶段：

onLaunch：小程序初始化完成时触发，全局只触发一次。
onShow：小程序启动或从后台进入前台显示时触发。
onHide：小程序从前台进入后台时触发。
onError：小程序发生脚本错误或 API 调用失败时触发。
onPageNotFound：小程序页面找不到时触发。

全局生命周期代码示例：

App({
  onLaunch: function () {
    console.log('小程序初始化完成');
  },
  onShow: function () {
    console.log('小程序启动或从后台进入前台显示');
  },
  onHide: function () {
    console.log('小程序从前台进入后台');
  },
  onError: function (msg) {
    console.log('小程序发生错误：', msg);
  },
  onPageNotFound: function (options) {
    console.log('小程序页面找不到：', options);
  }
})

二、页面生命周期

页面生命周期指的是小程序页面从创建到销毁期间经历的一系列阶段和事件。页面生命周期主要在 Page() 构造器中定义，包括以下几个阶段：

onLoad：页面加载时触发，一个页面只会触发一次。
onShow：页面显示时触发。
onReady：页面初次渲染完成时触发。
onHide：页面隐藏时触发。
onUnload：页面卸载时触发。

页面生命周期代码示例：

Page({
  onLoad: function (options) {
    console.log('页面加载');
  },
  onShow: function () {
    console.log('页面显示');
  },
  onReady: function () {
    console.log('页面初次渲染完成');
  },
  onHide: function () {
    console.log('页面隐藏');
  },
  onUnload: function () {
    console.log('页面卸载');
  }
})

三、组件生命周期

组件生命周期指的是自定义组件从创建到销毁的一系列阶段和事件。组件生命周期包括以下几个阶段：

created：组件实例被创建时触发。
attached：组件被挂载到页面节点树时触发。
ready：组件在视图层布局完成后执行。
moved：组件实例被移动到节点树另一个位置时执行。
detached：组件实例被从页面节点树移除时执行。

组件生命周期代码示例：

Component({
  lifetimes: {
    created: function () {
      console.log('组件实例被创建');
    },
    attached: function () {
      console.log('组件被挂载到页面节点树');
    },
    ready: function () {
      console.log('组件在视图层布局完成');
    },
    moved: function () {
      console.log('组件实例被移动到节点树另一个位置');
    },
    detached: function () {
      console.log('组件实例被从页面节点树移除');
    }
  }
});