微信小程序登录页左上角的home图标如何隐藏?wx.hideHomeButton()不生效?

发布时间 2023-03-27 13:28:13作者: icon-icon

在做微信小程序时,我们一般都会在app.js中去判断当前用户是否已经登录,如果已经登录,会直接跳转到小程序的首页。如果未登录那么直接跳转登录页。

此时我们需要把首页首页作为微信小程序的pages列表中的第一个页面,这样可以减少打开小程序的时候闪过其他页面的频率,用户体验感会相对较好。

但是我们会发现这样的话,跳转到登录页面之后,登录页面左上角会出现一个 home 图标,但是我们已经使用了wx.reLaunch(关闭所有页面打开登录页面)跳转登录页面,为什么还会出现这个问题呢?

这是由于,我们使用wx.reLaunch时,最后跳转的页面会成为页面栈的最深的一个页面,因此会出现 home 图标,方便用户返回首页。

那此时登录页面我们是不需要返回首页的,有如下解决方案:

在app.js中,在onshow方法中使用wx.hideHomeButton() 来隐藏按钮。

调用完wx.hideHomeButton() 后,我们发现在微信开发工具中已经生效了,但是当我们使用手机真机预览的时候发现并没有生效。

因此我们最终解决方案如下:

// app.js

App({
  onLaunch() {
    if(!wx.getStorageSync('token')){
      setTimeout(()=>{
        wx.reLaunch({
          url:"/pages/login/login"
        })
      },100)
    }
  },

  // 应用进入前台
  onShow() {
    setTimeout(() => { // 使用延时,避免隐藏不生效
      wx.hideHomeButton()
    }, 200);
  },