【小程序】生命周期

小程序分为应用、页面和组件三个部分,所以小程序的生命周期涉及以下:

  • 应用的生命周期
  • 页面的生命周期
  • 组件的声明周期
  • 应用的生命周期对页面生命周期的影响

(1)应用的生命周期

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 实例。

// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

注意:

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

(2)页面的生命周期

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

//index.js
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方法。
  • 当小程序有后台进入到前台运行或重新进入页面时,触发onShow方法。
  • 当使用重定向方法wx.redirectTo(object)或关闭当前页返回上一页wx.navigateBack(),触发onUnload。

总结

  • onLoad: 页面加载。一个页面只会调用一次。参数可以获取wx.navigateTo和wx.redirectTo及 < navigator/>中的 query。
  • onShow: 页面显示。每次打开页面都会调用一次。
  • onReady: 页面初次渲染完成。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
  • onHide: 页面隐藏。当navigateTo或底部tab切换时调用。
  • onUnload: 页面卸载。当redirectTo或navigateBack的时候调用。
    在这里插入图片描述
发布了209 篇原创文章 · 获赞 38 · 访问量 13万+

猜你喜欢

转载自blog.csdn.net/weixin_43953710/article/details/103859053