【微信小程序】1|底部图标 | 我的咖啡店-综合实训

底部图标

引言

在微信小程序开发中，底部导航栏（tabBar）是用户界面的重要组成部分，它为用户提供了快速切换不同页面的功能。今天，我们将通过一个实际案例------"我的咖啡店"小程序，来详细解析如何配置底部图标，以及如何通过app.json文件实现全局样式和导航栏的自定义。

微信小程序配置文件概览

微信小程序的配置文件app.json是整个小程序的全局配置文件，它包含了小程序的所有页面路径、窗口表现、底部导航栏等多个方面的设置。

全局样式设置

在app.json中，我们首先设置了全局的窗口样式：

"window": {
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "我的咖啡店",
  "navigationBarBackgroundColor": "#ffffff"
},

这里定义了导航栏的文字颜色为黑色，标题为"我的咖啡店"，背景颜色为白色。

页面路径定义

接下来，我们定义了小程序中包含的所有页面路径：

"pages": [
  "pages/home/home",
  "pages/index/index",
  "pages/logs/logs",
  "pages/order/order",
  "pages/ordering/ordering",
  "pages/mine/mine",
  "pages/search/search"
],

这些路径指向了小程序的不同页面，例如首页、订单页、搜索页等。

底部导航栏配置

底部导航栏的配置是app.json中的重点，它定义了用户界面底部的图标和文字：

"tabBar": {
  "color": "#bfbfbf",
  "selectedColor": "#8B7355",
  "backgroundColor": "#ffffff",
  "list": [
    {
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "./image/home.png",
      "selectedIconPath": "./image/home-active.png"
    },
    {
      "pagePath": "pages/order/order",
      "text": "点餐",
      "iconPath": "./image/order.png",
      "selectedIconPath": "./image/order-active.png"
    },
    {
      "pagePath": "pages/ordering/ordering",
      "text": "订单",
      "iconPath": "./image/ordering.png",
      "selectedIconPath": "./image/ordering-active.png"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "./image/mine.png",
      "selectedIconPath": "./image/mine-active.png"
    }
  ]
},

在这段配置中，我们定义了四个底部图标，每个图标都有对应的页面路径、显示文字、未选中和选中时的图标路径。这样，用户在点击不同图标时，可以跳转到对应的页面。

自定义组件使用

最后，我们还定义了小程序中使用的自定义组件：

"usingComponents": {
  "van-search": "@vant/weapp/search/index"
}

这里使用了Vant Weapp的搜索组件，它是一个流行的小程序UI库，提供了丰富的组件来简化开发过程。

结语

通过上述配置，我们可以看到微信小程序的app.json文件如何控制全局样式和底部导航栏的设置。这只是一个简单的示例，微信小程序的配置非常灵活，可以根据实际需求进行调整。希望这篇文章能帮助你在开发自己的小程序时，更好地理解和配置底部导航栏。

完整代码

app.json

{

  "pages": [

    "pages/home/home",

    "pages/index/index",

    "pages/logs/logs",

    "pages/order/order",

    "pages/ordering/ordering",

    "pages/mine/mine",

    "pages/search/search"

  ],

  "window": {

    "navigationBarTextStyle": "black",

    "navigationBarTitleText": "我的咖啡店",

    "navigationBarBackgroundColor": "#ffffff"

  },

  "style": "v2",

  "componentFramework": "glass-easel",

  "sitemapLocation": "sitemap.json",

  "lazyCodeLoading": "requiredComponents",

  "tabBar": {

    "color": "#bfbfbf",

    "selectedColor": "#8B7355",

    "backgroundColor": "#ffffff",

    "list": [

      {

        "pagePath": "pages/home/home",

        "text": "首页",

        "iconPath": "./image/home.png",

        "selectedIconPath": "./image/home-active.png"

      },

      {

        "pagePath": "pages/order/order",

        "text": "点餐",

        "iconPath": "./image/order.png",

        "selectedIconPath": "./image/order-active.png"

      },

      {

        "pagePath": "pages/ordering/ordering",

        "text": "订单",

        "iconPath": "./image/ordering.png",

        "selectedIconPath": "./image/ordering-active.png"

      },

      {

        "pagePath": "pages/mine/mine",

        "text": "我的",

        "iconPath": "./image/mine.png",

        "selectedIconPath": "./image/mine-active.png"

      }

    ]

  },

  "usingComponents": {

    "van-search": "@vant/weapp/search/index"

  }

}

image

展示