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

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

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()
  }
}

4.导出
最后将 navigateTo和navigateBack函数通过 module.exports 导出即可。
至此，实现了这两个工具函数。在使用这两个工具函数时，只需要将之前调用wx.navigateTo和wx.navigateBack 的地方改为调用这两个函数，便可实现页面无限跳转的效果。

4.存在的问题

1.wx.redirectTo还没有封装，如果小程序需要这种方式会打破原有页面栈的数据
2.页面超过十层的返回中，里面的页面之前的数据会被清除

以上的问题还需要后期在进行研究，研究结果会同步更新到此篇文档