關(guān)于小程序app.js生命周期的介紹

小程序的生命周期——App.js

App() 必須在 app.js 中注冊(cè)，且不能注冊(cè)多個(gè)。所以App（）方法在一個(gè)小程序中有且僅有一個(gè)。

App() 函數(shù)用來(lái)注冊(cè)一個(gè)小程序。接受一個(gè) object 參數(shù)，其指定小程序的生命周期函數(shù)等。先上代碼：

App({
  onLaunch: function () {
      console.log('App onLaunch');

  },

  onShow:function (){
     console.log('App onShow');

  },

  onHide:function(){
      console.log('App onHide');

  },
  onError:function(){
     console.log('App onError');

  },

  getPics: function() {
      return this.globalData.picList;
  },
  globalData:{
      picList: [] // 圖片列表
  },

  globalName: 'tangdekun'

});

最外層的整個(gè){ }就是一個(gè)object 參數(shù)。

通過(guò)表格的形式看App()中的object參數(shù)說(shuō)明：

將原有的app.js中替換為上面的代碼，首次打開小程序，可以在Log信息中看到以下Log信息,會(huì)看到onShow（）方法會(huì)執(zhí)行兩次

App onLaunch App onShow() App onShow()

前臺(tái)、后臺(tái)定義： 當(dāng)用戶點(diǎn)擊左上角關(guān)閉，或者按了設(shè)備 Home 鍵離開微信，小程序并沒(méi)有直接銷毀，而是進(jìn)入了后臺(tái)；當(dāng)再次進(jìn)入微信或再次打開小程序，又會(huì)從后臺(tái)進(jìn)入前臺(tái)。

只有當(dāng)小程序進(jìn)入后臺(tái)一定時(shí)間，或者系統(tǒng)資源占用過(guò)高，才會(huì)被真正的銷毀。

注意：

1.不要在定義于 App() 內(nèi)的函數(shù)中調(diào)用 getApp() ，使用 this 就可以拿到 app 實(shí)例。

2.不要在 onLaunch 的時(shí)候調(diào)用 getCurrentPage()，此時(shí) page 還沒(méi)有生成。

3.通過(guò) getApp() 獲取實(shí)例之后，不要私自調(diào)用生命周期函數(shù)。

2.頁(yè)面的生命周期

Page() 函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面。接受一個(gè) object 參數(shù)，其指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。

生命周期函數(shù)

onLoad: 頁(yè)面加載
    一個(gè)頁(yè)面只會(huì)調(diào)用一次。
    接收頁(yè)面參數(shù)   可以獲取wx.navigateTo和wx.redirectTo及中的 query。

onShow: 頁(yè)面顯示
    每次打開頁(yè)面都會(huì)調(diào)用一次。

onReady: 頁(yè)面初次渲染完成
    一個(gè)頁(yè)面只會(huì)調(diào)用一次，代表頁(yè)面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互。


onHide: 頁(yè)面隱藏
    當(dāng)navigateTo或底部tab切換時(shí)調(diào)用。

onUnload: 頁(yè)面卸載
    當(dāng)redirectTo或navigateBack的時(shí)候調(diào)用。
1234567891011121314151617

其中APP的生命周期和頁(yè)面的生命周期是相互交叉的：舉例：

我們有頁(yè)面Test和Test1，我們?cè)趖est.js,test1.js和App.js的生命周期方法中都打印log，代碼如下：

test1.js

Page({
  data:{
    names:"tangdekun test1"
  },
  onLoad:function(options){
    // 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
    console.log("test1 onLoad");
  },
  onReady:function(){
    // 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
    console.log("test1 onReady");
  },
  onShow:function(){
    // 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
   console.log("test1 onShow");
  },
  onHide:function(){
    // 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
     console.log("test1 onHide");
  },
  onUnload:function(){
    // 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
     console.log("test1 onUnload");
  },
  onPullDownRefresh: function() {
    // 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
     console.log("test1 onPullDownRefresh");
  },
  onReachBottom: function() {
    // 頁(yè)面上拉觸底事件的處理函數(shù)
     console.log("test1 onReachBottom");
  }

})

test.js

Page({
  data:{
    name:"test"
  },
  onLoad:function(options){
    // 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
    console.log("test onLoad");
  },
  onReady:function(){
    // 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
    console.log("test onReady");
  },
  onShow:function(){
    // 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
   console.log("test onShow");
  },
  onHide:function(){
    // 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
     console.log("test onHide");
  },
  onUnload:function(){
    // 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
     console.log("test onUnload");
  },
  onPullDownRefresh: function() {
    // 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
     console.log("test onPullDownRefresh");
  },
  onReachBottom: function() {
    // 頁(yè)面上拉觸底事件的處理函數(shù)
     console.log("test onReachBottom");
  },
  onShareAppMessage: function() {
    // 用戶點(diǎn)擊右上角分享
    return {
      title: '分享頁(yè)面', // 分享標(biāo)題
      desc: '這是一個(gè)分享的測(cè)試', // 分享描述
      path: 'pages/waimai/waimai' // 分享路徑
    }
  },
  navigateToPageB: function() {
    wx.navigateTo({
      url: '../../pages/pageB/pageB?id=3',
      success: function(res){

      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
  redirectToPageA : function(){
    wx.redirectTo({
      url: '../../pages/pageA/pageA?id=4',
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
 switchTabToTest1:function(){
   wx.switchTab({
     url: '../../pages/test1/test1',
     success: function(res){
       // success
     },
     fail: function() {
       // fail
     },
     complete: function() {
       // complete
     }
   })
 } 

})

app.js

//app.js
App({
  onLaunch: function () {
      console.log('App onLaunch');

  },

  onShow:function (){
     console.log('App onShow1'+this.globalName);

  },

  onHide:function(){
      console.log('App onHide');

  },
  onError:function(){
     console.log('App onError');

  },

  getPics: function() {
      return this.globalData.picList;
  },
  globalData:{
      picList: [] // 圖片列表
  },

  globalName: 'tangdekun'

});

我們將test頁(yè)面設(shè)置為首頁(yè)【在app.json中設(shè)置】，程序會(huì)自動(dòng)加載test頁(yè)面，調(diào)用test.js中的生命周期方法，打印Log信息如下：

然后點(diǎn)擊菜單欄【作業(yè)中心】test1，會(huì)調(diào)用test 的onHide,test1的onLoad,onShow,onReady，打印Log信息如下：

在點(diǎn)擊【朋友圈】test，會(huì)調(diào)用test1的onHide方法，test的onshow方法，而不會(huì)調(diào)用test的onLoad,onReady方法，log信息如下：

通過(guò)實(shí)例我們一起理解一下官方的小程序頁(yè)面的生命周期：

View thread是我們的wxml文件，AppServiceThread就是我們js文件中研究的頁(yè)面的生命周期。這里我們可以看到每個(gè)生命周期方法的調(diào)用順序以及和Wxml之間的信息交流。大家可以簡(jiǎn)略的看一下就好。

因?yàn)轫?yè)面的生命周期和頁(yè)面的路由【即頁(yè)面之間的跳轉(zhuǎn)方式】有關(guān)，所以接下來(lái)我會(huì)向大家展示頁(yè)面跳轉(zhuǎn)的三種方式和各種跳轉(zhuǎn)方式之下的生命周期方法的調(diào)度。

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過(guò)拖拽、拼接模塊布局小程序商城頁(yè)面，所看即所得，只需要美工就能做出精美商城。更多小程序商店請(qǐng)查看：小程序商店