底部图标
引言
在微信小程序开发中,底部导航栏(tabBar)是用户界面的重要组成部分,它为用户提供了快速切换不同页面的功能。今天,我们将通过一个实际案例------"我的咖啡店"小程序,来详细解析如何配置底部图标,以及如何通过app.json
文件实现全局样式和导航栏的自定义。
微信小程序配置文件概览
微信小程序的配置文件app.json
是整个小程序的全局配置文件,它包含了小程序的所有页面路径、窗口表现、底部导航栏等多个方面的设置。
全局样式设置
在app.json
中,我们首先设置了全局的窗口样式:
javascript
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "我的咖啡店",
"navigationBarBackgroundColor": "#ffffff"
},
这里定义了导航栏的文字颜色为黑色,标题为"我的咖啡店",背景颜色为白色。
页面路径定义
接下来,我们定义了小程序中包含的所有页面路径:
javascript
"pages": [
"pages/home/home",
"pages/index/index",
"pages/logs/logs",
"pages/order/order",
"pages/ordering/ordering",
"pages/mine/mine",
"pages/search/search"
],
这些路径指向了小程序的不同页面,例如首页、订单页、搜索页等。
底部导航栏配置
底部导航栏的配置是app.json
中的重点,它定义了用户界面底部的图标和文字:
javascript
"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"
}
]
},
在这段配置中,我们定义了四个底部图标,每个图标都有对应的页面路径、显示文字、未选中和选中时的图标路径。这样,用户在点击不同图标时,可以跳转到对应的页面。
自定义组件使用
最后,我们还定义了小程序中使用的自定义组件:
javascript
"usingComponents": {
"van-search": "@vant/weapp/search/index"
}
这里使用了Vant Weapp的搜索组件,它是一个流行的小程序UI库,提供了丰富的组件来简化开发过程。
结语
通过上述配置,我们可以看到微信小程序的app.json
文件如何控制全局样式和底部导航栏的设置。这只是一个简单的示例,微信小程序的配置非常灵活,可以根据实际需求进行调整。希望这篇文章能帮助你在开发自己的小程序时,更好地理解和配置底部导航栏。
完整代码
app.json
javascript
{
"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"
}
}