美文网首页
小程序生命周期

小程序生命周期

作者: 云之一 | 来源:发表于2021-03-29 09:54 被阅读0次

1、应用生命周期

  • 应用生命周期书写在app.js文件中
  • onLaunch 小程序第一次启动时触发。应用场景:用户首次进入获取用户信息,及权限
  • onShow 小程序首次显示时,或小程序与其他应用切换显隐时触发。应用场景:小程序重新显示时,重置数据或页面效果
  • onHide 小程序与其他应用切换显隐时触发。应用场景:当小程序隐藏时,关闭或暂停一些定时操作
  • onError 小程序代码出现错误时触发。应用场景:错误触发时,将错误发送到后台进行记录跟踪
  • onPageNotFound 小程序首页找不到时触发。应用场景:找不到首页时,跳转到其他页面
  • onThemeChange 微信系统切换主题时触发,默认入参包含theme属性,取值为darklight
// 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.jsonwindow选项中或页面配置中开启enablePullDownRefresh
    可以通过wx.startPullDownRefresh触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
    当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

  • onReachBottom 上拉加载时触发。可以在app.jsonwindow选项中或页面配置中设置触发距离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

相关文章

网友评论

      本文标题:小程序生命周期

      本文链接:https://www.haomeiwen.com/subject/wxgxhltx.html