零基础微信小程序开发——全局配置之tabBar（保姆级教程+超详细）

小白的大数据之旅

发布于 2024-12-24 01:45:40

90700

代码可运行

运行总次数：0

代码可运行

🎥 作者简介： CSDN\阿里云\腾讯云\华为云开发社区优质创作者，专注分享大数据、Python、数据库、人工智能等领域的优质内容 🌸个人主页： 长风清留杨的博客 🍃形式准则： 无论成就大小，都保持一颗谦逊的心，尊重他人，虚心学习。 ✨推荐专栏： Python入门到入魔，Mysql入门到入魔，Python入门基础大全，Flink入门到实战 🍂若缘分至此，无法再续相逢，愿你朝朝暮暮，皆有安好，晨曦微露道早安，日中炽热说午安，星河长明寄晚安🍂

全局配置

小程序开发中的全局配置文件是app.json，它位于小程序的根目录下。这个文件非常重要，因为它包含了小程序的一些基础信息和全局配置。

tabBar

什么是 tabBar

tabBar是移动端应用中一种常见的页面效果，它主要用于实现多个页面之间的快速切换。在小程序开发中，tabBar同样扮演着非常重要的角色。小程序中的tabBar通常被分为底部tabBar和顶部tabBar两种类型。

底部tabBar：
- 底部tabBar是小程序中最为常见的一种tabBar类型。它位于屏幕的底部，用户可以通过点击不同的选项卡来切换不同的页面。
- 底部tabBar中至少需要配置两个选项卡，最多可以配置五个选项卡。这些选项卡通常包括图标和文本，以直观地表示每个页面的功能和内容。
- 底部tabBar的选项卡可以自定义样式，包括图标的颜色、文本的颜色、背景色等，以满足不同小程序的设计需求。
顶部tabBar：
- 顶部tabBar相对较少见，它位于屏幕的顶部，用于实现页面的切换。
- 与底部tabBar不同的是，当渲染顶部tabBar时，不显示图标，只显示文本。这可能是因为顶部空间有限，且用户通常更习惯于在底部进行页面切换操作。
- 顶部tabBar的样式和配置相对较少，通常只包括文本和分隔线等简单元素。

注意：

tabBar中只能配置最少 2 个、最多 5 个 tab 页签
当渲染顶部 tabBar 时，不显示 icon，只显示文本，也就是如果渲染顶部的话，不会出现图片，直接先是文字部分，例如首页、消息、联系我们

tabBar 的 6 个组成部分

backgroundColor：这个属性用于设置tabBar的背景颜色。背景颜色被设置为红色。它定义了tabBar的整体背景色调，是用户体验中不可或缺的一部分，可以影响整个界面的视觉效果。
selectedIconPath：这个属性指定了当tab项被选中时，显示的图标路径。选中时的图标被设置为一个蓝色的三角形图标。这个图标在用户与界面交互时提供了直观的视觉反馈。
borderColor：这个属性用于设置tabBar上边框的颜色。在示例中，边框颜色被设置为黑色。边框可以增强tabBar的视觉边界，使其在页面上更加突出。
iconPath：这个属性指定了当tab项未被选中时，显示的图标路径。未选中时的图标被设置为一个灰色的圆形图标。这个图标在默认情况下展示给用户，提供了关于tab功能的直观信息。
selectedColor：这个属性用于设置tab上文字在选中时的颜色。选中时的文字颜色被设置为绿色。这有助于用户区分当前活动的tab项。
color：这个属性用于设置tab上文字的默认（未选中）颜色。未选中时的文字颜色被设置为紫色。这为用户提供了关于哪些tab项是可用的直观信息。

tabBar 节点的配置项

属性	类型	必填	默认值	描述
position	String	否	bottom	tabBar 的位置，支持 bottom（底部）或 top（顶部），但通常默认且更常见的是底部。
borderStyle	String	否	black	tabBar 上边框的颜色，仅支持 black（黑色）或 white（白色），用于设置边框的显示颜色。
color	HexColor	否	-	tab 上文字的默认（未选中）颜色，使用十六进制颜色代码进行定义。
selectedColor	HexColor	否	-	tab 上的文字选中时的颜色，同样使用十六进制颜色代码进行定义，用于区分选中状态的文字颜色。
backgroundColor	HexColor	否	-	tabBar 的背景色，使用十六进制颜色代码进行定义，用于设置工具栏的背景色调。
list	Array	是	-	tab 页签的列表，是一个数组类型，包含了多个 tab 项的配置信息，最少需要配置2个 tab，最多可配置5个 tab，以满足用户界面的导航需求。

