我们都知道对于小程序来说是由框架以栈的形式维护所有的页面,当路由切换时,页面栈的表现为:
路由方式 | 页面栈表现 |
初始化页面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则新增一个按钮,手动指引其跳转至首页。