微信小程序之app.json与tabBar

app.json文件是小程序的全局配置文件，主要包含了小程序所有页面的路径地址、导航栏样式等。
文件内容为一个 JSON 对象，有以下属性：
1.pages(必填，其余所有属性都不是必须的）
用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。 数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。
例如开发中

   "pages": [     
    "pages/index/index",    
      "pages/list/list",    
        "pages/set/set",    
        "pages/edit/edit",      
        "pages/ceshi/ceshi"   
        ],

那么index页就是首页。

2.window
用于设置小程序的状态栏、导航条、标题、窗口背景色。
本例

json是不能写注释的！！！！ 加上之后报错哈哈。
3.tarBar
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

我们实现的代码：

  "tabBar": {
      "color": "#7a7a7a",
      "selectedColor": "#007aff",
      "backgroundColor": "#ffffff",
      "borderStyle": "black",
      "position": "bottom",
      "list": [
         {
            "pagePath": "pages/index/index",
            "text": "决定",
            "iconPath": "images/icon_tab_index_81.png",
            "selectedIconPath": "images/icon_tab_index_select_81.png"
         },
         {
            "pagePath": "pages/list/list",
            "text": "其他",
            "iconPath": "images/icon_tab_list_81.png",
            "selectedIconPath": "images/icon_tab_list_select_81.png"
         },
         {
            "pagePath": "pages/set/set",
            "text": "设置",
            "iconPath": "images/icon_tab_set_81.png",
            "selectedIconPath": "images/icon_tab_set_select_81.png"
         }

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。
tab 按数组的顺序排序，每个项都是一个对象。
对象的属性有pagePath（页面路径，必填），text（必填，按钮文本），
还有iconPath和selectedIconPath 选中的图片路径。

那么最终完整的json页面的代码为：

{
   "pages": [
      "pages/index/index",
      "pages/list/list",
      "pages/set/set",
      "pages/edit/edit",
      "pages/ceshi/ceshi"
   ],
   "window": {
      "backgroundTextStyle": "light",                  
      "navigationBarTitleText": "",                   
      "navigationBarBackgroundColor": "#ffffff",        
      "navigationBarTextStyle": "black",               
      "backgroundColor": "#FAE8B6"                  
   },
   "tabBar": {
      "color": "#7a7a7a",
      "selectedColor": "#007aff",
      "backgroundColor": "#ffffff",
      "borderStyle": "black",
      "position": "bottom",
      "list": [
         {
            "pagePath": "pages/index/index",
            "text": "决定",
            "iconPath": "images/icon_tab_index_81.png",
            "selectedIconPath": "images/icon_tab_index_select_81.png"
         },
         {
            "pagePath": "pages/list/list",
            "text": "其他",
            "iconPath": "images/icon_tab_list_81.png",
            "selectedIconPath": "images/icon_tab_list_select_81.png"
         },
         {
            "pagePath": "pages/set/set",
            "text": "设置",
            "iconPath": "images/icon_tab_set_81.png",
            "selectedIconPath": "images/icon_tab_set_select_81.png"
         }
      ]
   }
}

实现的效果呢 页面下方为

点中和不点中颜色是不一样的。