详解微信小程序应用和页面生命周期

微信小程序是一种轻量级的应用，与传统应用程序不同，它具有不同的生命周期和构建方式。在本文中，我们将详细讲解微信小程序应用和页面生命周期。

应用生命周期

应用生命周期是指一个小程序从启动到退出的几个阶段，它由框架自动管理，我们可以通过监听生命周期函数来实现我们自己的业务逻辑。以下是小程序的应用生命周期函数：

App({
  onLaunch(options) {
    // 当小程序启动时触发，options为启动参数
  },
  onShow(options) {
    // 当小程序从后台切换到前台时触发，options为启动参数
  },
  onHide() {
    // 当小程序从前台切换到后台时触发
  },
  onError(error) {
    // 小程序发生错误时触发
  },
  onPageNotFound(options) {
    // 当小程序页面路由找不到时触发
  }
})

例如，我们可以在onLaunch中实现一些初始化逻辑，如获取用户信息；在onShow中实现页面切换逻辑；在onError中实现错误处理逻辑。

页面生命周期

页面生命周期是指小程序中单个页面从创建到销毁的几个阶段，在页面生命周期函数中可以实现相应的业务逻辑。以下是小程序页面生命周期函数：

Page({
  data: {},
  onLoad(options) {
    // 当页面加载时触发
  },
  onShow() {
    // 当页面展示时触发
  },
  onReady() {
    // 当页面首次渲染完成时触发
  },
  onHide() {
    // 当页面从前台切换到后台时触发
  },
  onUnload() {
    // 当页面销毁时触发
  },
  onPullDownRefresh() {
    // 当用户下拉刷新时触发
  },
  onReachBottom() {
    // 当页面滚动到底部时触发
  },
  onShareAppMessage(options) {
    // 当用户点击转发时触发，返回转发信息
  },
  onPageScroll(options) {
    // 当页面滚动时触发，返回滚动信息
  },
  onResize(options) {
    // 窗口大小改变时触发，返回窗口大小
  },
  onTabItemTap(options) {
    // 当用户点击 tab 时触发
  }
})

例如，我们可以在onLoad中实现页面数据初始化逻辑，如获取用户信息；在onShow中实现页面切换逻辑；在onPullDownRefresh中实现下拉刷新逻辑。

示例说明

以下是两个示例，演示如何利用生命周期函数实现相应的逻辑。

示例1：利用onShow实现页面切换逻辑

Page({
  onShow() {
    const currentPages = getCurrentPages(); // 获取当前页面栈
    if (currentPages.length === 1) { // 判断是否为首次进入
      // 首次进入
    } else {
      // 此为从其他页面回来
    }
  }
})

在onShow函数中，利用getCurrentPages获取当前页面栈，通过判断页面栈长度来确定当前是否为首次进入页面。

示例2：利用onPullDownRefresh实现下拉刷新逻辑

Page({
  onPullDownRefresh() {
    // 请求数据
    wx.request({
      url: '',
      success: res => {
        // 数据请求成功，更新界面
        this.setData({ data: res.data });
        // 停止下拉刷新动画
        wx.stopPullDownRefresh();
      },
      fail: error => {
        // 数据请求失败，提示用户
        wx.showToast({
          title: '数据请求失败',
          icon: 'none'
        })
      }
    })
  }
})

在onPullDownRefresh函数中，利用wx.request请求数据，请求成功后调用this.setData更新界面，同时调用wx.stopPullDownRefresh停止下拉刷新动画。如果请求失败，可以通过wx.showToast提示用户。