使用场景:
小程序项目中,测试提了个bug,说进入某个页面之后,直接点右上角的退出,再进入小程序时,打开的是之前退出时的页面,有时左上角就没有后退按钮了,无法返回上一页。
这里就涉及到页面栈的问题了。
页面栈:
首先先来了解一下微信小程序的运行环境:
小程序的运行环境分成渲染层和逻辑层,其中 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。
小程序的渲染层和逻辑层分别由2个线程管理:渲染层的界面使用了WebView 进行渲染;逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面,所以渲染层存在多个WebView线程,这两个线程的通信会经由微信客户端做中转,逻辑层发送网络请求也经由Native转发,小程序的通信模型下图所示。
我们可以看到,一个页面使用一个 WebView 线程进行渲染。如果打开10个页面,则会开启 10 个 WebView 线程,此时内存中的十个webView线程我们称之为页面栈。当然小程序也会对这块内存做限制,目前页面栈的限制是不能超过十条。在小程序中页面的路由是小程序框架本身控制的我们不要去手动管理, 小程序框架通过一个页面栈的设计来管理所有的界面,当发生路由跳转时,页面栈就会做出相应的变化,在小程序页面中通过 getCurrentPages() 就可以获取到当前的页面栈。
举个栗子:
在父页面中先获取页面栈:
const page = getCurrentPages(); // 父页面
console.log('父页面', page); //父页面
通过wx.navigateTo跳转子页面,在子页面中再获取页面栈:
const page = getCurrentPages(); // 子页面
console.log('子页面', page); //子页面
输出:
通过上面的例子可以看到,我们可以在页面中通过 getCurrentPages() 方法来获取当前页面栈,并且获取到的是一个数组,其中每个item都是每个页面的Page对象(也就是在页面中的this对象)。
这里引用了另一篇文章,想对页面栈有更多了解的可以参考一下微信小程序页面栈详解
再回到我的问题,在小程序中,点击右上角的退出按钮,小程序进入后台,再进入小程序时打开上次退出时所在的页面,没有显示后退按钮,说明现在页面栈处在最底层,也就是 getCurrentPages()
得到的数组中只有一个元素。
对此我做的处理是在小程序进入后台时获取当前页面进行判断,使再次进入是直接打开的是首页。
代码实现:
在app.js onHide()生命周期中监听进入后台的事件,之后通过getCurrentPages()方法获取当前页面,判断跳转
onHide:function(){
let pages = getCurrentPages();
if(pages['0'].route == 'pages/orders/orders'){
wx.redirectTo({
url:'pages/index/index'
})
}
}
参考链接:http://www.imooc.com/article/290548