微信小程序頁(yè)面路由原理

姚靜

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

關(guān)鍵詞：小程序;Mini Program;頁(yè)面棧;路由

中圖分類號(hào)：TP3? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2019）28-0054-02

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

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

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

1 頁(yè)面棧

軟件開發(fā)者均知道，棧是一種先進(jìn)后出的數(shù)據(jù)結(jié)構(gòu)，在小程序體系中，頁(yè)面棧便是一種采用棧結(jié)構(gòu)維護(hù)頁(yè)面與頁(yè)面之間關(guān)系的框架，該棧的容量最大為5，這意味著在小程序中，可以同時(shí)存在的頁(yè)面最多為5個(gè)。

小程序中頁(yè)面之間的跳轉(zhuǎn)被稱為路由，頁(yè)面路由有嚴(yán)格的規(guī)定和限制，所有頁(yè)面的路由均由頁(yè)面?？蚣苓M(jìn)行管理，當(dāng)發(fā)生路由切換的時(shí)候，頁(yè)面棧的表現(xiàn)如下：

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

2 頁(yè)面路由原理

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

打開小程序：用戶打開一個(gè)小程序時(shí)，小程序的首頁(yè)頁(yè)面入棧，頁(yè)面棧大小變?yōu)?;

1）wx.navigateTo：該API通常在響應(yīng)用戶點(diǎn)擊界面時(shí)打開一個(gè)新頁(yè)面，該新頁(yè)面入棧，頁(yè)面棧大小加1;當(dāng)反復(fù)調(diào)用該API后頁(yè)面棧大小不斷增大，當(dāng)頁(yè)面棧大小為5時(shí)，調(diào)用該API將無效，此時(shí)的呈現(xiàn)效果即為用戶點(diǎn)擊界面卻無法正常打開對(duì)應(yīng)的新頁(yè)面，這是很多剛開始小程序開發(fā)的開發(fā)者經(jīng)常遇到的一個(gè)問題，只有詳細(xì)了解了頁(yè)面棧及頁(yè)面路由的原理才可以解決這個(gè)問題;以下為wx.navigateTo的兩種常見用例：

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

該用例與用例1不同之處在于，在頁(yè)面D重復(fù)打開了頁(yè)面B，此時(shí)雖然頁(yè)面B在頁(yè)面棧中，但仍會(huì)打開一個(gè)新頁(yè)面B并入棧，頁(yè)面棧大小依然加一，此時(shí)頁(yè)面棧中有2個(gè)頁(yè)面B，這2個(gè)頁(yè)面B是彼此獨(dú)立的（也即可以擁有不同的數(shù)據(jù)及呈現(xiàn)），這是很重要的一點(diǎn)，也是很多開發(fā)者容易困惑之處。

2）wx.redirectTo：該API通常在響應(yīng)用戶點(diǎn)擊界面時(shí)重定向到一個(gè)新頁(yè)面，原頁(yè)面出棧，該新頁(yè)面入棧，頁(yè)面棧大小不變，以上面的用例1為例，在頁(yè)面E重定向到頁(yè)面F：

3）wx.navigateBack：該API與傳統(tǒng)Web瀏覽器中的頁(yè)面回退很相似，其 delta參數(shù)決定當(dāng)前頁(yè)面棧彈出幾個(gè)頁(yè)面（即頁(yè)面棧大小減小幾），彈出之后的棧頂頁(yè)面作為當(dāng)前呈現(xiàn)頁(yè)面，以下為圖例：

相對(duì)于上述三個(gè)API，wx.switchTab和wx.reLaunch的邏輯則相對(duì)簡(jiǎn)單，限于篇幅不再贅述。

3 結(jié)語(yǔ)

微信小程序依托于擁有龐大用戶群的微信平臺(tái)，以其簡(jiǎn)潔的特點(diǎn)和強(qiáng)大的功能，正在成為移動(dòng)互聯(lián)網(wǎng)的下一個(gè)風(fēng)口浪尖，而透徹理解小程序頁(yè)面路由原理，對(duì)于小程序開發(fā)者是必不可少的一課，本文通過圖解用例，詳細(xì)剖析了小程的頁(yè)面棧及路由細(xì)節(jié)，讀者在掌握該原理細(xì)節(jié)的基礎(chǔ)之上，可以大大提高開發(fā)效率，為小程序的生態(tài)發(fā)展添磚加瓦。

參考文獻(xiàn)：

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

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

[3] 雷磊.微信小程序開發(fā)入門與實(shí)踐[M].北京：清華大學(xué)出版社，2017.

【通聯(lián)編輯：張薇】