每个 tab 项的配置选项

属性	类型	必填	描述
pagePath	String	是	页面路径，页面必须在 pages 中预先定义
text	String	是	tab 上显示的文字
iconPath	String	是	未选中时的图标路径；当 position 为 top 时，不显示 icon
selectedIconPath	String	是	当 position 为 top 时，不显示 icon（选中状态）

实战一下

需求

预期能达到以下效果，有底部的tabBar、分别是首页、消息、个人中心，选中之前是没有填充颜色的图标，选中后是填充颜色的图标

实现步骤

拷贝图标资源：需要将每个页面所需要的图标准备好，对应三组，分别是选中状态和非选中状态
新建 3 个对应的 tab 页面三个页面分别对应首页、信息、个人中心
配置 tabBar 选项

第一步拷贝图标

这些是需要的图标，可以看到选中是深色有填充的，没有选中是浅色没有填充的，那我们命名的时候可以这样名称，没有选中的默认为自己的名字，例如home，选中的加上 -active，例如home-active

需要原版图标的话直接私信我，或者关注公众号：小白的大数据之旅

第二步：新建 3 个对应的 tab 页面

三个tab页面分别是首页、消息和个人中心

在app.js中添加如下内容

home 是首页
message 是消息页面
individual 是个人中心页面

{
    "pages": [
        "pages/home/home",
        "pages/message/message",
        "pages/individual/individual"
    ]
}

编写完上面的代码之后保存，对应的目录会自动创建

第三步：设置tabBar

在app.js中分别设置首页、消息、个人中心的页面，下面是app.json的源代码

{
    // 定义一个数组，用于存放小程序中所有页面的路径
    "pages": [
        "pages/home/home",          // 首页页面路径
        "pages/message/message",    // 消息页面路径
        "pages/individual/individual", // 个人中心页面路径
        "pages/index/index",        // 索引页面路径（通常作为默认页面，但这里可能用作其他用途）
        "pages/test/test",          // 测试页面路径
        "pages/logs/logs"           // 日志页面路径
    ],
    
    // 定义小程序窗口的表现
    "window": {
        "backgroundTextStyle": "dark",     // 下拉 loading 的样式，dark 为深色背景，light 为浅色背景
        "navigationBarBackgroundColor": "#2b4b6b", // 导航栏背景颜色
        "navigationBarTitleText": "公众号：小白的大数据之旅", // 导航栏标题文字
        "navigationBarTextStyle": "white", // 导航栏标题文字颜色
        "backgroundColor": "#efefef",      // 页面背景颜色
        "onReachBottomDistance": 100       // 页面上拉触底事件触发时距离页面底部距离
    },
    
    // 定义小程序底部标签栏的表现
    "tabBar": {
        "list": [
            {
                "pagePath": "pages/home/home",    // 页面路径，首页路径
                "text": "首页",                  // 标签栏上显示的文字
                "iconPath": "/images/tabs/home.png", // 未选中时的图标路径
                "selectedIconPath": "/images/tabs/home-active.png" // 选中时的图标路径
            },
            {
                "pagePath": "pages/message/message", // 页面路径，消息页面路径
                "text": "消息",                       // 标签栏上显示的文字
                "iconPath": "/images/tabs/mess.png", // 未选中时的图标路径
                "selectedIconPath": "/images/tabs/mess-active.png" // 选中时的图标路径
            },
            {
                "pagePath": "pages/individual/individual",  // 页面路径，个人中心页面路径
                "text": "个人中心",                          // 标签栏上显示的文字
                "iconPath": "/images/tabs/individual.png",  // 未选中时的图标路径
                "selectedIconPath": "/images/tabs/individual-active.png"// 选中时的图标路径
            }
        ]
    },
    
    // 小程序使用的样式版本，v2为推荐的最新版本
    "style": "v2",
    
    // 指明 sitemap.json 文件的位置，该文件用于配置小程序内搜索
    "sitemapLocation": "sitemap.json"
}