小程序無限層級(jí)路由方案
小程序原生頁面存在層級(jí)限制,超過一定層數(shù)就會(huì)無法打開新頁面。一開始這個(gè)限制為不超過5層,目前是不超過10層。
這個(gè)限制對(duì)于體量較大的小程序來說,挺難受的。特別是只能打開5層那會(huì)兒,業(yè)務(wù)流程很容易一不小心就超了,比如:首頁-搜索結(jié)果頁-商品詳情頁-聊天頁-下單頁-地址選擇頁-...;更有訪問回路防不勝防,比如:商品詳情頁-查看更多頁-商品詳情頁-查看更多頁-...、商品詳情頁-聊天頁-個(gè)人主頁-商品詳情頁-聊天頁-個(gè)人主頁-商品詳情頁-...、諸如此類。即使后來放寬至了10層,還是很容易遭遇層級(jí)溢出。
一種處理思路是調(diào)整交互路徑,嚴(yán)格控制層級(jí)數(shù)量。但是這種處理方案,一則很多時(shí)候會(huì)犧牲用戶體驗(yàn),比如為避免個(gè)人主頁和商品詳情頁的訪問回路,要么不能在個(gè)人主頁中訪問用戶商品,要么不能在商品詳情頁中訪問賣家主頁,要么訪問時(shí)需要替換當(dāng)前不能返回繼續(xù)瀏覽,不管怎么取舍都會(huì)犧牲某些用戶的瀏覽訴求;二則維護(hù)成本特別高,業(yè)務(wù)邏輯越來越復(fù)雜,交互路徑越來越發(fā)散,路徑的統(tǒng)一梳理和規(guī)劃就會(huì)越來越困難,而且管理過程對(duì)業(yè)務(wù)不透明,業(yè)務(wù)方在設(shè)計(jì)需求時(shí)要受到交互路徑的種種限制,甚至一個(gè)需求的交互調(diào)整很可能無意中造成另一個(gè)需求層級(jí)溢出,維護(hù)成本高且不斷膨脹。
因而本文考慮并實(shí)現(xiàn)了另一種處理思路:在小程序中支持不限層級(jí)的路由過程。
策略- 修改小程序默認(rèn)導(dǎo)航行為,自行維護(hù)完整歷史記錄
- 頁面層級(jí)小于等于10時(shí),導(dǎo)航行為與原生導(dǎo)航行為一致
- 請(qǐng)求打開第11層及以上時(shí),邏輯層級(jí)記錄完整歷史,實(shí)際層級(jí)每次都是直接將第10層替換為目標(biāo)頁面
- 返回時(shí),邏輯層級(jí)相應(yīng)回退;若回退后邏輯層級(jí)大于等于10,則實(shí)際層級(jí)將第10層替換為目標(biāo)頁面,否則實(shí)際層級(jí)回退到相應(yīng)頁面
- demo:
邏輯層級(jí) 1 - 2 - ... - 8 - 9 - 10 實(shí)際層級(jí) 1 - 2 - ... - 8 - 9 - 10 打開 邏輯層級(jí) 1 - 2 - ... - 8 - 9 - 10 - 11 實(shí)際層級(jí) 1 - 2 - ... - 8 - 9 - 11 打開,打開,打開 邏輯層級(jí) 1 - 2 - ... - 8 - 9 - 10 - 11 - 12 - 13 - 14 實(shí)際層級(jí) 1 - 2 - ... - 8 - 9 - 14 返回 邏輯層級(jí) 1 - 2 - ... - 8 - 9 - 10 - 11 - 12 - 13 實(shí)際層級(jí) 1 - 2 - ... - 8 - 9 - 13 返回,返回,返回 邏輯層級(jí) 1 - 2 - ... - 8 - 9 - 10 實(shí)際層級(jí) 1 - 2 - ... - 8 - 9 - 10 返回 邏輯層級(jí) 1 - 2 - ... - 8 - 9 實(shí)際層級(jí) 1 - 2 - ... - 8 - 9實(shí)現(xiàn)
轉(zhuǎn)轉(zhuǎn) 實(shí)現(xiàn)了上述策略,并提供開源使用,地址:https://github.com/zhuanzhuanfe/fancy-mini,歡迎使用或參閱。
主要難點(diǎn)及實(shí)現(xiàn)方案:
-
如何接管路由過程
- 要求所有頁面不使用<navigator>元素,統(tǒng)一使用js觸發(fā)跳轉(zhuǎn)
- 要求所有頁面不直接調(diào)用wx.navigateTo、wx.redirectTo等路由相關(guān)接口,統(tǒng)一改用模塊封裝的相應(yīng)接口
-
如何監(jiān)聽返回行為
- 統(tǒng)一監(jiān)聽頁面的onUnload函數(shù),結(jié)合路由過程判斷是否用戶返回
-
如何兼容系統(tǒng)交互
- 問題:系統(tǒng)交互會(huì)跳出正常路由流程,并且難以接管或監(jiān)控,如:用戶點(diǎn)擊右上角返回主頁按鈕、用戶切后臺(tái)后又從其它入口進(jìn)入、用戶強(qiáng)制關(guān)閉小程序進(jìn)程等
- 處理:引入校正機(jī)制,在合適的時(shí)機(jī)根據(jù)系統(tǒng)路由棧對(duì)自行維護(hù)的路由棧進(jìn)行校正。這樣可以保證10層以內(nèi)路由正確性。系統(tǒng)交互多是回到第1層,會(huì)被成功校正。
-
如何避免/兼容代碼疏漏
- 問題:接管&監(jiān)聽過程要求所有頁面遵循一些編碼約束,如何保證這些約束切實(shí)全面生效;萬一有頁面未遵循約束,能否依然保證健壯性
- 處理1:編寫并配置相應(yīng)eslint規(guī)則,保證約束被切實(shí)遵循
- 處理2:上一條中的校正機(jī)制,保證即使有代碼疏漏,在10層內(nèi)也會(huì)被校正;10層外可能會(huì)影響返回邏輯正確性,但一般不會(huì)造成頁面功能問題。
-
如何進(jìn)行狀態(tài)恢復(fù)
- 問題:返回后邏輯層級(jí)大于等于10時(shí),實(shí)際是在第10層重新載入目標(biāo)頁面;用戶在前一頁面的表單輸入等狀態(tài)信息并不會(huì)像系統(tǒng)返回一樣正常保留
- 處理:在合適的時(shí)機(jī)存儲(chǔ)頁面的data,返回時(shí)予以恢復(fù)
-
接入成本
- 需要引入并配置路由模塊
- 需要檢查并修改項(xiàng)目中所有頁面跳轉(zhuǎn)過程,統(tǒng)一使用模塊封裝的接口
- 需要統(tǒng)一監(jiān)聽所有頁面的onUnload函數(shù)
-
維護(hù)成本
- 新增頁面跳轉(zhuǎn)過程,需統(tǒng)一使用模塊封裝的接口
- 新增頁面onUnload函數(shù)需接入統(tǒng)一監(jiān)聽
-
性能成本
- 模塊執(zhí)行邏輯相對(duì)簡(jiǎn)單,內(nèi)存開銷相對(duì)較小,頁面性能暫未發(fā)現(xiàn)明顯損耗
-
無限層級(jí)
- 避免復(fù)雜/循環(huán)訪問導(dǎo)致頁面無法打開
- 可以放心地向用戶提供適合的訪問入口,不必過分擔(dān)心路徑限制
-
完全的路由管控能力
- 可以完全監(jiān)控路由過程并實(shí)現(xiàn)或引入一些附加功能
-
附加功能:實(shí)例覆蓋自動(dòng)恢復(fù)
- 問題:wepy框架存在單實(shí)例問題,同一路徑頁面被打開兩次時(shí),其數(shù)據(jù)會(huì)相互影響,如:詳情頁A - 詳情頁B - 返回A,點(diǎn)擊查看大圖 - B的圖片(而不是A的圖片)
詳見issue:[兩級(jí)頁面為同一路由時(shí),后者數(shù)據(jù)覆蓋前者](https://github.com/Tencent/wepy/issues/322) - 策略:返回時(shí),若判斷目標(biāo)頁面數(shù)據(jù)已被覆蓋,則自動(dòng)予以恢復(fù) - 引入:參見模塊使用說明
-
附加功能: 免并發(fā)
- 問題:用戶連續(xù)快速點(diǎn)擊多個(gè)/多次按鈕時(shí),會(huì)一次性打開多個(gè)窗口,一則造成層級(jí)膨脹,二則影響瀏覽體驗(yàn) - 策略:第一次點(diǎn)擊造成的跳轉(zhuǎn)完成之前無視后續(xù)點(diǎn)擊產(chǎn)生的跳轉(zhuǎn)請(qǐng)求 - 引入:參見模塊使用說明
-
附加功能:數(shù)據(jù)預(yù)先加載
- 問題:小程序的page1跳轉(zhuǎn)到page2,到page2的onLoad是存在一個(gè)300ms ~ 400ms的延時(shí)的,在page2的onLoad中才開始獲取數(shù)據(jù)會(huì)浪費(fèi)這個(gè)延時(shí) - 策略:在 page1 中預(yù)先拿取數(shù)據(jù),然后在 page2 中直接使用數(shù)據(jù);wepy框架對(duì)此有良好的實(shí)現(xiàn),參見[WePY 在小程序性能調(diào)優(yōu)上做出的探究](https://segmentfault.com/a/1190000008975448?winzoom=1) - 引入:參見模塊使用說明
第二部分:如何開通一個(gè)小商店