onTabItemTap 是否可以重定向
发布于 4 年前 作者 shaoyan 5679 次浏览 来自 问答
  • 需求的场景描述(希望解决的问题)

现在我们小程序有一个「首页」、「我的」、「发帖」tab,其中「我的」、「发帖」都需要用户登录后才能进行操作,之前我们是在这两个页面直接调 wx.getUserInfo 强制用户进行登录

但为了响应 获取用户信息接口优化调整,我们新加了个「登录页」,然后在「我的」、「发帖」判断用户登录态,若未登录,使用 wx.navigateTo 重定向到这个「登录页」

然后,现在碰到的问题是,在「我的」、「发帖」进行跳转到「登录页」时,页面会【闪烁】下,用户体验非常不好

  • 希望提供的能力

希望可以在 onTabItemTap 能改变 tabBar 配置里的跳转地址。伪代码如下:

onTabItemTap (item) {
  const { pagePath } = item
  const needAuthPaths = [
    '/page/my/index',
    '/page/post/index'
  ]

 

// 方案1. 使用 wx.navigateTo 进行跳转

  if (needAuthPaths.indexOf(pagePath) !== -1 && !this.loginState) {
    wx.navigateTo({
      url: '/page/login/index'
    })
    return false

  }

 

 // 方案 2,返回新的 tabBar 地址

 // return  '/page/login/index'

}

2 回复

登入页写成一个组件,然后写一个进入动画。需要的页面调用组件就会体验友好些。改写tap路由感觉比较危险

可以考虑在需要用户登录的页面中操作时,进行登录操作。

我的做法是在这些页面进行判断是否已经登录,没有登录的话会放一个全页面大小的fixed定位的opacity为0的open-type为getUserInfo的按钮,当有点击事件,就可以触发绑定的授权事件

<button wx:if='{{!hasUserInfo}}' class='whole-button' open-type='getUserInfo' bindgetuserinfo='getUserInfo' plain='true'></button>

.whole-button {
 
    position: fixed;
 
    z-index: 9999;
 
    top: 0;
 
    bottom: 0;
 
    left: 0;
 
    right: 0;
 
    opacity: 0;
 
}

回到顶部