微信小程序之普通页面跳转到tabBar页面

  • 前言

最近在做一个投稿小程序,主要功能是作者可以在微信小程序登录,注册,然后登陆进入主页面,可以投递稿件以及浏览自己已投递的稿件,和个人中心等主要功能,做的比较简单,因为本人对于小程序是一个初学者。

  • 遇到的问题
    登录页面不是tabBar页面,只是一个普通页面,而我想通过登录之后可以跳转到tabBar首页,图一怎么跳转到图二呢?

在这里插入图片描述图一
在这里插入图片描述
图二

  • 解决思路
    查看官方文档,可以通过微信小程序提供的api
    wx.reLaunch()在这里插入图片描述
    这种方式不仅可以从非tabBar页面跳转到非tabBar页面,还可以携带参数

登录部分js代码:

doLogin(){
    let username = this.data.username;
    let password = this.data.password;
    if(username == '' || password == ''){
      wx.showToast({
        title: '登录失败',
        icon: 'error'
      })
      return;
    }
    wx.request({
      url: 'http://localhost:8082/onlineSubmit/system/login',
      method: 'POST',
      header: {
        "content-type":"application/x-www-form-urlencoded"
      },
      data: {
        username: username,
        password: password,
        type: this.data.type
      },
      success:(res)=>{
        console.log(res.data);
        if(res.data.type == 'error'){
          wx.showToast({
            title: '用户不存在!',
            icon:'error'
          })
        }else{
          // 登录成功后,设置全局变量-username
          const app = getApp();
          app.globalData.username = username
          wx.reLaunch({
            url: '/pages/index/index?username='+username,
          })
        }
      },
      fail: (error) => {
        //console.log('请求失败:', error);
      }
    })
  }
### 微信小程序实现自定义 TabBar 页面跳转方法 #### 关闭原生 TabBar 并启用自定义 TabBar 为了实现自定义 TabBar,在 `app.json` 文件中的 `tabBar` 配置项内设置 `"custom": true"` 可以关闭默认的 TabBar[^3]。 ```json { "tabBar": { "custom": true, ... } } ``` #### 创建自定义 TabBar 组件 创建一个新的组件来作为自定义 TabBar。此组件负责管理底部导航栏以及处理各个标签页之间的切换逻辑[^2]。 #### 使用 switchTab 进行页面跳转 对于需要保留到顶部级别的页面(即 TabBar 上展示的页面),应采用 `wx.switchTab()` API 来完成页面间的转换操作,而不是使用 `wx.navigateTo()` 或其他形式的路由方式[^4]。 #### 获取并控制当前页面下的自定义 TabBar 实例 通过调用 `getTabBar` 接口能够取得当前上下文中对应的自定义 TabBar 组件实例对象,从而允许动态调整其状态或属性值。 #### 解决可能存在的性能问题 为了避免因频繁更新数据而导致界面卡顿现象的发生,建议尽可能减少对 `setData` 方法次数过多地调用;可以在监听器函数如 `onShow` 中设定好初始索引位置,以此优化用户体验效果[^5]。 ```javascript Page({ onShow() { const index = this.data.selectedIndex; // 设置选中项而不触发重新渲染 this.setData({ selectedIndex: index }); }, }); ``` #### 示例代码片段:自定义 TabBar 组件部分功能实现 下面给出一段简单的 JavaScript 代码用来说明如何响应用户的点击事件,并执行相应的页面跳转动作: ```javascript Component({ methods: { handleTap(event) { let url = '/pages/home/home'; // 假设这是首页路径 wx.switchTab({ url }); // 执行页面跳转至首页 } } }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员阿坤...

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值