微信小程序tabBar的在app.JSON中全局配置

全局配置：app.json

　　微信小程序的全局配置保存在app.json文件中。开发者通过使用app.json来配置页面文件（pages）的路径、窗口（window）表现、设定网络超时时间值（networkTimeout）以及配置多个切换页（tarBar）等。

　　首先看一个典型的全局配置app.json文件

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/mine/mine"

  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle":"black"
  },

  "tabBar": {
   "color": "#a9b7b7",
   "selectedColor": "#11cd6e",
   "borderStyle": "black" ,
   "list": [{
     "selectedIconPath": "images/icon_consult_press.png",
     "iconPath": "images/icon_consult.png",
     "pagePath": "pages/index/index",
     "text": "首页"
   }, {
     "selectedIconPath": "images/icon_invest_press.png",
     "iconPath": "images/icon_invest.png",
     "pagePath": "pages/logs/logs",
     "text": "一元投"
   },{
     "selectedIconPath": "images/icon_mine_press.png",
     "iconPath": "images/icon_mine.png",
     "pagePath": "pages/mine/mine",
     "text": "我的"
   }
   ]
 }
}

 

这里我先解释一下这些属性是什么意思：

tabBar  指底部的 导航配置属性

color  未选择时 底部导航文字的颜色

selectedColor  选择时 底部导航文字的颜色

borderStyle  底部导航边框的样色（注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条）

list   导航配置数组

selectedIconPath 选中时 图标路径

iconPath 未选择时 图标路径

pagePath 页面访问地址

text  导航图标下方文字

 

 

这里需要注意一些小问题：

1、每个页面的json文件都不能去掉navigationBarTitleText这个属性。否则会报错

2、

 "pages":[
 3     "pages/index/index",
 4     "pages/logs/logs",
 5     "pages/mine/mine"
 6     
 7   ],
这个页面的注册一定要注意，第一个一定是要是最先显示的，否则会出现底部导航看不到。