【微信小程序】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

展示