微信小程序之頁面路由(九)

【未經容許，請勿以任何形式轉載】
什麼是路由？

咱們一般理解的路由指分組數據包從源到目的地時，決定端到端路徑的網絡範圍的進程；

借用上面的定義，咱們能夠理解小程序頁面路由，根據路由規則（路徑）從一個頁面跳轉到另外一個頁面的的規則。

經過本篇文章，你能夠學習到：

1. 哪些狀況會觸發頁面跳轉
2. 如何跳轉頁面
3. 頁面傳參
4. 頁面棧

1、哪些狀況會觸發頁面跳轉

1. 小程序啓動，初始化第一個頁面
2. 打開新頁面，調用 API wx.navigateTo 或使用<navigator />組件
3. 頁面重定向，調用 API wx.redirectTo 或使用<navigator />組件
4. 頁面返回，調用 API wx.navigateBack或用戶按左上角返回按鈕
5. tarbar切換

全部頁面都必須在app.json中註冊,例如：

{
    "pages": [
        "pages/index/index",
        "pages/logs/index"
    ]
}

2、如何跳轉頁面

1. 使用wx.navigateTo接口跳轉,原頁面保留。

wx.navigateTo({
        //目的頁面地址
        url: 'pages/logs/index',
        success: function(res){},
        ...
})

1. 使用wx.redirectTo接口跳轉，關閉原頁面,不能返回。

wx.redirectTo({
        //目的頁面地址
        url: 'pages/logs/index',
        success: function(res){},
        ...
})

3.使用組件 跳轉。

<navigator url="pages/logs/index" hover-class="navigator-hover">跳轉</navigator>

當該組件添加redirect屬性時，等同於wx.redirectTo接口；默認redirect屬性爲false，等同於wx.navigateTo接口。

1. 用戶點擊左上角返回按鈕，或調用wx.navigateBack接口返回上一頁。

wx.navigateBack({
    delta: 1
})

delta爲1時表示返回上一頁，爲2時表示上上一頁，以此類推；若是dalta大於已打開的頁面總數，則返回到首頁。返回後，元界面會銷燬。

》》》頁面跳轉傳值

其實這個很簡單,形如：

url?key=value&key1=value1

通過測試，傳遞的參數沒有被URIEncode,傳遞中文沒有亂碼。參數長度未測試。

3、如何正確使用頁面跳轉

官方規定小程序最多隻能有五個頁面同時存在，意思是在不關閉頁面的狀況，最多新開五個頁面，頁面深度爲5。

1. 對於可逆操做，使用wx.navigateTo,好比從首頁跳轉到二級頁面，從二級頁面返回是不須要從新渲染首頁
2. 對於不可逆操做，使用wx.redirectTo,好比用戶登陸成功後，關閉登陸頁面，不能返回到登陸界面。
3. 對於一些介紹性等不經常使用頁面wx.redirectTo或wx.navigatrBack
4. 對於相似九宮格、列表項，使用 跳轉
5. 不要在首頁使用wx.redirectTo，這樣會致使應用沒法返回首頁
6. 簡化需求、簡化流程；核心功能在兩三個頁面完成即是張小龍追求『小而美』的體現

4、頁面棧

頁面棧以棧（先進後出）的形式維護頁面與頁面之間的關係；
小程序提供了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

最後，值得慶祝的是在12月17日第二屆中國深商大會上馬化騰透露，小程序會在春節前全面推出。