微信小程序頁面路由原理

姚靜

摘要：小程序的開發方興未艾，本文以圖解的形式詳細剖析了小程序開發中的頁面棧及頁面路由原理，對于該原理的深入理解有助于開發者更好地理解小程序的開發框架，更好地開發出功能強大的小程序。

關鍵詞：小程序;Mini Program;頁面棧;路由

中圖分類號：TP3? ? ? 文獻標識碼：A

文章編號：1009-3044（2019）28-0054-02

微信小程序（以下簡稱小程序）也叫Mini Program，是騰訊公司在2017年推出的一種不需要下載安裝即可使用的輕應用，小程序基于用戶量超10億的微信平臺，以其無須下載和卸載、隨時可用、無處不在等簡潔特點，一經推出便引起轟動，短短一兩年時間便呈現出爆發增長的態勢，越來越多的用戶接受并使用小程序，越來越多的開發者加入小程序的開發之中。

小程序的開發基于Web技術，與傳統的Web開發（如網頁）有很多相似之處，因此有Web開發經驗的開發者可以很容易地掌握小程序開發技術。但小程序作為輕應用的本質，決定了其短小精干、功能受限等有別于傳統Web開發的特點，這些技術特點又導致了在跨進小程序開發的門檻時，傳統Web開發者的很多技術經驗往往成為理解障礙而非助力，這其中最為典型的一個核心概念便是小程序的頁面路由。

眾所周知，傳統Web開發基于HTML+CSS編寫的Web頁面，典型呈現就是我們熟知的瀏覽器，在瀏覽器中我們點擊頁面上的超鏈接可以跳轉到另一個頁面，也可以點擊回退回到上一個頁面，循環往復，無窮無盡，換句話講，可以有無限個頁面;而在小程序中，由于其Mini的特點，小程序多能占用的資源是嚴格受限的，每個小程序包括圖片、樣式、頁面、代碼等最大不能超過2MB（如果加上擴展包最大為4MB），這決定了小程序的頁面個數不是不限的，而是嚴格受限的，且頁面之間的跳轉也與傳統Web頁面有很大差異，這樣一套機制在小程序中稱為頁面棧。

1 頁面棧

軟件開發者均知道，棧是一種先進后出的數據結構，在小程序體系中，頁面棧便是一種采用棧結構維護頁面與頁面之間關系的框架，該棧的容量最大為5，這意味著在小程序中，可以同時存在的頁面最多為5個。

小程序中頁面之間的跳轉被稱為路由，頁面路由有嚴格的規定和限制，所有頁面的路由均由頁面棧框架進行管理，當發生路由切換的時候，頁面棧的表現如下：

上表中的打開新頁面、頁面重定向、頁面返回、Tab切換、重啟動，在小程序中分別對應wx.navigateTo、wx.redirectTo、wx.navigateBack、wx.switchTab、wx.reLaunch等API，這些API是在小程序開發中最常用的功能，它們背后的邏輯以及事件觸發均與頁面棧緊密相關，只有對這些細節了如指掌，才能真正駕馭小程序的開發，下面便詳細剖析上述幾種頁面流轉與頁面棧變化的關系，為簡潔起見略去頁面流轉過程中的事件觸發，讀者可在熟悉頁面棧之后閱讀官方文檔進一步了解。

2 頁面路由原理

假設我們有一個小程序，其首頁頁面為A，另外還有B、C、D、E、F、G等六個頁面。

打開小程序：用戶打開一個小程序時，小程序的首頁頁面入棧，頁面棧大小變為1;

1）wx.navigateTo：該API通常在響應用戶點擊界面時打開一個新頁面，該新頁面入棧，頁面棧大小加1;當反復調用該API后頁面棧大小不斷增大，當頁面棧大小為5時，調用該API將無效，此時的呈現效果即為用戶點擊界面卻無法正常打開對應的新頁面，這是很多剛開始小程序開發的開發者經常遇到的一個問題，只有詳細了解了頁面棧及頁面路由的原理才可以解決這個問題;以下為wx.navigateTo的兩種常見用例：

用例1：在首頁A打開頁面B，在頁面B打開頁面C，在頁面C打開頁面D，在頁面D打開頁面E，在頁面E打開頁面F：

該用例與用例1不同之處在于，在頁面D重復打開了頁面B，此時雖然頁面B在頁面棧中，但仍會打開一個新頁面B并入棧，頁面棧大小依然加一，此時頁面棧中有2個頁面B，這2個頁面B是彼此獨立的（也即可以擁有不同的數據及呈現），這是很重要的一點，也是很多開發者容易困惑之處。

2）wx.redirectTo：該API通常在響應用戶點擊界面時重定向到一個新頁面，原頁面出棧，該新頁面入棧，頁面棧大小不變，以上面的用例1為例，在頁面E重定向到頁面F：

3）wx.navigateBack：該API與傳統Web瀏覽器中的頁面回退很相似，其 delta參數決定當前頁面棧彈出幾個頁面（即頁面棧大小減小幾），彈出之后的棧頂頁面作為當前呈現頁面，以下為圖例：

相對于上述三個API，wx.switchTab和wx.reLaunch的邏輯則相對簡單，限于篇幅不再贅述。

3 結語

微信小程序依托于擁有龐大用戶群的微信平臺，以其簡潔的特點和強大的功能，正在成為移動互聯網的下一個風口浪尖，而透徹理解小程序頁面路由原理，對于小程序開發者是必不可少的一課，本文通過圖解用例，詳細剖析了小程的頁面棧及路由細節，讀者在掌握該原理細節的基礎之上，可以大大提高開發效率，為小程序的生態發展添磚加瓦。

參考文獻：

[1] 微信官方文檔[EB/OL]. https：//developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html

[2] 熊普江，謝宇華.小程序，巧應用[M].北京：機械工業出版社，2017.

[3] 雷磊.微信小程序開發入門與實踐[M].北京：清華大學出版社，2017.

【通聯編輯：張薇】