微信小程序中的生命周期与生命周期函数浅析介绍

微信小程序是一种轻量级的应用程序，它有自己的生命周期和生命周期函数。在开发微信小程序时，熟悉它们的相关知识对于调试和性能优化非常有帮助。本文将深入解析小程序的生命周期和生命周期函数。

生命周期

小程序的生命周期是指从小程序启动到关闭或者被销毁的整个过程。小程序的生命周期可以分为以下三个阶段：

1. 应用生命周期

应用生命周期与小程序的启动和销毁相关。小程序启动时，生命周期会从 onLaunch 开始，当小程序关闭时，生命周期会延续到 onHide 和 onUnload。其中：

• onLaunch()：小程序初始化时调用，全局只触发一次。
• onShow()：小程序启动或从后台进入前台显示时调用。
• onHide()：小程序从前台进入后台时调用。
• onError(Object error)：小程序发生脚本错误或者 API 调用失败时调用。

同时，小程序还可以通过 App() 注册一个小程序实例，该小程序实例对象具有生命周期函数，如下所示：

App({
  onLaunch: function (options) {
    // do something when launch
  },
  onShow: function (options) {
    // do something when show
  },
  onHide: function () {
    // do something when hide
  },
  onError: function (msg) {
    console.log(msg)
  }
})

2. 页面生命周期

页面生命周期是小程序中各个页面启动和销毁的的过程。页面的生命周期函数会随着页面的展示卸载而触发。小程序中常见页面的生命周期函数有以下几个：

• onLoad(Object query)：页面加载时触发，一个小程序页面生命周期只会调用一次。
• onReady()：页面初次渲染完成时调用，一个小程序页面生命周期只会调用一次。
• onShow()：页面显示时触发，每次展示都会触发。
• onHide()：页面从前台变为后台时触发。
• onUnload()：页面卸载时触发。

以下是一个简单的页面生命周期的示例：

Page({
  data: {
    msg: 'hello world'
  },
  onLoad: function (options) {
    console.log('onLoad')
  },
  onReady: function () {
    console.log('onReady')
  },
  onShow: function () {
    console.log('onShow')
  },
  onHide: function () {
    console.log('onHide')
  },
  onUnload: function () {
    console.log('onUnload')
  }
})

3. 组件生命周期

组件生命周期是指在小程序中每个组件的渲染过程。每个组件包含了自己的生命周期函数，如下：

• created()：组件实例刚刚被创建时触发。
• attached()：组件实例进入页面节点树时触发。
• ready()：组件渲染完毕并且布局完成后触发。
• moved()：组件实例被移到新的节点时触发。
• detached()：组件实例从页面节点树中移除时触发。

以下是一个简单的组件的生命周期的示例：

Component({
  created: function () {
    console.log('created')
  },
  attached: function () {
    console.log('attached')
  },
  ready: function () {
    console.log('ready')
  },
  moved: function () {
    console.log('moved')
  },
  detached: function () {
    console.log('detached')
  }
})

生命周期函数

每个生命周期都对应着一个生命周期函数，它们的作用分别是：

1. onLaunch(options)

onLaunch() 是小程序的全局生命周期函数之一。它会在小程序初始化时触发，只会在小程序启动时触发一次。

该函数接收一个参数 options，options 对象包含小程序的启动参数信息：

• path：打开小程序的路径。
• query：打开小程序的路径中查询参数信息。
• scene：场景值，数字类型，用来表示场景类型。
• shareTicket：获取到的分享票据。

在该函数中，开发者可以根据不同的场景值来处理不同的逻辑，比如根据场景来初始化不同的数据等。

以下是一个应用生命周期函数的示例：

App({
  onLaunch: function (options) {
    console.log(options)
    if (options.scene == 1001) {
      console.log('场景值为 1001')
    }
  }
})

2. onLoad(options)

onLoad() 是页面生命周期函数之一，它会在页面加载时触发。该函数只会在页面加载时触发一次。

该函数接收一个参数 options，options 对象为页面跳转路径中的参数信息。在该函数中，开发者可以获取到页面中的参数信息，从而进行页面数据的初始化操作等。

以下是一个页面生命周期函数的示例：

Page({
  onLoad: function (options) {
    console.log(options)
    this.setData({
      id: options.id
    })
  }
})

3. created()

created() 是组件生命周期函数之一，它会在组件实例被创建时触发。在该函数中，开发者可以进行组件的初始化操作等。

以下是一个组件生命周期函数的示例：

Component({
  created: function () {
    console.log('created')
  }
})

以上就是微信小程序的生命周期和生命周期函数的详细解析。在开发微信小程序时，熟悉它们的相关知识对于调试和性能优化非常有帮助。