先上干货 –
在小程序开发工具中自动生成的app.json文件中添加:
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/cart/cart",
"pages/user/userInfo"
],
"tabBar": {
"color": "#a9b7b7",
"selectedColor": "#11cd6e",
"borderStyle": "white",
"list": [
{
"selectedIconPath": "images/首页.png",
"iconPath": "images/首页.png",
"pagePath": "pages/index/index",
"text": "首页"
},
{
"selectedIconPath": "images/消息.png",
"iconPath": "images/消息.png",
"pagePath": "pages/logs/logs",
"text": "消息"
},
{
"selectedIconPath": "images/购物车.png",
"iconPath": "images/购物车.png",
"pagePath": "pages/cart/cart",
"text": "购物车"
},
{
"selectedIconPath": "images/我的.png",
"iconPath": "images/我的.png",
"pagePath": "pages/user/userInfo",
"text": "我的"
}
]
},
"sitemapLocation": "sitemap.json"
}
这里要注意了pagePath这个绝对路径需要在pages中添加进去
展示目录结构:
展示效果图:
总结:当前实现方案是参考了官方文档实现https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar