小程序生命周期

1、应用生命周期

• 应用生命周期书写在app.js文件中
• onLaunch 小程序第一次启动时触发。应用场景：用户首次进入获取用户信息，及权限
• onShow 小程序首次显示时，或小程序与其他应用切换显隐时触发。应用场景：小程序重新显示时，重置数据或页面效果
• onHide 小程序与其他应用切换显隐时触发。应用场景：当小程序隐藏时，关闭或暂停一些定时操作
• onError 小程序代码出现错误时触发。应用场景：错误触发时，将错误发送到后台进行记录跟踪
• onPageNotFound 小程序首页找不到时触发。应用场景：找不到首页时，跳转到其他页面
• onThemeChange 微信系统切换主题时触发，默认入参包含theme属性，取值为dark或light

// app.js
App({
  //小程序第一次启动时触发，此处可用于获取用户信息
  //应用场景：获取用户信息，登录校验
  onLaunch(){
    console.log('onLaunch')
  },
  //小程序显示时触发,切换应用显隐时可触发
  //应用场景：重置应用的数据或页页面效果
  onShow() {
    console.log('onShow')
  },
  //小程序被隐藏时触发
  //应用场景：定时器控制
  onHide(){
    console.log('onHide')
  },
  //小程序代码报错时触发
  //应用场景：收集应用错误信息，传给后台
  onError(err){
    console.log('onError')
    console.log(err)
  },
  //首页找不到时触发
  //应用场景：首页不存在时，可执行跳转到其他页面
  onPageNotFound(){
    wx.navigateTo({
      url: '/pages/btn/btn',
    })
    console.log('onPageNotFound')
  },
  //未处理的promise拒绝事件监听函数,当前不支持android
  onUnhandledRejection(res){
    console.log('onUnhandledRejection')
    // res.reason//error对象
    // res.promise//被拒绝的promise
  },
  //系统切换主题时触发
  //默认入参中包含theme,取值为'dark','light'
  onThemeChange(param){
    console.log(onThemeChange)
  }
})

2、页面生命周期

• onLoad页面加载时触发,只会调用一次，函数入参中可获取页面路径中的参数。
  应用场景：发送异步请求，初始化页面数据，获取页面传参
  示例：

  onLoad(query){
    console.log('onLoad')
    console.log(query)
  }

-onShow 页面显示时触发

 onShow(){
   console.log("page-onShow")
 }

• onReady页面初次渲染完成后触发,只会调用一次。
  对界面内容进行修改的api需在onready之后进行

• onHide页面从前台转为后台时触发

• onUnload 页面销毁时触发

• onPullDownRefresh 下拉刷新时触发。
  需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
  可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
  当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

• onReachBottom 上拉加载时触发。可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。

• onShareAppMessage 监听“发送给朋友”按钮的行为。
  只有定义了onShareAppMessage函数，弹窗中才会有发送给朋友按钮
  函数默认入参为一个对象

   {
     from："button",//转发事件来源，button 或 menu
     target:Object,//from为button时，target指向button，否则为undefined
     webViewUrl:'',//如果有嵌入页面，则为嵌入页面的url
  }

该函数需return一个Object

{
     title:'转发标题',
     path:'转发路径',
     imageUrl:'自定义图片路径'
}

 onShareAppMessage(res){
    console.log('onShareAppMessage')
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  }

• onAddToFavorites 点击收藏时触发，当前页面内若含有嵌入页面，则默认入参中返回```webViewUrl``。
  此函数需要return一个Object。用于设置收藏时的标题、图片、及query传参

{
     title:'收藏标题',
     imageUrl:'http://demo.png',
     query:'name=xxx&age=xx'
}

示例：

  onAddToFavorites(res){
    console.log("onAddToFavorites")
    console.log('webViewUrl: ', res.webViewUrl)
    return {
      title: '自定义标题',
      imageUrl: 'http://demo.png',
      query: 'name=xxx&age=xxx',
    }
  }

• onShareTimeline 监听分享到朋友圈按钮的行为,当前处于beta阶段，仅支持android系统（2021-03-23)，只有定义了onShareTimeline,弹窗中才会显示分享到朋友圈按钮。此函数需return一个object,用于定义自定义分享内容

   {
      title:'朋友圈列表页上显示标题',
      query:'自定义页面路径中携带的参数',
      imageUrl:'自定义图片路径'
  }

示例：

  onShareTimeline(){
    console.log("onShareTimeline")
    return {
      title:'朋友圈列表页上显示标题',
      query:'自定义页面路径中携带的参数',
      imageUrl:'自定义图片路径'
    }
  }

• onResize 页面尺寸发生变化时触发,指小程序发生横纵屏切换时会触发
  使小程序屏幕可以翻转，需在json文件中设置属性：

{
      "pageOrientation":"auto"
}

示例：

  onResize(){
    console.log('onResize')
  },

• onPageScroll 页面滚动时触发
• onTabItemTap tab页中点击自己时才会触发
  函数默认入参为：

  {
       index:'tabItem序号',
       pagePath:'tabItem的页面路径',
       text：'tabItem的按钮文字'
  }

示例：

  onTabItemTap(tab){
    console.log('onTabItemTap')
    console.log(tab.index)
    console.log(tab.pagePath)
    console.log(tab.text)
  }

3、组件生命周期

• 组件中的生命周期写在lifetimes中
• created 组件刚刚被创建时触发，不可使用setData，常用于给组件this添加自定义属性字段
• attached组件初始化完毕后触发，绝大多数初始化工作此处进行
• ready 在组件在视图层布局完成后执行，个人理解类似于vue中的mounted
• moved在组件实例被移动到节点树另一个位置时执行
• detached组件销毁时触发 ,类vue中的destroyed
• error 每当组件方法抛出错误时执行
  示例：

lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  }

4、组件所在页面的生命周期

• show 组件所在的页面被展示时执行
• hide 组件所在的页面被隐藏时执行
• resize 组件所在的页面尺寸变化时执行

Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})

5、小程序生命周期图示

mini-pro-lifeTime.png