微信小程序生命周期钩子函数。

小程序生命周期:

生命周期是指一个小程序从创建到销毁的一系列过程

小程序的两种生命周期

在小程序中 ,通过App()来注册一个小程序 ,通过Page()来注册一个页面

小程序应用的生命周期:

App()函数用来注册一个小程序。接受一个 Object参数,其指定小程序的生命周期回调等。App() 必须在 app.js 中调用,必须调用且只能调用一次。

App({
  onLaunch: function(options) {
    // 监听小程序初始化。
    //小程序初始化完成时(全局只触发一次)
  },
  onShow: function(options) {
    // 监听小程序显示。小程序启动,
    //或从后台进入前台显示时
  },
  onHide: function() {
    // 监听小程序隐藏。小程序从前台进入后台时。
  },
  onError: function(msg) {
    console.log(msg) // 错误监听函数。
    //小程序发生脚本错误,或者 api 调用失败时触发,
    //会带上错误信息
  },
  onPageNotFound: function(res) {
    // 页面不存在监听函数。
    //小程序要打开的页面不存在时触发,
    //会带上页面信息回调该函数
  },
  globalData: 'I am global data'
})

前台、后台定义: 当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台。

应用声明周期:
小程序应用生命周期

  1. 用户首次打开小程序,触发 onLaunch 方法(全局只触发一次)。
  2. 小程序初始化完成后,触发 onShow 方法,监听小程序显示。
  3. 小程序从前台进入后台,触发 onHide 方法。
  4. 小程序从后台进入前台显示,触发 onShow 方法。
  5. 小程序后台运行一定时间,或系统资源占用过高,会被销毁。
    全局的 getApp() 函数可以用来获取到小程序 App 实例。

注意:

  1. 不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例。
  2. 通过 getApp() 获取实例之后,不要私自调用生命周期函数。

从中我们可以知道小程序的生命周期函数的调用顺序为:onLaunch>onShow>onHide

页面的生命周期:

Page(Object)函数用来注册一个页面。接受一个 Object类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。

Page({
  data: {
    // 页面的初始数据
    text: "This is page data."
  },
  onLoad: function(options) {
    // 生命周期回调—监听页面加载
  },
  onReady: function() {
    // 生命周期回调—监听页面初次渲染完成
  },
  onShow: function() {
    // 生命周期回调—监听页面显示
  },
  onHide: function() {
    // 生命周期回调—监听页面隐藏
  },
  onUnload: function() {
    // 生命周期回调—监听页面卸载
  },
//  ---------------以下不是生命周期钩子函数----------------
  onPullDownRefresh: function() {
    // 监听用户下拉动作
  },
  onReachBottom: function() {
    // 页面上拉触底事件的处理函数
  },
  onShareAppMessage: function () {
    // 用户点击右上角转发
  },
  onPageScroll: function() {
    // 页面滚动触发事件的处理函数
  },
  onResize: function() {
    // 页面尺寸改变时触发
  },
  onTabItemTap(item) {
    // 当前是 tab 页时,点击 tab 时触发
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 任意的函数,在页面的函数中用 this 可以访问
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 任意数据,在页面的函数中用 this 可以访问
  customData: {
    hi: 'MINA'
  }
})

  • 从中我们可以知道小程序页面的生命周期函数的调用顺序为:onLoad>onShow>onReady。
  • 至于onHide函数就是当隐藏页面的时候触发。

页面生命周期:
页面生命周期

  • 小程序注册完成后,加载页面,触发onLoad方法。
  • 页面载入后触发onShow方法,显示页面。
  • 首次显示页面,会触发onReady方法,渲染页面元素和样式,一个页面只会调用一次。
  • 当小程序后台运行或跳转到其他页面时,触发onHide方法。
  • 当小程序有后台进入到前台运行或重新进入页面时,触发onShow方法。
  • 当使用重定向方法wx.redirectTo(object)或关闭当前页返回上一页wx.navigateBack(),触发onUnload。

总结:

  • onLoad: 页面加载。一个页面只会调用一次。参数可以获取wx.navigateTo和wx.redirectTo及中的 query。
  • onShow: 页面显示。每次打开页面都会调用一次。
  • onReady: 页面初次渲染完成。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
  • onHide: 页面隐藏。当navigateTo或底部tab切换时调用。
  • onUnload: 页面卸载。当redirectTo或navigateBack的时候调用。
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值