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

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

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

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

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

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

App() 函數(shù)用來注冊一個(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ù)。

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

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

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

App onLaunch
App onShow()
App onShow()

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

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

注意：

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

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

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

2.頁面的生命周期

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

生命周期函數(shù)

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

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

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


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

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

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

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

test1.js

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

})

test.js

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