前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >零基础微信小程序开发——全局配置之tabBar(保姆级教程+超详细)

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

作者头像
小白的大数据之旅
发布于 2024-12-24 01:45:40
发布于 2024-12-24 01:45:40
92100
代码可运行
举报
运行总次数:0
代码可运行

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

全局配置

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

tabBar

什么是 tabBar

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

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

注意:

  • tabBar中只能配置最少 2 个、最多 5 个 tab 页签
  • 当渲染顶部 tabBar 时,不显示 icon,只显示文本,也就是如果渲染顶部的话,不会出现图片,直接先是文字部分,例如首页、消息、联系我们
tabBar 的 6 个组成部分
  1. backgroundColor:这个属性用于设置tabBar的背景颜色。背景颜色被设置为红色。它定义了tabBar的整体背景色调,是用户体验中不可或缺的一部分,可以影响整个界面的视觉效果。
  2. selectedIconPath:这个属性指定了当tab项被选中时,显示的图标路径。选中时的图标被设置为一个蓝色的三角形图标。这个图标在用户与界面交互时提供了直观的视觉反馈。
  3. borderColor:这个属性用于设置tabBar上边框的颜色。在示例中,边框颜色被设置为黑色。边框可以增强tabBar的视觉边界,使其在页面上更加突出。
  4. iconPath:这个属性指定了当tab项未被选中时,显示的图标路径。未选中时的图标被设置为一个灰色的圆形图标。这个图标在默认情况下展示给用户,提供了关于tab功能的直观信息。
  5. selectedColor:这个属性用于设置tab上文字在选中时的颜色。选中时的文字颜色被设置为绿色。这有助于用户区分当前活动的tab项。
  6. 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、分别是首页、消息、个人中心,选中之前是没有填充颜色的图标,选中后是填充颜色的图标

实现步骤
  1. 拷贝图标资源: 需要将每个页面所需要的图标准备好,对应三组,分别是选中状态和非选中状态
  2. 新建 3 个对应的 tab 页面 三个页面分别对应首页、信息、个人中心
  3. 配置 tabBar 选项
第一步拷贝图标

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

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

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

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

在app.js中添加如下内容

  1. home 是首页
  2. message 是消息页面
  3. individual 是个人中心页面
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    "pages": [
        "pages/home/home",
        "pages/message/message",
        "pages/individual/individual"
    ]
}

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

第三步:设置tabBar

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
    // 定义一个数组,用于存放小程序中所有页面的路径
    "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"
}

结果:

可以尝试点击下面的三个按钮,看看是什么样的效果

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-12-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 全局配置
    • tabBar
      • 什么是 tabBar
      • tabBar 的 6 个组成部分
      • tabBar 节点的配置项
      • 每个 tab 项的配置选项
      • 实战一下
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档