微信小程序（五） --- 生命周期

五、小程序的生命周期

1、应用生命周期

1.1、总体解析

是定义在app.js里面，小程序的生命周期

属性	类型	必填	说明
onLaunch	function	否	监听⼩程序初始化
onShow	function	否	监听⼩程序启动或切前台
onHide	function	否	监听⼩程序切后台
onError	function	否	错误监听函数
onPageNotFound	function	否	⻚⾯不存在监听函数

App({
  onLaunch() {},
  onShow() {},
  onHide() {},
  onError() {},
  onPageNotFound() {},
})

1.2、onLaunch

触发时机： 应用第一次启动就会触发的事件

应 用：在应用第一次启动时，获取用户个人信息

// 1 应用第一次启动就会触发的事件
  onLaunch() {
    // 在应用第一次启动时，获取用户个人信息
    console.log('onLaunch')
  },

1.3、onShow

触发时机： 应用被用户看到时触发

应 用：对应用的数据或者页面效果 重置

// 2 应用 被用户看到时触发
  onShow() {
    // 对应用的数据或者页面效果 重置
    console.log('onShow')
  },

1.4、onHide

触发时机： 应用 被隐藏时触发

应 用：暂停、清除定时器

// 3 应用 被隐藏时触发
  onHide() {
    // 暂停、清除定时器
    console.log('onHide')
  },

1.5、onError

触发时机： 应用的代码发生报错时，会触发

应 用：应用发生代码报错时，收集用户的错误信息，通过异步请求将错误信息发送到后台

// 4 应用的代码发生报错时，会触发
  onError(err) {
    // 应用发生代码报错时，收集用户的错误信息，通过异步请求将错误信息发送到后台
    console.log('onError')
  },

1.6、onPageNotFound

触发时机： 应用第一次启动时，找不大第一个入口页面，才会触发

应 用：如果页面不存在，通过js方式重新跳转页面，重新跳到第二个页面

 // 页面找不到就会触发
  // 应用第一次启动时，找不大第一个入口页面，才会触发
  onPageNotFound() {
    // 如果页面不存在，通过js方式重新跳转页面，重新跳到第二个页面
    // 不能跳到tabbar页面
    wx.navigateTo({
      url: '/pages/demo11/demo11',
    });
  }

2、页面生命周期

2.1、总体解析

是定义在某个页面的 .js 文件中

属性	类型	说明
onLoad	function	生命周期函数–监听页面加载
onShow	function	⽣命周期回调—监听⻚⾯显
onReady	function	⽣命周期回调—监听⻚⾯初次渲染完成
onHide	function	⽣命周期回调—监听⻚⾯隐藏
onUnload	function	⽣命周期回调—监听⻚⾯卸载
onPullDownRefresh	function	监听⽤⼾下拉动作
onReachBottom	function	⻚⾯上拉触底事件的处理函数
onShareAppMessage	function	⽤⼾点击右上⻆转发
onPageScroll	function	⻚⾯滚动触发事件的处理函数
onResize	function	⻚⾯尺⼨改变时触发
onTabItemTap	function	当前是 tab ⻚时，点击 tab 时触发

Page({
    onLoad: function() {},
    onShow: function() {},
    onReady: function() {},
    onHide: function() {},
    onUnload: function() {},
    onPullDownRefresh: function() {},
    onReachBottom: function() {},
    onShareAppMessage: function() {},
	onPageScroll: function() {},
	onResize: function() {},
	onTabItemTap: function() {}
})

2.2、onLoad

触发条件：监听页面加载

作 用：发送异步请求，初始化数据

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 发送异步请求，初始化数据
    console.log('onLoad')
  },

2.3、onShow

触发条件：监听页面显示

作 用：

/**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log('onShow')
  },

2.4、onReady

触发条件：监听页面初次渲染完成

作 用：

/**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log('onReady')
  },

2.5、onHide

触发条件：监听页面隐藏

作 用：

/**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log('onHide')
  },

2.6、onUnload

触发条件：监听页面卸载

作 用：

/**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log('onUnload')
  },

2.7、onPullDownRefresh

触发条件：监听用户下拉动作

作 用：

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    // 进行数据 或者 效果 重新处理
    console.log('onPullDownRefresh')
  },

2.8、onReachBottom

触发条件：页面上拉触底事件的处理函数， 需要让页面出现上下滚动

作 用：上拉加载下一页数据的操作

/**
   * 页面上拉触底事件的处理函数
   * 需要让页面出现上下滚动
   */
  onReachBottom: function () {
    // 上拉加载下一页数据的操作
    console.log('onReachBottom')
  },

2.9、onShareAppMessage

触发条件： 用户点击右上角分享

作 用：

/**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    console.log('onShareAppMessage')
  },

2.10、onPageScroll

触发条件：⻚⾯滚动触发事件的处理函数

作 用：

/**
   *  ⻚⾯滚动触发事件的处理函数
   */
  onPageScroll: function () {
    console.log('onPageScroll')
  },

2.11、onResize

触发条件：⻚⾯尺⼨改变时触发， 小程序发送 横屏竖屏 切换时候触发

作 用：

/**
   * ⻚⾯尺⼨改变时触发
   * 小程序发送 横屏竖屏 切换时候触发 
   */
  onResize: function () {
    console.log('onResize')
  },

2.12、onTabItemTap

触发条件：必须要求当前是tabbar， 必须点击自己的item

作 用：

 /**
   * 1 必须要求当前是tabbar
   * 2 必须点击自己的item
   */
  onTabItemTap: function () {
    console.log('onTabItemTap')
  }