微信小程序页面数量限制问题

最新推荐文章于 2024-06-18 23:15:16 发布

残缺的冷酷

最新推荐文章于 2024-06-18 23:15:16 发布

阅读量4k

点赞数 3

文章标签：微信小程序小程序前端

本文链接：https://blog.csdn.net/qq_33525941/article/details/128018572

版权

今天记录一下微信小程序关于页面栈不够用的解决方法，这个方法我是从小程序开发书中习得

1.问题

首先微信小程序中页面栈最多十层，也就意味着如果使用wx.navigateTo（保留当前页面，跳转到应用内的某个页面）方法，最多也就开启十层页面，如果在继续往后开会提示报错

其次是微信小程序官方文档建议我们不要尝试修改页面栈，会导致路由以及页面状态错误。

2.分析

首先微信小程序的跳转方法有
1.wx.navigateTo(Object object) 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
2.wx.navigateBack(Object object) 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
3.wx.redirectTo(Object object) 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
因为我们无法修改页面栈，所以这边的解决思路是自定义一个页面栈数组来记录，再通过封装上述微信小程序的跳转方法，实现十层以上的页面跳转

3.解决方法

1.自定义页面栈
在app.js中创建pageList数组，保存页面的url属性。

// app.js
App({
  onLaunch() {
  },
  globalData: {
    pageList: ['/pages/index/index']
  }
})

2.封装wx.navigateTo
首先是 navigateTo的跳转逻辑，根据当前小程序的Page是否超过最大数目限制。调用不同的API跳转到新的页面。
在这里插入图片描述
下面是代码实现

const MAX_PAGE_SIZE = 10

function navigateTo(pageUrl) {
  // 如page列表已到达上限, 将页面push到app.pageList中, 当前页面redirectTo到新页面
  const pageSize = getCurrentPages().length
  console.log(pageSize)
  if (pageSize < MAX_PAGE_SIZE) {
    wx.navigateTo({url: pageUrl})
  } else {
    wx.redirectTo({url: pageUrl})
  }
  getApp().globalData.pageList.push(pageUrl)
  console.log(getApp().globalData.pageList)
}

3.封装wx.navigateBack
接下来实现 wx.navigateBack，同样先使用流程图厘清思路。当 getCurrentPage().lengtl小于自定义的 Page 栈长度时，说明小程序默认的页面数目已不够使用，因此需要跳转的上一页数据需要从自定义的 Page 中获取。
在这里插入图片描述
下面是代码实现

function navigateBack() {
  // 如果page stack中页面数小于app.pageList中数目 => 将app.pageList中页面pop出去, 当前页面redirect到pop出来的url
  console.log(getCurrentPages().length)
  console.log(getApp().globalData.pageList.length)
  if (getCurrentPages().length < getApp().globalData.pageList.length) {
    const pageList = getApp().globalData.pageList
    pageList.pop()
    const url = pageList[pageList.length - 1]
    wx.redirectTo({url: url})
  } else {
    // 如果两个数目一致, app.pageList pop, 当前页面navigateBack
    getApp().globalData.pageList.pop();
    wx.navigateBack()
  }
}