Web前端开发资源网首先，您可以在阿里图标库选择合适的图标，使用方法参见我之前写的文章：阿里巴巴矢量图标库 iconfont 的使用方法
我选了几个图标，选中不选中颜色有个区分：
底部菜单最少设置2个最多可以设置5个。
找到项目根目录的配置文件 app.json 加入如下配置信息：
"tabBar": {
"color": "#a9b7b7",
"selectedColor": "#E50012",
"borderStyle": "white",
"list": [
{
"selectedIconPath": "images/index_h.png",
"iconPath": "images/index.png",
"pagePath": "pages/index/index",
"text": "首页"
},
{
"selectedIconPath": "images/tel_h.png",
"iconPath": "images/tel.png",
"pagePath": "pages/index/index",
"text": "联系我们"
},
{
"selectedIconPath": "images/my_h.png",
"iconPath": "images/my.png",
"pagePath": "pages/index/index",
"text": "我的"
}
]
}tabBar 是底部菜单
color 字体颜色
borderStyle tabbar上边框的颜色， 仅支持 black/white
list 列表
selectedIconPath 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效
iconPath 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片
pagePath 页面路径，必须在 pages 中先定义
text tab上按钮文字
参考文档：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
效果如图：
未经允许不得转载：Web前端开发资源网 » 【笔记】微信小程序通过app.json设置底部导航
推荐阅读：
