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