在讲微信小程序页面跳转之前先说一下微信小程序的页面栈,简单来说就是打开一个页面就将该页面入栈,离开一个页面就将该页面出栈,具体什么时候入栈,什么时候出栈,下面的几种方法我都会介绍,需要注意的时候微信小程序的页面栈有数量限制,当页面栈数量操作10的时候就会出现跳转页面失灵的情况。接下来我们介绍我在微信小程序开发中遇到的几种常用的页面跳转方法,以及如何合理的去使用?
微信小程序中实现页面跳转有四种方式
wx.navigateBack
页面返回,页面栈不断出栈,直到返回到目标,getCurrentPages用来得到页面栈的实例信息,以数组的形式存储,页面delta接受一个数值类型的参数,1则表示返回上一个页面,success表示操作成功的回调函数,通常来执行更新的操作。使用这个方法的时候一般不会造成页面栈的堆积,所以可以尽情使用这个方法
// 返回首页
let pages = getCurrentPages(); //获取当前页面栈的消息
// 假设这中间隔了两个个页面
// pages[pages.length - 1]表示的最后一个页面(也就是当前页面)
// 获取返回目标页面的实例信息
let prevPage = pages[pages.length - 3];
wx.navigateBack({
delta: 2,
success: function () {
// 假设需要进行一些更新操作
// 假设需要重新执行获取订单的方法更新订单列表,然后更新视图
prevPage.getOrderList();
}
})
wx.navigateTo
直接跳转到目标页面,该页面进入页面栈,当前页面也还在页面栈中没有消失,这个记住要慎用,当我们必须使用这种方法的时候才用,比如跳转的页面是环环相扣的,但是页面不能太多,如果太多会导致页面栈堆积。考虑到页面跳转需要携带参数,所以我们通常以url携带参数的形式传递,如果传递的是对象,那么需要json序列化,然后目标通过onLoad接受传递的参数即可
wx.navigateTo({
url: '/pages/index?overview=' + JSONObj,
})
wx.redirectTo
直接跳转目标页面,该页面栈进入页面栈,但是当前页面栈出栈了,也就是说使用wx.navigateBack返回不到当前页面,和wx.navigateTo类似,但是缓解了页面栈的压力,具体使用的使用要注意区分这两个什么时候用最好。
wx.redirectTo({
url: '/pages/index?overview=' + JSONObj,
})
wx.reLaunch
跳转到目标页面,页面栈所有数据清空,页面栈只留下目标页面栈,适合用于跳转两个太相关的页面,好处就是页面栈清空,不会造成跳转不成功的情况
wx.reLaunch({
url: '/pages/index?overview=' + JSONObj,
})
如何解决页面栈堆积的问题
- 当我们返回首页的时候可以使用wx.reLaunch情况页面栈,当然视情况而定。
- 返回之前的页面的时候尽量使用wx.navigateBack方法