我們都知道對於小程序來說是由框架以棧的形式維護所有的頁面,當路由切換時,頁面棧的表現為:
路由方式 | 頁面棧表現 |
初始化頁面A(打開新頁面A) | A頁面入棧 |
頁面重定向 | 當前頁面出棧,新頁面入棧 |
頁面返回 | 頁面不斷出棧,直到目標返回頁 |
Tab切換 | 頁面全部處棧,只留下新的Tab頁面 |
重加載 | 頁面全部出棧,只留下新的頁面 |
getCurrentPages()函數是用來獲取當前頁面棧的實例,返回的是一個按棧的順序排列的數組pages_arr,且數組中的第一項為首頁,最后一項為當前頁。
昨天商城小程序測試遇到了一個問題,具體是:(需求時成功付款1s后跳轉至訂單列表)
場景1:從首頁(home)點擊某商品進入詳情(detail),選擇立即購買進入創建訂單頁面(orders),然后支付完成后跳轉至訂單列表頁面(orders-list),不進行異常操作,訂單列表正常顯示返回按鈕。
場景2:從首頁(home)點擊某商品進入詳情(detail),選擇立即購買進入創建訂單頁面(orders),然后支付完成后跳轉至訂單列表頁面(orders-list),此時在跳轉列表的過程中,也就是還未跳轉過去,測試人員連續點擊了兩次訂單列表左上角的返回按鈕回到了首頁(Home),同時定時器1s到又重新定向為(orders-list),此時訂單列表頁面則無返回按鈕,整個小程序處於一個頁面狀態,和其他頁面沒有任何聯系。
那我們先分析場景1入棧情況為home頁面入棧pages_arr:[home],打開詳情頁detail,pages_arr:[home,detail],接着打開創建訂單頁面該頁面入棧pages_arr:[home,detail,orders],最后1s后重定向為orders-list頁面,此時上個頁面出棧pages_arr:[home,detail],該頁面入棧pages_arr:[home,detail,ordersorders-list],所以得到的結果是,orders-list頁面左上角有返回鍵同時點擊返回上一級detail頁面。
對於場景2入棧情況為home頁面入棧pages_arr:[home],打開詳情頁detail,pages_arr:[home,detail],接着打開創建訂單頁面該頁面入棧pages_arr:[home,detail,orders],最后1s后重定向為orders-list頁面,但是在這1s之間,用戶連續點擊兩次返回按鈕,第一次是在創建訂單頁面orders點擊,此時orders頁面出棧,目標頁面為detail頁面,用戶再次點擊返回鍵,detail頁面出棧,目標頁面為home頁,而此時1s時間到后執行重定向為orders-list頁面,此時上個頁面home出棧pages_arr:[],該頁面入棧pages_arr:[ordersorders-list],所以得到的結果是,orders-list頁面左上角沒有返回鍵,手機原生返回鍵也是不可以返回,原理相同。
對於場景2 我想到的既滿足需求又能解決當前頁面孤立無援的辦法是,判斷當前返回的棧數組pages_arr,如果pages_arr數組的長度為1則新增一個按鈕,手動指引其跳轉至首頁。