今天记录一下微信小程序关于页面栈不够用的解决方法,这个方法我是从小程序开发书中习得
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.页面超过十层的返回中,里面的页面之前的数据会被清除
以上的问题还需要后期在进行研究,研究结果会同步更新到此篇文档