什么是路由？

我們通常理解的路由指分組數(shù)據(jù)包從源到目的地時(shí)，決定端到端路徑的網(wǎng)絡(luò)范圍的進(jìn)程；

借用上面的定義，我們可以理解小程序頁(yè)面路由，根據(jù)路由規(guī)則（路徑）從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面的的規(guī)則。

通過(guò)本篇文章，你可以學(xué)習(xí)到：

1. 哪些情況會(huì)觸發(fā)頁(yè)面跳轉(zhuǎn)

2. 如何跳轉(zhuǎn)頁(yè)面

3. 頁(yè)面?zhèn)鲄?/p>

4. 頁(yè)面棧

一、哪些情況會(huì)觸發(fā)頁(yè)面跳轉(zhuǎn)

1. 小程序啟動(dòng)，初始化第一個(gè)頁(yè)面

2. 打開(kāi)新頁(yè)面，調(diào)用 API wx.navigateTo 或使用<navigator />組件

3. 頁(yè)面重定向，調(diào)用 API wx.redirectTo 或使用<navigator />組件

4. 頁(yè)面返回，調(diào)用 API wx.navigateBack或用戶按左上角返回按鈕

5. tarbar切換

所有頁(yè)面都必須在app.json中注冊(cè),例如：

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

二、如何跳轉(zhuǎn)頁(yè)面

1. 使用wx.navigateTo接口跳轉(zhuǎn),原頁(yè)面保留。

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

2. 使用wx.redirectTo接口跳轉(zhuǎn)，關(guān)閉原頁(yè)面,不能返回。

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

   3.使用組件

   <navigator url="pages/logs/index" hover-class="navigator-hover">跳轉(zhuǎn)</navigator>

   當(dāng)該組件添加redirect屬性時(shí)，等同于wx.redirectTo接口；默認(rèn)redirect屬性為false，等同于wx.navigateTo接口。

3. 用戶點(diǎn)擊左上角返回按鈕，或調(diào)用wx.navigateBack接口返回上一頁(yè)。

   wx.navigateBack({
   delta: 1
   })

   delta為1時(shí)表示返回上一頁(yè)，為2時(shí)表示上上一頁(yè)，以此類推；如果dalta大于已打開(kāi)的頁(yè)面總數(shù)，則返回到首頁(yè)。返回后，元界面會(huì)銷毀。

》》》頁(yè)面跳轉(zhuǎn)傳值

其實(shí)這個(gè)很簡(jiǎn)單,形如：

url?key=value&key1=value1

經(jīng)過(guò)測(cè)試，傳遞的參數(shù)沒(méi)有被URIEncode,傳遞中文沒(méi)有亂碼。參數(shù)長(zhǎng)度未測(cè)試。

三、如何正確使用頁(yè)面跳轉(zhuǎn)

官方規(guī)定小程序最多只能有五個(gè)頁(yè)面同時(shí)存在，意思是在不關(guān)閉頁(yè)面的情況，最多新開(kāi)五個(gè)頁(yè)面，頁(yè)面深度為5。

1. 對(duì)于可逆操作，使用wx.navigateTo,比如從首頁(yè)跳轉(zhuǎn)到二級(jí)頁(yè)面，從二級(jí)頁(yè)面返回是不需要重新渲染首頁(yè)

2. 對(duì)于不可逆操作，使用wx.redirectTo,比如用戶登錄成功后，關(guān)閉登錄頁(yè)面，不能返回到登錄界面。

3. 對(duì)于一些介紹性等不常用頁(yè)面wx.redirectTo或wx.navigatrBack

4. 對(duì)于類似九宮格、列表項(xiàng)，使用

5. 不要在首頁(yè)使用wx.redirectTo，這樣會(huì)導(dǎo)致應(yīng)用無(wú)法返回首頁(yè)

6. 簡(jiǎn)化需求、簡(jiǎn)化流程；核心功能在兩三個(gè)頁(yè)面完成便是張小龍追求『小而美』的體現(xiàn)

四、頁(yè)面棧

頁(yè)面棧以棧（先進(jìn)后出）的形式維護(hù)頁(yè)面與頁(yè)面之間的關(guān)系；
小程序提供了getCurrentPages()函數(shù)獲取頁(yè)面棧，第一個(gè)元素為首頁(yè)，最后一個(gè)元素為當(dāng)前頁(yè)面。

1. 使用wx.navigateTo每新開(kāi)一個(gè)頁(yè)面，頁(yè)面棧大小加1,直到頁(yè)面棧大小為5為止；
   

2. 使用wx.navigateTo重復(fù)打開(kāi)界面
   

上圖中，假如使用wx.navigateTo從四級(jí)頁(yè)面跳轉(zhuǎn)到二級(jí)頁(yè)面，此時(shí)會(huì)在頁(yè)面棧頂添加一個(gè)與二級(jí)頁(yè)面初始狀態(tài)一樣的界面，但兩個(gè)頁(yè)面狀態(tài)是獨(dú)立的。頁(yè)面棧大小會(huì)加1，如果頁(yè)面棧大小為5，則wx.navigateTo無(wú)效

1. 使用wx.redirectTo重定向
   

上圖中，假如使用wx.redirectTo從四級(jí)頁(yè)面重定向到二級(jí)頁(yè)面，此時(shí)會(huì)將關(guān)閉四級(jí)頁(yè)面，并使用二級(jí)頁(yè)面替換四級(jí)頁(yè)面，但兩個(gè)頁(yè)面狀態(tài)是獨(dú)立的。此時(shí)的頁(yè)面棧大小不變，請(qǐng)注意和使用wx.navigateTo的區(qū)別。

1. 使用wx.navigateBack返回
   

上圖中，假如當(dāng)前頁(yè)面為五級(jí)頁(yè)面，使用wx.navigateBack：

• 當(dāng)delta為1，關(guān)閉五級(jí)頁(yè)面，當(dāng)前頁(yè)面為四級(jí)頁(yè)面，頁(yè)面棧大小減1；

• 當(dāng)delta為2，關(guān)閉依次五級(jí)頁(yè)面和四級(jí)頁(yè)面，當(dāng)前頁(yè)面為三級(jí)頁(yè)面，頁(yè)面棧大小減2；

• 以此類推，直到棧底為止，也就是首頁(yè)。

以上使用wx.navigateTo、wx.redirectTo、wx.navigateBack頁(yè)面出入棧操作對(duì)頁(yè)面棧的影響，平時(shí)不一定用得上，但是還是有必要了解背后的原理。

通過(guò)學(xué)習(xí)頁(yè)面棧，你至少可以知道：

• 小程序運(yùn)行時(shí)你可以獲取到已經(jīng)初始化了的頁(yè)面的屬性和方法

• 動(dòng)態(tài)獲取當(dāng)前頁(yè)面路徑

• 頁(yè)面自動(dòng)跳轉(zhuǎn)

• 你可以通過(guò)getCurrentPages()獲取頁(yè)面page對(duì)象，執(zhí)行非當(dāng)前頁(yè)js里的方法

總結(jié)

• wx.navigateTo會(huì)增加頁(yè)面棧大小，直到頁(yè)面棧大小為5

• wx.redirectTo不會(huì)增加頁(yè)面棧大小

• wx.navigateBack會(huì)減少頁(yè)面棧大小，直到頁(yè)面棧大小為1

【相關(guān)推薦】

1. 微信公眾號(hào)平臺(tái)源碼下載

2.?微信投票源碼

3.?微信啦啦外賣2.2.4解密開(kāi)源版 微信魔方源碼

以上是微信開(kāi)發(fā)入門（八）頁(yè)面路由的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！