【WeChat MiniProgram】003 - 底部导航栏tabBar的设置以及顶部导航栏的设置

底部导航栏tabBar

tabBar的本质

对若干一级页面的入口链接

tabBar的配置

1. 准备导航栏所需要的图标，并放置于根目录名为icons的文件夹中；

2. 在全区配置文件app.json中增添"tabBar"属性
   示例代码：

"tabBar":{
    "list":[
      {
        "text": "每周推荐",
        "pagePath": "pages/weekly/weekly",
        "iconPath": "images/icons/ExploreG.png",
        "selectedIconPath": "images/icons/Explore.png"
      },
      {
        "text": "关于",
        "pagePath": "pages/about/about",
        "iconPath": "images/icons/UserG.png",
        "selectedIconPath": "images/icons/User.png"
      }
    ]

注：{ }括起来的是对象，[ ]是对象数组

3. 配置导航栏中文字选中颜色和非选中颜色

"tabBar":{
    "color": "#dbdbdb",
    "selectedColor": "#2c2c2c"
    }

顶部导航栏

顶部导航栏相关属性

1. 导航栏标题文字
   "navigationBarTitleText" : "About"

2. 导航栏背景颜色
   "navigationBarBackgroundColor" : "#fff"

3. 导航栏标题文字样式
   "navigationBarTextStyle" : "black"

顶部导航栏的配置

1. 页面.json配置文件

2. 全局配置文件app.json中的window属性
   示例代码：

"window" : {
    "navigationBarTextStyle" : "black",
    "navigationBarBackgroundColor" : "#fff",
    "navigationBarTitleText": "电影周周看"
}

注：若某些属性在页面的配置文件中重复定义，则全局属性被覆盖