2.路由、导航栏和tabbar

app.json全局配置文档
app.json 全局配置微信小程序，路由、导航栏、tabbar、设置网络超时时间等。

app.json全局配置

---

一、路由 Pages

路由 Pages文档

"pages": [
    "pages/index/index",
    "pages/logs/logs"
],

---

二、顶部导航 Window

顶部导航 Window文档

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

image.png

app.json页面可以全局设置顶部导航样式

属性	描述
backgroundTextStyle	下拉 loading 的样式，仅支持 dark / light
navigationBarBackgroundColor	导航栏背景颜色，如 #000000
navigationBarTitleText	导航栏标题文字内容
navigationBarTextStyle	导航栏标题颜色，仅支持 black / white
enablePullDownRefresh	是否开启当前页面的下拉刷新 true / false

"window": {
    "backgroundTextStyle": "dark", 
    "navigationBarBackgroundColor": "#0081ff", 
    "navigationBarTitleText": "教育Top10", 
    "navigationBarTextStyle": "white",  
    "enablePullDownRefresh": true 
},

单独页面设置导航文字内容、背景颜色、文字颜色

单独页面设置导航

{
    "navigationBarTitleText": "找机构"
}

自定义顶部导航栏，设置之后默认的标题就没有了，要自定义标题的话在.wxml里写

{
    "navigationStyle": "custom"
}

---

三、底部 TabBar

TabBar文档

image.png

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

属性	描述
color	tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	tab 的背景色，仅支持十六进制颜色
borderStyle	tabbar上边框的颜色， 仅支持 black / white
pagePath	路由：跳转到指定页面
text	底部导航文字
iconPath	底部导航图标、未选中状态
selectedIconPath	底部导航图标、选中状态

"tabBar": {
    "color": "#333",
    "selectedColor": "#0081ff",
    "borderStyle": "black",
    "backgroundColor": "#fff",
    "list": [
        {
            "pagePath": "pages/tabBar/tabBar_home/tabBar_home",
            "text": "首页",
            "iconPath": "images/Tabbar/home.png",
            "selectedIconPath": "images/Tabbar/home_cur.png",
        },
        {
            "selectedIconPath": "images/Tabbar/school_cur.png",
            "iconPath": "images/Tabbar/school.png",
            "pagePath": "pages/tabBar/tabBar_School/tabBar_School",
            "text": "找机构"
        },
        {
            "selectedIconPath": "images/Tabbar/kindergarten_cur.png",
            "iconPath": "images/Tabbar/kindergarten.png",
            "pagePath": "pages/tabBar/tabBar_Kindergarten/tabBar_Kindergarten",
            "text": "找幼儿园"
        },
        {
            "selectedIconPath": "images/Tabbar/my_cur.png",
            "iconPath": "images/Tabbar/my.png",
            "pagePath": "pages/tabBar/tabBar_myCenter/tabBar_myCenter",
            "text": "个人中心"
        }
    ]
}