小程序生命周期钩子函数

Dear 丶 2022-12-10 07:17 205阅读 0赞

更多详情参考：[https://www.cnblogs.com/fozero/p/7868560.html][https_www.cnblogs.com_fozero_p_7868560.html]

### 生命周期： ###

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

### 小程序的三种生命周期 ###

> 在小程序中 ，通过App()来注册一个小程序 ，通过Page()来注册一个页面，通过Component()来注册一个组件

**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 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。

应用生命周期:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70]

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

**注意：**

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

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

**2. 页面的生命周期**

> `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函数就是当隐藏页面的时候触发。

页面生命周期:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70 1]

*  小程序注册完成后，加载页面，触发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的时候调用。

#### 3.组件生命周期函数 ####

> 在小程序中 ，通过Component()来注册一个组件 。

Component({
      properties: {
        imageList:{
          type:Array,
          value:[]
        }
      },
      created(){
       console.log('created组件创建完成')
      },
      attached(){
       console.log('attached组件挂在到页面')
      },
      detached(){
       console.log('detached组件脱离页面')
      }
    })

*  created()：组件实例刚刚被创建好时触发。
 *  attached()：在组件完全初始化完毕、进入页面节点树后触发。
 *  detached() 组件离开页面节点树后触发。

[https_www.cnblogs.com_fozero_p_7868560.html]: https://www.cnblogs.com/fozero/p/7868560.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70]: /images/20221123/bdd383088dc7423e8af11d497d55f7b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70 1]: /images/20221123/e24018ca2cba43dc98e6e09c68bc80bc.png