【学习记录】微信小程序tabBar与自定义navigationBar踩坑记录

前言：

最近在尝试微信小程序，平时把参考书籍中涉及的小项目放在一个小程序中，在涉及tabBar时发现跳转至tabBar页面，导航栏上返回按钮消失，进而开始尝试自定义navigationBar。本文记录我的一些踩坑和最终代码。

因为初学，可能有一些错误或者有比较笨拙的地方，欢迎大佬指出🤣

【转载说明】本文优先发布于我的个人博客www.226yzy.com ，转载请注明出处并注明作者：星空下的YZY。

本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0许可协议。

示例：

tabBar在app.json中配置

{
"tabBar": {
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "组件"
    }, {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  }
}

用途：tabBar对象用于配置页面底部的标签栏

标签数量要求：标签数量不得少于2个，最多不得超过5个

tabBar配置项参数：

属性	是否必填	标签栏属性
position	否	在窗口的底部或顶部bottom/top（默认bottom）
color	是	未选择时，tab文字的颜色
selectedColor	是	选中时，tab文字的颜色
borderStyle	否	tabBar上边框的颜色，仅支持black/white（默认black)
backgroundColor	是	tab的背景色
list	是	tab的列表，标签数量不得少于2个，最多不得超过5个

还有一个custom 字段，在自定义tabBar时配置true/false，详情见自定义 tabBar | 微信开放文档 (qq.com)

list配置项参数：

属性	是否必填	说明
pagePath	是	页面路径，必须在pages中先定义
iconPath	否	未选择时，图片路径；当positio为top时，此参数无效；不支持网络图片
selectedIconPath	否	选择时，图片路径；当positio为top时，此参数无效；不支持网络图片
text	是	tab上按钮文字

tabBar图标

正如上文的list配置项参数中iconPath和selectedIconPath的说明，它们不支持网络图片

虽然这里使用的icon大小不大，但如果真想使用网络图片还是有办法的

我们可以使用wx.setTabBarItem，wx.setTabBarItem(Object object) | 微信开放文档 (qq.com)

参数：

属性	类型	必填	说明
index	number	是	tabBar 的哪一项，从左边算起
text	string	否	tab 上的按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码：

wx.setTabBarItem({
  index: 0,
  text: 'text',
  iconPath: '/path/to/iconPath',
  selectedIconPath: '/path/to/selectedIconPath'
})

补充说明：

wx.setTabBarItem写在对应page的js中，并且该page必须是tabBar 页面

跳转到 tabBar 页面

因为我学习微信小程序时，是将参考资料涉及的多个小项目集合起来，通过首页中对应的按钮点击跳转到各自的页面。

但是将tabBar相关参数配置好后，发现原本使用的wx.navigateTo无法用于tabBar页面。

在查阅官方文档后发现可以使用wx.switchTab跳转到 tabBar 页面

wx.switchTab(Object object) | 微信开放文档 (qq.com)

带来的问题：

从官方文档功能描述中可知，通过wx.switchTab跳转到 tabBar 页面时，会关闭其他所有非 tabBar 页面

实际运行时会发现，你将无法返回上一页

自定义navigationBar顶部导航栏

解决上面出现的问题我想到了自定义navigationBar顶部导航栏，

由于刚接触微信小程序没多久，手头的参考书籍对这块内容也没有多少涉及

所以我找到了这一篇作为基础参考微信小程序之自定义顶部导航栏_Rayong有分享的博客-CSDN博客

但很可惜，实际使用其相关代码发现效果不太行🤣

