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

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 = 10function navigateTo(pageUrl) {// 如page列表已到达上限, 将页面push到app.pageList中, 当前页面redirectTo到新页面const pageSize = getCurrentPages().lengthconsole.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出来的urlconsole.log(getCurrentPages().length)console.log(getApp().globalData.pageList.length)if (getCurrentPages().length < getApp().globalData.pageList.length) {const pageList = getApp().globalData.pageListpageList.pop()const url = pageList[pageList.length - 1]wx.redirectTo({url: url})} else {// 如果两个数目一致, app.pageList pop, 当前页面navigateBackgetApp().globalData.pageList.pop();wx.navigateBack()}
}

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

4.存在的问题

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

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

微信小程序页面数量限制问题相关推荐

微信小程序页面上下滚动、左右滑动（二）
系列文章目录微信小程序页面上下滚动.左右滑动(一) 文章目录系列文章目录前言项目结构解决问题1 1.pretest页面 2.test页面解决问题2 总结参考前言在上一篇文章,讲解了再 ...
微信小程序页面间通信的5种方式
微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个 ...
微信小程序购物车数量加减功能
微信小程序购物车数量加减功能 wxml  <view class="stepper">  < ...
微信小程序页面搜索框查询（无后台接口情况下）
微信小程序页面搜索框查询(无后台接口情况下) 效果图: wxml <view class="container"><view class="goodsl ...
小程序向Java传值,微信小程序页面传值详解
微信小程序页面传值详解一. 跨页面传值. 1 . 用 navigator标签传值或 wx.navigator, 比如这里将good_id=16 参数传入detail页面, 然后detail页面的 ...
vue用公共组件页面传值_微信小程序页面传值、组件间通信总结
小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验.对于微信小程序,前端开发应该不陌生,目前也是非常火,很多公司都会进行开发.对 ...
h5跳转小程序页面url_微信小程序页面跳转方法
我所知道的,微信小程序页面跳转有以下方法,下面分情况说明下一.利用小程序提供的 API 跳转: 1.简单page页面之间跳转 // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateB ...
微信小程序页面跳转方法总结
微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. // ...
微信小程序—页面内分享按钮用图标代替
微信小程序-页面内分享按钮用图标代替前言代码效果图前言张小龙不知道出于什么原因将打开客服会话.触发用户转发.打开授权设置页.打开"意见反馈"页面等功能全都挂载到butto ...

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

1.问题

2.分析

3.解决方法

4.存在的问题

微信小程序页面数量限制问题相关推荐

最新文章

热门文章