原生微信小程序 使用默认导航栏 特定页面隐藏导航栏左侧的返回/home按钮 - wx.reLaunch + wx.hideHomeButton

前言

使用微信小程序的默认导航栏，在特定页面隐藏导航栏左侧的返回/home按钮

目录

前言

效果

登录页

主页

应用场景

        场景一

        场景二

解决办法

1、跳转至不需要导航栏返回按钮的页面时需要使用wx.reLaunch

2、不需要导航栏返回按钮的页面在onShow中调用wx.hideHomeButton

完整示例

 欢迎扫描下方二维码关注VX公众号

---

效果

登录页

主页

应用场景

        场景一

                登录页导航栏不需要返回按钮

        场景二

                登录之后的主页同登录页一样，不需要返回按钮

解决办法

        需要1、2点结合使用

1、跳转至不需要导航栏返回按钮的页面时需要使用wx.reLaunch

wx.reLaunch(Object object) | 微信开放文档

wx.reLaunch({
  url: '不需要导航栏返回页面的路径',
}) 

2、不需要导航栏返回按钮的页面在onShow中调用wx.hideHomeButton

wx.hideHomeButton(Object object) | 微信开放文档

  onShow() {
    wx.hideHomeButton({
      complete: function() {
        console.log('hideHomeButton');
      }
    })
  },

完整示例

login.json

{
    "navigationBarTitleText": "用户登录"
}

login.wxml

<button  bindtap="submitLogin">登录</button>

login.js

登录提交成功后跳转至home页面

  async submitLogin() {
    ...登录参数等相关处理
    if(res.code==200){
       //登录成功
        ...登录成功后的相关处理
       wx.reLaunch({
         url: '../home/home',
       }) 
    }else{
      wx.showToast({
        title: res.message,
        icon: 'none',
        duration: 2000
      })
    }
  },


  onShow() {
    wx.hideHomeButton({
      complete: function() {
        console.log('hideHomeButton');
      }
    })
  },

 home.json

{
  "navigationBarTitleText": "首页"
}

home.wxml

<button bindtap="logout">退出登录</button>

home.js

   logout(){
    wx.showModal({
      title: '提示',
      content: '您确认要退出登录吗？',
      success (res) {
        if (res.confirm) {
          wx.reLaunch({
            url: '../login/login',
          }) 
        }
      }
    })    
   },

   onShow() {
     wx.hideHomeButton({
       complete: function() {
         console.log('hideHomeButton');
       }
     })
   },

 欢迎扫描下方二维码关注VX公众号