1. 官方文档指南
-
全局配置说明: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
-
TabBar底部导航栏: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar
1. 全局配置
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象,有以下属性:
配置项
属性 | 类型 | 必填 | 描述 | 最低版本 |
---|---|---|---|---|
entryPagePath | string | 否 | 小程序默认启动首页 | - |
pages | string[] | 是 | 页面路径列表 | - |
window | Object | 否 | 全局的默认窗口表现 | - |
tabBar | Object | 否 | 底部 tab 栏的表现 | - |
networkTimeout | Object | 否 | 网络超时时间 | - |
debug | boolean | 否 | 是否开启 debug 模式,默认关闭 | - |
functionalPages | boolean | 否 | 是否启用插件功能页,默认关闭 | 2.1.0 |
subpackages | Object[] | 否 | 分包结构配置 | 1.7.3 |
workers | string | 否 | Worker 代码放置的目录 | 1.9.90 |
requiredBackgroundModes | string[] | 否 | 需要在后台使用的功能,如「音乐播放」 | - |
requiredPrivateInfos | string[] | 否 | 调用的地理位置相关隐私接口 | - |
plugins | Object | 否 | 使用到的插件 | 1.9.6 |
更多详情,请阅读官方文档指南
2. tabBar定义
tabBar
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
属性 | 类型 | 必填 | 默认值 | 描述 | 最低版本 |
---|---|---|---|---|---|
color | HexColor | 是 | - | tab上的文字默认颜色,仅支持十六进制颜色 | - |
selectedColor | HexColor | 是 | - | tab上的文字选中时的颜色,仅支持十六进制颜色 | - |
backgroundColor | HexColor | 是 | - | tab的背景色,仅支持十六进制颜色 | - |
borderStyle | string | 否 | black | tabBar上边框的颜色,仅支持black / white | - |
list | Array | 是 | - | tab列表,详见list属性说明,最少2个、最多5个tab | - |
position | string | 否 | bottom | tabBar的位置,仅支持bottom / top | - |
custom | boolean | 否 | false | 自定义tabBar,见详情 | 2.5.0 |
温馨提示:
tabBar的配置在小程序根目录下的 app.json
3. 代码实现过程
"tabBar":{
"color":"#8a8a8a",
"selectedColor": "#f3514f",
"list": [
{
"pagePath": "pages/home/home",
"text":"首页",
"iconPath":"/assets/img-home-normal.png",
"selectedIconPath":"/assets/img-home-selected.png"
},
{
"pagePath": "pages/cate/cate",
"text":"分类",
"iconPath":"/assets/img-cate-normal.png",
"selectedIconPath":"/assets/img-cart-selected.png"
},
{
"pagePath": "pages/cart/cart",
"text":"购物车",
"iconPath":"/assets/img_cart-normal.png",
"selectedIconPath":"/assets/img-cart-selected.png"
},
{
"pagePath": "pages/mine/mine",
"text":"我的",
"iconPath":"/assets/img-mine-normal.png",
"selectedIconPath":"/assets/img-mine-selected.png"
}
]
},