再结合微信小程序自定义navigationBar_小任睡不醒`的博客-CSDN博客_navigation-bar、小程序+获取顶部状态栏的高度无烟客来了的博客-CSDN博客小程序获取顶部高度等其它文章的内容，发现那篇代码上有缺失，未涉及app.js中的代码。

我的尝试

以下将记录，我参考上述资料后，最终的相关代码

主要代码是在微信小程序之自定义顶部导航栏_Rayong有分享的博客-CSDN博客这一篇的基础上修改的（因为他的代码我没成功😵‍💫）

首先在components的模板组件文件夹（没有的话自建）中创建顶部导航栏的自定义模板。例如我的components/custom-navigation-barcustom-navigation-bar.js

如何使用自定义组件

在需要使用的页面的json中

"usingComponents": {
    "navbar": "/components/custom-navigation-bar/custom-navigation-bar"
  },
  "navigationStyle": "custom"

然后在页面的wxml加上

1	<navbar navTitle="标题" back home></navbar>

wxml部分

<view>
  <view class="nav-bar {{isWhite=='true'?'nav-bar-white':''}}" style="height: {{statusBarHeight}}px;background-color:{{navColor}};">
    <!-- 标题 -->
    <text class="navbar-title" style="top:{{navTitleTop}}px;color:{{navTitleColor}};">{{navTitle}}</text>
    <view class="navbarImg" style="top:{{navTitleTop}}px;">
      <view wx:if="{{home}}" catchtap="navHome" class="navbar-icon-wrap">
        <image src="/images/left.png" class="navbar-icon"></image>
      </view>
    </view>
  </view>
  <view class="nav-bar-place" style="height: {{statusBarHeight+44}}px;background-color:{{navColor}};"></view>
</view>

其中/images/left.png请使用您自己的图片资源

有关参数见下文js部分

wxss部分

/* components/custom-navigation-bar/custom-navigation-bar.wxss */
/*自定义导航栏*/
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999999;
}
.nav-bar-place {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999998;
}

.nav-bar-white {
  height: 40rpx;
  background-color: #fff;
}

.navbar-title {
  position: absolute;
  height: 32px;
  line-height: 32px;
  width: 320rpx;
  text-align: center;
  font-size: 13px;
  left: 28%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.navbarImg {
  position: absolute;
}

.navbar-icon-wrap {
  width: 44px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar-icon {
  width: 25px;
  height: 25px;
}

这部分对标题过长的情况也进行了处理，过长部分会由省略号代替

js部分

1.首先是app.js中的，写在onLaunch()里

wx.getSystemInfo({
     success: function (res) {
       that.globalData.statusBarHeight = res.statusBarHeight;
     }   
   })
   const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
   that.globalData.menuBottonTop=menuButtonInfo.top

wx.getSystemInfo可以获取状态栏的高度statusBarHeightwx.getSystemInfo(Object object) | 微信开放文档 (qq.com)，我采用的导航栏高度设为statusHeight+44px，是从这一篇的评论区发现的自定义navigationBar顶部导航栏，兼容适配所有机型（附完整案例） | 微信开放社区 (qq.com)。经过开发工具中几个机型的测试，确实跟原生导航栏没太大差别。

然后是wx.getMenuButtonBoundingClientRect可以获取菜单按钮（右上角胶囊按钮）的布局位置信息。获取胶囊按钮的top参数是为了适配各机型调整标题的位置。Object wx.getMenuButtonBoundingClientRect() | 微信开放文档 (qq.com)

在app.js中有globalData，里面的参数即将作为全局变量供Component使用

globalData: {
    statusBarHeight:0,
    menuBottonTop:0
  }

2.接下来是components中的js

const app = getApp()
Component({
  


  properties: {
    navTitle: { 
      type: String,
      value: ''
    },
    navTitleColor: { 
      type: String,
      value: '#fff'
    },
    navColor: { 
      type: String,
      value: '#0CC7F7'
    },
    back: {
      type: String,
      value: 'true'
    },
    home: {
      type: String,
      value: 'true'
    },
    backPath: { 
      type: String,
      default: ''
    },
    backDelta: { 
      type: Number,
      default: 1
    }
  },

  


  data: {
    statusBarHeight: app.globalData.statusBarHeight, 
    navTitleTop: app.globalData.menuBottonTop
  },
  


  methods: {
    
    navHome: function () {
      wx.navigateTo({
        url: '/pages/index/index'
      })
    }
    
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    
    
    
    
    
    
  }
})