微信小程序自定义返回页面遇到的问题

Lingo -
微信小程序自定义返回页面遇到的问题
需求:

TabBar中点击发起比赛跳转到一个空页面,根据用户状态,通过路由跳转到不同的页面,问题在于返回的时候。需要返回用户点击发起比赛之前的TabBar页面。

问题:

一、无法获取用户点击发起比赛之前的界面

原因:TabBar页面之间切换的时候,旧的TanBar页面会出栈,新的TabBar页面会入栈。所以无法获取上一个TabBar页面。验证:分别在两个TabBar页面,首页Index,发起比赛createMatch,以及根据状态跳转的填写比赛的fillMatchInfo的界面通过 getCurrentPages 打印当前页面栈。首先启动小程序,首页中打印:
Z@(GTUR`0%L0A{}FOBI))12.png点击发起比赛,在createMatch空页面中打印:
%FBZ1)[_V_SY$%WJS{L2$$U.png
发现页面栈现在只有一个createMatch页面根据用户状态,现在跳转到填写比赛信息fillMatchInfo的界面,现在页面栈里面有两个页面。
4SK%7VTK@Q6%U(1Q_7J1C22.png解决方法:
在model里面自己定义一个页面栈。就可以获取到用户点击发起比赛之前的TabBar页面。
然后在返回的时候,根据自定义页面栈的url进行路由跳转。
那么新的问题又来了,怎么控制返回到指定页面?

二、如何返回到指定页面
进入到发起比赛createMatch页面后,会根据用户状态,跳到相应页面,这里是用navigateTo

Taro.navigateTo({
      url: '../fillMatchInfo/fillMatchInfo'
})

navigateTo:保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 Taro.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

navigateBack:关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。

但是页面栈中没有想要跳转的页面,所以不能用navigateBack的方法。

解决方法:
用navigateTo的时候会出现小程序自带的返回键。小程序自带的返回键不支持自定义路径。一种解决办法就是在生命周期函数中监听页面卸载,然后进行路由跳转。

用switchTab跳转
出现的问题是,的确会返回首页,但是返回首页之后又马上跳转到填写比赛信息页面。
回到首页的时候在onshow里面打印的页面栈只有首页,但是又马上跳转到填写比赛信息页面,在此页面的onshow中打印页面栈有首页和比赛信息。
}5G[AUWXE(LWWJFCZ_7OEXW.png用reLaunch跳转
用relaunch跳转就会关闭当前所有页面栈。能达到目的,但是因为关闭所有页面栈会出现一个卡顿.最终结局方法在全局的model里面自定义一个TabBar页面栈。在TabBar页面componentDidHide的时候把页面信息入栈(因为页面进入后台肯定是有页面的切换)是需要跳转页面的生命周期函数componentWillUnmount中监听页面卸载,然后进行路由跳转。(url来源于自定义页面栈的栈顶元素)
特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。

Tags 标签

微信小程序taro

扩展阅读

加个好友,技术交流

1628738909466805.jpg