跳到主要内容
支持地域：上海

微搭小程序原生 TabBar 配置指南

本文介绍如何在云开发微搭低代码平台中配置小程序原生 TabBar，实现底部导航栏的自定义效果。

什么是原生 TabBar​

原生 TabBar 是微信小程序提供的底部导航栏组件，基于 app.json 文件的 tabBar 属性进行配置。云开发微搭低代码平台支持自定义 app.json 内容，因此您可以手动配置 TabBar 来实现个性化的底部导航效果。

配置步骤​

步骤 1：准备并上传图标素材​

首先需要将 TabBar 用到的图标上传到云存储：

  1. 准备图标素材：确保图标符合以下要求

    • 图片格式：.png、.jpg 或 .jpeg
    • 图片大小：不超过 40KB
    • 建议尺寸：81px × 81px（普通态和选中态各一套）

  2. 上传到云存储：

    • 进入 云开发平台 - 云存储
    • 将图标文件上传到云存储
    • 设置权限为「所有用户可读，仅创建者及管理员可写」

  3. 获取图标 URL：上传完成后，复制图标的在线访问地址，确保地址以 .png、.jpg 或 .jpeg 结尾

步骤 2：配置 TabBar 参数​

  1. 在应用编辑页面，点击顶部的「代码编辑器」按钮

进入代码编辑器

  1. 打开配置文件：在代码编辑器中找到 common/mp_config.json 文件，添加 TabBar 配置：在 appJson 对象中添加 tabBar 属性

tabBar 具体属性可参考微信官方文档：自定义 TabBar

  1. 获取页面路径：页面的 pagePath 可以从页面编码中获取
  1. 填写图标地址：
    • iconPath：未选中状态的图标 URL
    • selectedIconPath：选中状态的图标 URL

💡 提示：云开发在生成小程序源码时会自动下载云存储中的图标文件到本地项目中。

步骤 3：完整配置示例​

在 common/mp_config.json 文件的 appJson 中添加以下配置：

{
  "appJson": {
    "tabBar": {
      "color": "#7A7E83",
      "selectedColor": "#3cc51f",
      "backgroundColor": "#ffffff",
      "borderStyle": "black",
      "list": [
        {
          "pagePath": "pages/index/index",
          "text": "首页",
          "iconPath": "https://6c6f-lowcode-9g2yhkab1a980408-1308771514.tcb.qcloud.la/ac18043f-6f5c-47f6-a225-63708f3e9e31.png",
          "selectedIconPath": "https://6c6f-lowcode-9g2yhkab1a980408-1308771514.tcb.qcloud.la/ac18043f-6f5c-47f6-a225-63708f3e9e31.png"
        },
        {
          "pagePath": "pages/my/index",
          "text": "我的",
          "iconPath": "https://6c6f-lowcode-9g2yhkab1a980408-1308771514.tcb.qcloud.la/ac18043f-6f5c-47f6-a225-63708f3e9e31.png",
          "selectedIconPath": "https://6c6f-lowcode-9g2yhkab1a980408-1308771514.tcb.qcloud.la/ac18043f-6f5c-47f6-a225-63708f3e9e31.png"
        }
      ]
    }
  }
}