微信小程序 生命周期和页面的生命周期详细介绍

下面详细讲解一下微信小程序的生命周期和页面的生命周期：

下面详细讲解一下微信小程序的生命周期和页面的生命周期：

微信小程序生命周期介绍

微信小程序生命周期分为两个部分：全局生命周期和页面生命周期。全局生命周期是指在整个小程序中被执行的方法，而页面生命周期则是指在页面中被执行的方法。

全局生命周期

全局生命周期包含以下方法：

1. onLaunch(options)

在小程序初始化完成时执行，只会执行一次。

参数说明：

options：Object，启动小程序时的参数，包含了 query、scene、path、shareTicket、referrerInfo 等信息。

示例代码：

App({
  onLaunch: function(options) {
    console.log('小程序初始化完成');
    console.log('options:', options);
  }
})

2. onShow(options)

在小程序启动或从后台进入前台时执行。

参数说明：

options：Object，启动小程序时的参数，包含了 query、scene、path、shareTicket、referrerInfo 等信息。

示例代码：

App({
  onShow: function(options) {
    console.log('小程序显示');
    console.log('options:', options);
  }
})

3. onHide()

在小程序从前台进入后台时执行。

示例代码：

App({
  onHide: function() {
    console.log('小程序隐藏');
  }
})

页面生命周期

页面生命周期包含以下方法：

1. onLoad(options)

在页面加载时执行，只会执行一次。

参数说明：

options：Object，页面加载时的参数，包含了 query、scene、path、shareTicket、referrerInfo 等信息。

示例代码：

Page({
  onLoad: function(options) {
    console.log('页面加载完成');
    console.log('options:', options);
  }
})

2. onReady()

在页面初次渲染完成时执行。

示例代码：

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

3. onShow()

在页面显示时执行。

示例代码：

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

4. onHide()

在页面隐藏时执行。

示例代码：

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

5. onUnload()

在页面卸载时执行。

示例代码：

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

示例说明

示例一

下面是一段包含了所有生命周期的示例代码：

App({
  //全局生命周期
  onLaunch: function(options) {
    console.log('小程序初始化完成');
    console.log('options:', options);
  },
  onShow: function(options) {
    console.log('小程序显示');
    console.log('options:', options);
  },
  onHide: function() {
    console.log('小程序隐藏');
  },
  //页面生命周期
  onPageNotFound: function() {
    console.log('页面不存在');
  }
})

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

示例二

下面是一个包含跳转页面的示例代码，可以看到跳转后的页面会触发 onLoad 和 onReady 方法，而原页面则会触发 onHide 和 onUnload 方法。

// index.js
Page({
  jump: function() {
    wx.navigateTo({
      url: '/pages/detail/detail'
    })
  }
})

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

希望以上对微信小程序生命周期和页面生命周期的介绍对你有所帮助。