微信小程序生命周期

通过学习小程序生命周期,我们可以对小程序有更好的理解, 可以知道,
在何时何地 , 可以发送一些异步请求、关闭一些定时器、监听错误代码

应用生命周期

指小程序的入口文件：app.js
小程序的应用生命周期指 app.js中的一系列事件

全局配置文件：app.js 的最外层是：App({ })
页面配置文件: 页面.js的最外层是: Page({ })
自定义组件: 组件.js的最外层是: Component({ })

onLaunch
应用第一次启动触发的事件: 后面再打开就不会触发
onShow
用户切换页面退出, 在回到小程序的时候触发
onHide
用户退出小程序页面的时候触发,比如用户去回消息,或者回到桌面
onError
应用代码发生报错的时候触发
onPageNotFound
应用第一次启动的时候, 如果找不到第一个入口页面, 才会触发

app.js:

//app.js
App({
  //1. 应用第一次启动触发的事件: 后面再打开就不会触发
  //用处: 在应用第一次启动的时候, 获取用户的个人信息, 就能在其他页面使用个人信息
  onLaunch(){
    console.log("onLaunch");
    //这里不能触发onPageNotFound事件
    // wx.navigateTo({
    //   url: '../11/11',
    // });
  },
  //2. 应用被用户 看到的时候触发
  //用户切换页面退出, 在回到小程序的时候触发, 这个事件经常被触发
  //用处: 用户重回页面的时候, 对数据进行重置
  onShow(){
    console.log("onShow");
  },
  //3. 应用被隐藏的时候触发 
  //用户退出小程序页面的时候触发,比如用户去回消息,或者回到桌面
  //用处: 暂停或者清除定时器
  onHide(){ 
    console.log("onHide");
  },
  //4. 应用代码发生报错的时候触发
  //打印参数,参数里面是报错信息
  //用处: 应用发生代码报错的时候, 收集用户报错信息, 通过一部请求, 将错误信息发送到后台去
  onError(err){
    console.log("onError");
    console.log(err);
  },
  //5. 页面找不到的时候触发
  //应用第一次启动的时候, 如果找不到第一个入口页面, 才会触发
  ///用处: 如果入口页面不存在了, 通过js跳转的方式重新跳转页面, 重新调到定义的第二个首页
  onPageNotFound(){
    console.log('onPageNotFound');
    //不能跳转达到tabbar页面 导航组件类似
    wx.navigateTo({
      url: 'pages/demo10/demo10',
    });
  }
})

页面生命周期

data
页面初始数据
onLoad
⽣命周期回调—监听⻚⾯加载
onShow
⽣命周期回调—监听⻚⾯显⽰
onReady
⽣命周期回调—监听⻚⾯初次渲染完成
onHide
⽣命周期回调—监听⻚⾯隐藏
onUnload
⽣命周期回调—监听⻚⾯卸载

onPullDownRefresh
监听⽤⼾下拉动作
onReachBottom
⻚⾯上拉触底事件的处理函数
onShareAppMessage
⽤⼾点击右上⻆转发
onPageScroll
⻚⾯滚动触发事件的处理函数
onResize
⻚⾯尺⼨改变时触发，详⻅?响应显⽰区域变化
onTabltemTap
当前是tab⻚时，点击tab时触发

Page({

  /**
   * 页面的初始数据
   */
  data: {
  },

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

  /**
   * 生命周期函数--监听页面显示
   *页面显示时候触发的事件
   */
  onShow: function () {
  },
    /**
   * 生命周期函数--监听页面初次渲染完成
   * 页面渲染完毕触发, 先触发onShow, 再触发onReady
   */
  onReady: function () {
  },

  /**
   * 生命周期函数--监听页面隐藏
   * 页面隐藏的时候触发,包含了应用隐藏,
   * 在页面跳转的时候也会触发
   */
  onHide: function () {
  },

  /**
   * 生命周期函数--监听页面卸载
   * 在页面跳转的时候,选择关闭当前页面(redirect),会触发,相当于卸载页面
   */
  onUnload: function () {
  },

  /** 
   * 页面相关事件处理函数--监听用户下拉动作
   * 用户下拉页面刷新页面的时候触发, 常用于初始化页面
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   * 当页面长度可以上下滑动, 划到最底下的时候, 触发
   * 用来加载下一页
   */
  onReachBottom: function () {
  },

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

  /**
   * 页面滚动就可以触发, 不用触底
   */
  onPageScroll () {
  },

  /**
   * 页面尺寸发生改变的时候触发, 
   * 用于:小程序发生横屏竖屏切换的时候触发,比如游戏
   * 开启横竖屏切换: 在页面json 中添加:  "pageOrientation": "auto"
   */
  onResize () {
    console.log("onResize");
  },

  /**
   * 1. 必须要求当前页面 也是tabbar页面
   * 2. 并且点击自己的tab item的时候才会触发
   */
  onTabItemTap () {
  }
})

生命周期图解

小程序第三方框架

1. 腾讯 wepy 类似vue
2. 美团 mpvue 类似Vue
3. 京东 taro 类似React
4. 滴滴 chameleon
5. uni-app 类似Vue