微信小程序 生命周期详解

关于微信小程序的生命周期，我们可以分为两大类：

1. 应用生命周期
2. 页面生命周期

接下来我将详细介绍这两类生命周期的每个阶段以及相关方法的作用。

应用生命周期

应用生命周期指的是整个小程序的生命周期。应用生命周期的函数在 app.js 中定义。

onLaunch

当小程序初次启动的时候，会触发 onLaunch 函数。该函数在小程序生命周期内仅会被触发一次。该函数的作用主要是初始化小程序，比如获取版本号、获取用户信息等操作。

示例代码：

App({
  globalData: {
    userInfo: null
  },
  onLaunch: function () {
    console.log('App Launch')
    // 小程序启动时获取用户信息
    wx.getUserInfo({
      success: res => {
        this.globalData.userInfo = res.userInfo
      }
    })
  }
})

onShow

当小程序启动或从后台进入前台显示时，会触发 onShow 函数。该函数可以获取到小程序启动前的路由信息，以及其他相关信息。

示例代码：

App({
  onShow: function (options) {
    console.log('App Show')
    // 如果是通过点击推广链接进入小程序，可以在这里进行统计
    if (options.query && options.query.from) {
      console.log('来源：' + options.query.from)
    }
  }
})

onHide

当小程序从前台进入后台或者被关闭时，会触发 onHide 函数。该函数的作用主要是保存应用状态或者做其他清理工作。

示例代码：

App({
  onHide: function () {
    console.log('App Hide')
    // 将全局数据保存到本地，下次启动时可以继续使用
    wx.setStorageSync('globalData', this.globalData)
  }
})

onError

当小程序出现错误时，会触发 onError 函数。该函数的作用主要是记录错误日志等操作。

示例代码：

App({
  onError: function (error) {
    console.log('App Error', error)
    // 将错误信息发送到服务器，以便分析和处理
    wx.request({
      url: 'https://example.com/error',
      method: 'POST',
      data: {
        message: error.message,
        stack: error.stack
      }
    })
  }
})

页面生命周期

页面生命周期指的是每个页面的生命周期。页面生命周期的函数在每个页面的 js 文件中定义。

onLoad

当页面加载完毕时，会触发 onLoad 函数。该函数的作用主要是初始化页面数据，比如从网络中获取数据等。

示例代码：

Page({
  data: {
    posts: []
  },
  onLoad: function () {
    wx.request({
      url: 'https://example.com/posts',
      success: res => {
        this.setData({
          posts: res.data
        })
      }
    })
  }
})

onShow

当页面出现在前台时，会触发 onShow 函数。该函数的作用主要是进行页面的刷新。通常用于监听页面数据的变化，以及进行页面动态更新。

示例代码：

Page({
  data: {
    count: 0
  },
  onShow: function () {
    // 监听数据变化，如果发生变化就进行页面刷新
    wx.getStorage({
      key: 'count',
      success: res => {
        if (res.data !== this.data.count) {
          this.setData({
            count: res.data
          })
        }
      }
    })
  }
})

onReady

当页面渲染完毕时，会触发 onReady 函数。该函数的作用主要是进行页面的初始化，例如设置页面标题、操作 DOM 等。

示例代码：

Page({
  onReady: function () {
    // 设置页面标题
    wx.setNavigationBarTitle({
      title: '页面标题'
    })
  }
})

onHide

当页面从前台进入后台时，会触发 onHide 函数。该函数的作用主要是保存页面状态或者做其他清理工作。

示例代码：

Page({
  onHide: function () {
    // 保存页面数据到本地存储，下次进入时可以继续使用
    wx.setStorageSync('posts', this.data.posts)
  }
})

onUnload

当页面被销毁时，会触发 onUnload 函数。该函数的作用主要是保存页面状态或者做其他清理工作。

示例代码：

Page({
  onUnload: function () {
    // 清理定时器等资源
    clearInterval(this.timer)
  }
})

以上是微信小程序生命周期的完整攻略介绍，希望对您有所帮助。