微信小程序（四）应用生命周期详解

我来为您详细讲解一下“微信小程序（四）应用生命周期详解”的完整攻略。

应用生命周期

程序启动

当用户首次打开小程序时，触发onLaunch事件，进行初始化操作，例如获取用户信息、提前获取需要缓存的数据等。

App({
  globalData: {
    userInfo: null,
    someData: null
  },
  onLaunch: function () {
    // 获取用户信息
    wx.getUserInfo({
      success: res => {
        this.globalData.userInfo = res.userInfo
        if (this.userInfoReadyCallback) {
          this.userInfoReadyCallback(res)
        }
      }
    })
    // 获取数据
    wx.request({
      url: 'https://example.com/someData',
      success: res => {
        this.globalData.someData = res.data
      }
    })
  }
})

程序重新进入前台

当用户从其他应用进入小程序或在小程序中按 Home 键切换到后台再切回前台时，触发onShow事件。

App({
  globalData: {
    someData: null
  },
  onShow: function () {
    // 刷新数据
    wx.request({
      url: 'https://example.com/someData',
      success: res => {
        this.globalData.someData = res.data
      }
    })
  }
})

程序进入后台

当用户按下 Home 键离开小程序时，触发onHide事件，进行必要的释放资源等操作。

App({
  onHide: function () {
    // 释放资源
    this.globalData.someData = null
  }
})

程序销毁

当小程序被关闭，或者被微信客户端强制结束进程，触发onUnload事件，进行最后的清理操作。

Page({
  onUnload: function () {
    // 最后一步操作
    console.log('onUnload')
  }
})

示例说明

获取用户信息

在onLaunch事件中，我们可以通过调用wx.getUserInfo获取用户信息。

App({
  globalData: {
    userInfo: null
  },
  onLaunch: function () {
    wx.getUserInfo({
      success: res => {
        this.globalData.userInfo = res.userInfo
        console.log('用户信息：', res.userInfo)
      }
    })
  }
})

判断小程序是否在前台运行

我们可以在App中通过onShow和onHide事件，判断小程序是否在前台运行。

App({
  globalData: {
    isFront: true
  },
  onShow: function () {
    this.globalData.isFront = true
  },
  onHide: function () {
    this.globalData.isFront = false
  }
})

以上就是关于“微信小程序（四）应用生命周期详解”的详细攻略，希望能帮助到您。