前言:

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

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

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

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

tabBar基础

示例:

tabBar在app.json中配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"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配置项参数中iconPathselectedIconPath的说明,它们不支持网络图片

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

我们可以使用wx.setTabBarItemwx.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 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码:

1
2
3
4
5
6
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中

1
2
3
4
"usingComponents": {
"navbar": "/components/custom-navigation-bar/custom-navigation-bar"
},
"navigationStyle": "custom"

然后在页面的wxml加上

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

wxml部分

1
2
3
4
5
6
7
8
9
10
11
12
<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部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/* 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()

1
2
3
4
5
6
7
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使用

1
2
3
4
globalData: {
statusBarHeight:0,
menuBottonTop:0
}

2.接下来是components中的js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
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, //获取app.js中的全局变量
navTitleTop: app.globalData.menuBottonTop
},
/**
* 组件的方法列表
*/
methods: {
// 返回首页
navHome: function () {
wx.navigateTo({
url: '/pages/index/index'
})
}
// 返回上一页
// navBack: function () {
// if (this.properties.backPath === '') {
// wx.navigateBack({
// delta: this.properties.backDelta
// })
// } else {
// wx.redirectTo({
// url: this.properties.backPath
// })
// }
// this.triggerEvent('backEvent', {}) // 可绑定点击返回时的事件
// }

// 回到顶部
// toTop: function () {
// wx.pageScrollTo({
// scrollTop: 0,
// duration: 300
// })
// this.triggerEvent('scrollEvent', {}) // 可绑定点击标题栏时的事件
// },
}
})

因为我只需要解决跳转tabBar页面后无法返回首页的问题,首页这里删减和保留微信小程序之自定义顶部导航栏_Rayong有分享的博客-CSDN博客的部分代码(注释了的部分我暂未测试是否有效)

自此,实现了自定义navigationBar,如何使用自定义组件请见前文

参考文献

微信开放文档 (qq.com)

微信小程序之自定义顶部导航栏_Rayong有分享的博客-CSDN博客

微信小程序自定义navigationBar_小任睡不醒`的博客-CSDN博客_navigation-bar

小程序+获取顶部状态栏的高度无烟客来了的博客-CSDN博客小程序获取顶部高度

微信小程序开发实战/黑马程序员编著 人民邮电出版社 2019.4(2021.7重印)

最后

暂时就写到这了,如有错误,欢迎大佬留言指出😆

欢迎访问我的小破站https://www.226yzy.com/ 或者GitHub版镜像 https://226yzy.github.io/ 或Gitee版镜像https://yzy226.gitee.io/

我的Github:226YZY (星空下的YZY) (github.com)

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

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