小程序生命周期

青旅半醒 2022-05-22 02:04 208阅读 0赞

应用的生命周期  
App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

object参数说明：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>触发时机</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onLaunch</td> 
   <td>Function</td> 
   <td>生命周期函数–监听小程序初始化</td> 
   <td>当小程序初始化完成时，会触发 onLaunch（全局只触发一次）</td> 
  </tr> 
  <tr> 
   <td>onShow</td> 
   <td>Function</td> 
   <td>生命周期函数–监听小程序显示</td> 
   <td>当小程序启动，或从后台进入前台显示，会触发 onShow</td> 
  </tr> 
  <tr> 
   <td>onHide</td> 
   <td>Function</td> 
   <td>生命周期函数–监听小程序隐藏</td> 
   <td>当小程序从前台进入后台，会触发 onHide</td> 
  </tr> 
 </tbody> 
</table>

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

![这里写图片描述][70]

*  用户首次打开小程序，触发 onLaunch（全局只触发一次）。
 *  小程序初始化完成后，触发onShow方法，监听小程序显示。
 *  小程序从前台进入后台，触发 onHide方法。
 *  小程序从后台进入前台显示，触发 onShow方法。
 *  小程序后台运行一定时间，或系统资源占用过高，会被销毁。

App({
      onLaunch: function() {  
        // Do something initial when launch.
      },
      onShow: function() { 
          // Do something when show.
      },
      onHide: function() { 
          // Do something when hide.
      },
      onError: function(msg) { 
        console.log(msg)
      },
      globalData: 'I am global data'
    })

小程序提供了全局的 getApp()函数，可以获取到小程序实例。

> 注意：  
> App() 必须在 app.js 中注册，且不能注册多个。  
> 不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。  
> 不要在 onLaunch 的时候调用 getCurrentPage()，此时 page 还没有生成。  
> 通过 getApp() 获取实例之后，不要私自调用生命周期函数。

## 页面的生命周期 ##

Page()函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。  
object 参数说明：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>data</td> 
   <td>Object</td> 
   <td>页面的初始数据</td> 
  </tr> 
  <tr> 
   <td>onLoad</td> 
   <td>Function</td> 
   <td>生命周期函数–监听页面加载</td> 
  </tr> 
  <tr> 
   <td>onReady</td> 
   <td>Function</td> 
   <td>生命周期函数–监听页面初次渲染完成</td> 
  </tr> 
  <tr> 
   <td>onShow</td> 
   <td>Function</td> 
   <td>生命周期函数–监听页面显示</td> 
  </tr> 
  <tr> 
   <td>onHide</td> 
   <td>Function</td> 
   <td>生命周期函数–监听页面隐藏</td> 
  </tr> 
  <tr> 
   <td>onUnload</td> 
   <td>Function</td> 
   <td>生命周期函数–监听页面卸载</td> 
  </tr> 
 </tbody> 
</table>

![这里写图片描述][70 1]

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

Page({
      data: {
        text: "This is page data."
      },
      onLoad: function(options) { 
        // Do some initialize when page load.
      },
      onReady: function() { 
        // Do something when page ready.
      },
      onShow: function() { 
        // Do something when page show.
      },
      onHide: function() { 
        // Do something when page hide.
      },
      onUnload: function() { 
        // Do something when page close.
      },
      onPullDownRefresh: function() { 
        // Do something when pull down.
      },
      onReachBottom: function() { 
        // Do something when page reach bottom.
      },
      onShareAppMessage: function () { 
       // return custom share data when user share.
      },
      // Event handler.
      viewTap: function() { 
        this.setData({
          text: 'Set some data for updating view.'
        })
      },
      customData: {
        hi: 'MINA'
      }
    })

## 用Page 实例说明的页面的生命周期 ##

![这里写图片描述][70 2]

由上图可知，小程序由两大线程组成：负责界面的视图线程（view thread）和负责数据、服务处理的服务线程（appservice thread），两者协同工作，完成小程序页面生命周期的调用。  
![这里写图片描述][70 3]

感谢简书网友的文章[https://www.jianshu.com/p/0078507e14d3][https_www.jianshu.com_p_0078507e14d3]

[70]: /images/20220522/85a3f219570746cdb8dfe78063054e2a.png
[70 1]: /images/20220522/4b83a9f33c9f47f1830261dec80c27a3.png
[70 2]: /images/20220522/af320f7b186f418da07cc639585cfc85.png
[70 3]: /images/20220522/5aad3cf3996a47f6a90de996b7130b19.png
[https_www.jianshu.com_p_0078507e14d3]: https://www.jianshu.com/p/0078507e14d3