【笔记】微信小程序通过app.json设置底部导航

• 2019 年 11 月 13 日
• 筆記

我选了几个图标，选中不选中颜色有个区分：

底部菜单最少设置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

效果如图：