微信小程序之頁面路由

路由方式

簡介

對於路由的觸發方式以及頁面生命週期函數以下：

路由方式	觸發時機	路由前頁面	路由後頁面
初始化	小程序打開的第一個頁面		onLoad, onSHow
打開新頁面	調用 API wx.navigateTo 或使用組件 <navigator open-type="navigateTo"/>	onHide	onLoad, onShow
頁面重定向	調用 API wx.redirectTo 或使用組件 <navigator open-type="redirectTo"/>	onUnload	onLoad, onShow
頁面返回	調用 API wx.navigateBack 或使用組件<navigator open-type="navigateBack">或用戶按左上角返回按鈕	onUnload	onShow
Tab 切換	調用 API wx.switchTab 或使用組件 <navigator open-type="switchTab"/> 或用戶切換 Tab		各類狀況請參考下表
重啓動	調用 API wx.reLaunch 或使用組件 <navigator open-type="reLaunch"/>	onUnload	onLoad, onShow

 

頁面跳轉觸發的生命週期，實際還存在bug，並不如官網所說的

SwitchTab的跳轉BUG

情景：

首頁跳轉到子頁面後，而後子頁面使用

<navigator type='switchTab' url="/pages/index/index" >
    <view>跳轉首頁</button>
</navigator>

解決辦法：

經過js來跳轉

<view class="weui-btn-area">
             <button class="weui-btn" bindtap="backIndex" type="default">返回主頁</button> 
            </view> 

跳轉成功後，從新調用onload方法

backIndex:function(){
    wx.switchTab({
      url: '/pages/index/index',
      success: function (e) {
        var page = getCurrentPages().pop();
        if (page == undefined || page == null) return;
        page.onLoad();
      }
    })
  },

 

頁面路由的其餘基礎知識請看官方文檔 ：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/route.html

 

wx.navigateBack傳參

  咱們來考慮一下如下場景：

1. 在【頁面A】中調用wx.navigateTo方法跳轉到【頁面B】 2. 而後從【頁面B】返回【頁面A】, 並將【頁面B】中的一些數據傳回【頁面A】

方法1：使用全局數據存儲

• 將要傳遞的數據，存儲在App對象上（好比globalData屬性）。
• 將要傳遞的數據，存儲在小程序的本地數據緩存（Storage）中。

例如，咱們在將要退出頁面B的時候，做以下調用：

//=== 1. 存儲到app對象上的方式 ========
var app = getApp()
app.globalData.mydata = {a:1, b:2};  //存儲數據到app對象上
wx.navigateBack();  //返回上一個頁面

//=== 2.存儲到數據緩存的方式 =========
wx.setStorage({
  key: "mydata",
  data: {a:1, b:2},
  success: function () {
    wx.navigateBack();   //返回上一個頁面
  }
})

這樣一來，當返回到上一個頁面的時候，能夠經過讀取這些全局存儲區域，來獲取到咱們須要的數據。

不過，這種方式也是有很明顯的缺點的。因爲是全局數據存儲，因此當你存入了那些數據後，必須謹慎的去管理這些全局數據（什麼時候被銷燬），不然一不當心，就會產生反作用。

方法2：從頁面路由棧中直接獲取和操做目標Page對象

　　經過調用小程序的API: getCurrentPages()，來獲取當前頁面路由棧的信息，這個路由棧中按照頁面的路由順序存放着相應的Page對象，獲取到上一級頁面的完整Page對象，從而使直接調用Page對象的屬性和方法成爲可能。

以下所示：

var pages = getCurrentPages();
var currPage = pages[pages.length - 1];   //當前頁面
var prevPage = pages[pages.length - 2];  //上一個頁面

//直接調用上一個頁面的setData()方法，把數據存到上一個頁面中去

var newtitle ='It is new title';
prevPage.data.title= newtitle; //不須要頁面更新

prevPage.setData({
  title: newtitle
})

 

頁面棧

頁面棧以棧（先進後出）的形式維護頁面與頁面之間的關係；
小程序提供了getCurrentPages()函數獲取頁面棧，第一個元素爲首頁，最後一個元素爲當前頁面。

1. 使用wx.navigateTo每新開一個頁面，頁面棧大小加1,直到頁面棧大小爲5爲止；
   

2. 使用wx.navigateTo重複打開界面
   

上圖中，假如使用wx.navigateTo從四級頁面跳轉到二級頁面，此時會在頁面棧頂添加一個與二級頁面初始狀態同樣的界面，但兩個頁面狀態是獨立的。頁面棧大小會加1，若是頁面棧大小爲5，則wx.navigateTo無效

1. 使用wx.redirectTo重定向
   

上圖中，假如使用wx.redirectTo從四級頁面重定向到二級頁面，此時會將關閉四級頁面，並使用二級頁面替換四級頁面，但兩個頁面狀態是獨立的。此時的頁面棧大小不變，請注意和使用wx.navigateTo的區別。

1. 使用wx.navigateBack返回
   

上圖中，假如當前頁面爲五級頁面，使用wx.navigateBack：

• 當delta爲1，關閉五級頁面，當前頁面爲四級頁面，頁面棧大小減1；
• 當delta爲2，關閉依次五級頁面和四級頁面，當前頁面爲三級頁面，頁面棧大小減2；
• 以此類推，直到棧底爲止，也就是首頁。

以上使用wx.navigateTo、wx.redirectTo、wx.navigateBack頁面出入棧操做對頁面棧的影響，平時不必定用得上，可是仍是有必要了解背後的原理。

經過學習頁面棧，你至少能夠知道：

• 小程序運行時你能夠獲取到已經初始化了的頁面的屬性和方法
• 動態獲取當前頁面路徑
• 頁面自動跳轉
• 你能夠經過getCurrentPages()獲取頁面page對象，執行非當前頁js裏的方法

總結

• wx.navigateTo會增長頁面棧大小，直到頁面棧大小爲5
• wx.redirectTo不會增長頁面棧大小
• wx.navigateBack會減小頁面棧大小，直到頁面棧大小爲1

 

摘抄來自：

http://www.cnblogs.com/nosqlcoco/p/6195572.html

 https://www.cnblogs.com/caicaizi/p/6652103.html

 

歡迎閱讀本系列文章：微信小程序開發教程目錄