小程序页面栈问题与使用注意

4个月前 464次浏览

要了解小程序页面栈,首先要了解一下小程序的路由方式(微信小程序和百度小程序是一样的,只是微信是wx.百度小程序是swan.)。

switchTab:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,使用该路由后页面栈会留存当前页面;

reLaunch:关闭所有页面,打开到应用内的某个页面,使用该路由后页面栈只会留存当前页面;

redirectTo:关闭当前页面,跳转到应用内的某个页面;使用该路由后页面栈总数保持不变,只是修改最后一个页面栈为当前页面;

navigateTo:保留当前页面,跳转到应用内的某个页面,使用该路由后会新增加一个页面栈,但是不能跳转到 tabbar 页面,使用navigateBack 可以返回到原页面。

navigateBack:关闭当前页面,返回上一页面或多级页面,会根据返回级别删除后面的页面栈。

需要注意的是:switchTab只能跳转tabBar页面,而tabBar只会在已经配置页面显示。所以我一般都不用tabBar。如果小程序只有tabBar配置中的几个页面还好说,但是页面一多,那不在tabBar配置中的页面还得重新制作自定义的导航。那还不如所有的页面都做一个统一的导航条供调用。

具体什么时侯使用什么方式的路由?根据页面的需要来使用。如:从列表页进入详情页可以使用navigateTo进入,而详情页中跳转上一篇或下一篇可以使用redirectTo来跳转。这样当我们再使用navigateBack可以轻易返回到列表页。

因为小程序的规则,最大只允许10个页面栈(这也是为了防止打开页面过多页面而使得手机变得非常卡),当我们页面栈达到10个后,我们再使用navigateTo,将是无效的,即点了没反应。

我们可以通过getCurrentPages()来查看页面栈信息:

image.png

上图为我在控制台中使用getCurrentPages()查看到的页面栈信息,可以看出,当前我的小程序中打开了3个页面,当前页面为编号最大的一个,如果我们想退回到编号为0的页面,使用:

swan.navigateBack({
  delta: 2//这个数字计算为length-编号-1
});

退回数字计算是:length-页面栈编号-1。

了解了这些页面栈的规则,我在共公js里面写一个函数(高手勿喷),当页面栈过多使用reLaunch一次,页当需要打开的页面存在于页面栈里面,则使用navigateBack返回:

//页面导航
//navigateTo这里做个计算,如果页面栈大于等于9个就用reLaunch一次
function navigateTo(e){
    var CurrentPages = getCurrentPages()
    var pagenum = CurrentPages.length
    var endnum = pagenum - 1
    var isurl = false
    if(pagenum>=8){//如果页面栈大于8了用一次reLaunch,也可以设小一点
        swan.reLaunch({
        url:e
        })
        return false
    }
    //计算当前页面是否为点击页面是就不操作
    if ("/" + CurrentPages[endnum].uri == e){
        return false
    }
    //检查点击页面是否在页面栈中,并找到是哪一个
    for (var i = 0; i < pagenum; i++) {
        if ("/" + CurrentPages[i].uri == e) {
        var isurl = true
        var rebacknum = pagenum - i - 1//计算返回值
        }
    }
    if (isurl) {//如果要跳转的页面存在页面栈中间就使用navigateBack返回,不是就直接navigateTo跳转
        swan.navigateBack({
            delta: rebacknum
        })
    } else {
        swan.navigateTo({
            url: e
        })
    }
}//页面导航

需要注意的是使用navigateTo是不会执行onLoad里面的内容,所以如果返回时要刷新数据,可以将相关代码写在onShow里面。

相关评论
百题资料4个月前 #1
最后的示例代码中,百度小程序与微信小程序有所区别,主要体现在CurrentPages中的参数,微信与百度不一样,具体参数自行在控制台中使用getCurrentPages()查看。
发表评论
评论说明:

1、评论暂仅只持纯文字评论。

2、请不要发表与内容无关的评论。

3、评论需要经由审核才能显示出来。

4、评论姓名与链接无要求,只要评论内容符合便可审核通过。

百题资料微信二维码
微信公众号
百题资料APP二维码
题库小程序