微信小程序学习——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

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	string	是	页面路径，必须在 pages 中先定义
text	string	是	tab 上按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。

HexColor（十六进制颜色值），如"#ff00ff"

配置示例

{
  "pages": [
  "pages/index/index",
   "pages/logs/index"
   ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
  	"color"："#000", //文字默认颜色
    "selectedColor"："#1ADD19", //文字选中时的颜色
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/wxfs.png", //默认图片
        "selectedIconPath": "images/wxf.png", //选中图片
        "text": "主页"
      },
      {
        "pagePath": "pages/loginUser/loginUser",
        "iconPath": "images/wxmys.png",
        "selectedIconPath": "images/wxmy.png",
        "text": "我的"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]
}

在list中需要按钮的图片，在小程序中图片直接放在与app.json文件同级即可。