微信小程序生命周期和頁面的生命周期詳細介紹

更新時間：2017年01月19日 16:25:07 投稿：lqh

這篇文章主要介紹了微信小程序生命周期和頁面的生命周期詳細介紹的相關資料,需要的朋友可以參考下

微信小程序生命周期和頁面的生命周期詳解：

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

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

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

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'

});

最外層的整個{ }就是一個object 參數。

通過表格的形式看App()中的object參數說明：

屬性	類型	描述	觸發(fā)時機
onLaunch	Function	生命周期函數–監(jiān)聽小程序初始化	當小程序初始化完成時，會觸發(fā) onLaunch（全局只觸發(fā)一次）。
onShow	Function	生命周期函數–監(jiān)聽小程序顯示	當小程序啟動，或從后臺進入前臺顯示，會觸發(fā) onShow
onHide	Function	生命周期函數–監(jiān)聽小程序隱藏	當小程序從前臺進入后臺，會觸發(fā) onHide
onError	Function	錯誤監(jiān)聽函數	當小程序發(fā)生腳本錯誤，或者 api 調用失敗時，會觸發(fā) onError 并帶上錯誤信息
其他	Any		開發(fā)者可以添加任意的函數或數據到 Object 參數中，用 this 可以訪問，上面的getPics就是函數， globalName是數據，這里面的函數和數據都是全局的。調用方式：在Pager中通過getApp()方法得到App對象并獲得全局的數據和調用全局的函數

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

App onLaunch
App onShow()
App onShow()

前臺、后臺定義：當用戶點擊左上角關閉，或者按了設備 Home 鍵離開微信，小程序并沒有直接銷毀，而是進入了后臺；當再次進入微信或再次打開小程序，又會從后臺進入前臺。

只有當小程序進入后臺一定時間，或者系統(tǒng)資源占用過高，才會被真正的銷毀。

注意：

1.不要在定義于 App() 內的函數中調用 getApp() ，使用 this 就可以拿到 app 實例。

2.不要在 onLaunch 的時候調用 getCurrentPage()，此時 page 還沒有生成。

3.通過 getApp() 獲取實例之后，不要私自調用生命周期函數。

2.頁面的生命周期

Page() 函數用來注冊一個頁面。接受一個 object 參數，其指定頁面的初始數據、生命周期函數、事件處理函數等。

生命周期函數

onLoad: 頁面加載
  一個頁面只會調用一次。
  接收頁面參數  可以獲取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。

onShow: 頁面顯示
  每次打開頁面都會調用一次。

onReady: 頁面初次渲染完成
  一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互。


onHide: 頁面隱藏
  當navigateTo或底部tab切換時調用。

onUnload: 頁面卸載
  當redirectTo或navigateBack的時候調用。

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

我們有頁面Test和Test1，我們在test.js,test1.js和App.js的生命周期方法中都打印log，代碼如下：

test1.js

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

})

test.js

Page({
 data:{
  name:"test"
 },
 onLoad:function(options){
  // 生命周期函數--監(jiān)聽頁面加載
  console.log("test onLoad");
 },
 onReady:function(){
  // 生命周期函數--監(jiān)聽頁面初次渲染完成
  console.log("test onReady");
 },
 onShow:function(){
  // 生命周期函數--監(jiān)聽頁面顯示
  console.log("test onShow");
 },
 onHide:function(){
  // 生命周期函數--監(jiān)聽頁面隱藏
   console.log("test onHide");
 },
 onUnload:function(){
  // 生命周期函數--監(jiān)聽頁面卸載
   console.log("test onUnload");
 },
 onPullDownRefresh: function() {
  // 頁面相關事件處理函數--監(jiān)聽用戶下拉動作
   console.log("test onPullDownRefresh");
 },
 onReachBottom: function() {
  // 頁面上拉觸底事件的處理函數
   console.log("test onReachBottom");
 },
 onShareAppMessage: function() {
  // 用戶點擊右上角分享
  return {
   title: '分享頁面', // 分享標題
   desc: '這是一個分享的測試', // 分享描述
   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頁面設置為首頁【在app.json中設置】，程序會自動加載test頁面，調用test.js中的生命周期方法，打印Log信息如下：
這里寫圖片描述