最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】小程序中页面跳转层次深度太多无法继续跳转

程序 crifan 83浏览 0评论
折腾:
【记录】小程序发布前的准备工作
期间,在测试小程序期间发现个问题:
当前首页虽然就2个页面:
一个主页=查询页
一个详情页
但是如果页面点击跳转太多后,比如从首页:
点击某个绘本进入详情页:
再点击tag,可以进入首页根据tag搜索:
之后继续一直点击,直到:
now will redirect to indexUrl=../index/index?tag=Aliens%20and%20UFOs&difficulty=0
book_list.js? [sm]:120 bookItemClickCallback: e=Object
book_list.js? [sm]:133 now will redirect to detailUrl=../detail/detail?book_id=5bd7bd4cbfaa44fe2c737acf
book_list.js? [sm]:120 bookItemClickCallback: e=Object
book_list.js? [sm]:133 now will redirect to detailUrl=../detail/detail?book_id=5bd7bd4cbfaa44fe2c737acf
tags.js? [sm]:97 tagClickCallback: e=Object
tags.js? [sm]:113 now will redirect to indexUrl=../index/index?tag=Aliens%20and%20UFOs&difficulty=0
book_list.js? [sm]:120 bookItemClickCallback: e=Object
book_list.js? [sm]:133 now will redirect to detailUrl=../detail/detail?book_id=5bd7bd4cbfaa44fe2c737acf
经过多次尝试感觉是:
页面跳转超过9次,就不能继续跳转了
而内部的原因:
十有八九是因为:
小程序对于使用:
navigateTo
跳转的,内部是保留历史的
-》所以返回(点击导航栏左上角 或 按手机的返回键)可以返回上一页,且保留之前状态
-》即内部跳转历史是保留之前页面的数据的
-》所以不允许,没办法保留太多的历史页面
-》所以有历史页面最大个数限制,此处看来是9个
-》所以此处要去想办法实现:
当达到最大的跳转的历史页面时,就自动清除之前跳转历史
或者用清除其前一个页面?
路由 · 小程序
wx.navigateBack
wx.navigateTo
wx.redirectTo
wx.reLaunch
wx.switchTab
wx.navigateBack(Object object)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。
小程序 路由
wx.redirectTo · 小程序
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.navigateTo · 小程序
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。
小程序 页面跳转 最大深度
小程序跳转的问题 – SegmentFault 思否
此处貌似可以考虑:
  • 对于查询触发的话,就抛弃历史页面,改用wx.redirectTo就好了
  • 而对于普通的点击详情页的话,则再去用之前的wx.navigateTo
    • 但是也还是会存在,如果超过最大跳转深度,比如9次,则最后一次:
      • 需要能判断出来不能再 保留历史去跳转了
        • 要么删除历史,重新跳转
        • 要么清除掉最早个那个页面
另外看到:
wx.redirectTo
和:
wx.navigateTo
都有success、fail、complete等回调函数
-》可以用来判断是否跳转成功
试了试:
      //redirect to detail page
      wx.navigateTo({
        url: detailUrl,
        complete: function(done){
          console.log("navigateTo %s complete %o", detailUrl, done)
        },
        fail: function(err){
          console.log("navigateTo %s fail %o", detailUrl, err)
        },
        success: function(ok){
          console.log("navigateTo %s success %o", detailUrl, ok)
        },
      })
是可以输出
success和complete的log的:
navigateTo ../detail/detail?book_id=5bd7bf97bfaa44fe2c7415d9 success ObjecterrMsg: "navigateTo:ok"__proto__: Object
book_list.js? [sm]:139 navigateTo ../detail/detail?book_id=5bd7bf97bfaa44fe2c7415d9 complete ObjecterrMsg: "navigateTo:ok"__proto__: Object
继续调试看看
路由 · 小程序
打开新页面 新页面入栈
页面重定向 当前页面出栈,新页面入栈
重加载 页面全部出栈,只留下新的页面
getCurrentPages()
“* 不要尝试修改页面栈,会导致路由以及页面状态错误。”
->看来想要删除之前页面的做法是不可行了
那去实现为:
当wx.navigateTo跳转新页面失败时,换用wx.redirectTo
倒是可以通过:
      wx.navigateTo({
        url: detailUrl,
        complete: function(done){
          console.log("navigateTo %s complete %o", detailUrl, done)
        },
        fail: function(err){
          console.log("navigateTo %s fail %o", detailUrl, err)

          console.log("change to redirectTo %s", detailUrl)
          wx.redirectTo({
            url: detailUrl
          })
        },
        success: function(ok){
          console.log("navigateTo %s success %o", detailUrl, ok)
        },
      })
去实现:
当wx.navigateTo失败时,的确改用了wx.redirectTo,的确是成功跳转新页面了:
但是显示效果上:有个页面停顿了一下才跳转,很不友好
所以去尝试改为:
用wx.navigateTo之前,用getCurrentPages()看看是否达到最大深度?
不过那有个小限制:只能临时判断是10次,万一小程序内部限制变了,那就还要改
那也还是先去试试再说
【总结】
目前通过:
app.js
//app.js
App({
...
  globalData: {
...
    PageNavigateLimit: 10,
  }
})
utils/book_common.js
  console.log("redirectToPage: redirectToUrl=%s", redirectToUrl)
  wx.redirectTo({
    url: redirectToUrl,
  })
}

const navigateToPage = naviToUrl => {
  console.log("navigateToPage: naviToUrl=%s", naviToUrl)
  var curPageList = getCurrentPages()
  console.log("curPageList=%o", curPageList)
  var curPageListLen = curPageList.length
  console.log("curPageListLen=%s", curPageListLen)

  if (curPageListLen >= app.globalData.PageNavigateLimit) {
    console.log("has reach max navigate limit, so use redirectTo %s", naviToUrl)
    redirectToPage(naviToUrl)
  } else {
    wx.navigateTo({
      url: naviToUrl,
      // complete: function(result){
      //   console.log("navigateTo %s complete %result", naviToUrl, result)
      // },
      fail: function(result){
        console.log("navigateTo %s fail %o", naviToUrl, result)
  
        console.log("change to redirectTo %s", naviToUrl)
        redirectToPage(naviToUrl)
      },
      success: function(result){
        console.log("navigateTo %s success %o", naviToUrl, result)
      },
    })
  }

}

module.exports = {
  processEmptyDefault: processEmptyDefault,
  listToStr: listToStr,
  tagClickCallback: tagClickCallback,
  redirectToPage: redirectToPage,
  navigateToPage: navigateToPage,
}
实现了:
当超过的navigateTo的最大10次的跳转限制时,就主动改用wx.redirectTo,即可正常跳转新页面了:

转载请注明:在路上 » 【已解决】小程序中页面跳转层次深度太多无法继续跳转

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
16 queries in 0.096 seconds, using 9.39MB memory