小程序2（导航栏，底栏的相关设置）

app.json
必须有一个对象，用{}表示一个对象
不要粘贴这些代码，粘贴上去会报错，因为json文件不支持注释

{
//pages所有的页面都要在此处说明路径
"pages":[
"pages/home/home",
"pages/about/about"
],
//设置全局窗口的颜色、背景之类
"window":{
//导航栏背景颜色  颜色必须用十六进制表示
 "navigationBarBackgroundColor": "#ff5777" ,
//导航栏的文本颜色 如上面的三点标志，电量标志之类 只支持白色和黑色
 "navigationBarTextStyle":"black"
//导航栏为小程序加标题
"navigationBarTitleText":"Hello"
//ios系统时，下拉整个页面露出的背景色
"backgroundColor": "#000000",
//安卓系统，设置界面可以下拉，一般不进行全局设置，而是对于某个页面单独设置
 "enablePullDownRefresh": true，
//下拉界面时，显示的加载图标的样式，只有light和dark值可选
 "backgroundTextStyle": "light"
 },


 //底部tabBar的相关设置 alt+shift+f可以对代码进行格式化，使代码结构清晰
 //list可以看作一个数组，最少需要两个项目，每个项目可以看作是一个超链接
 "tabBar": {
 //修改图标下显示的文字颜色 与list是同级的
 	 "selectedColor": "#000000",
    "list": [
    //item1
      {
      //点击图标后，需要跳转的页面路径
      "pagePath": "pages/home/home",
      //图标下方显示的文字
      "text": "主菜单",
      //图标路径，需要自己找图片 图片大小不能超过40kb 81*81px
      "iconPath": "assets/tabbar/home.png",
       //选中图标后图标进行改变的图片
      "selectedIconPath": "assets/tabbar/home_act.png"
    },
    //item2
    {
      "pagePath": "pages/about/about",
      "text": "选择",
      "iconPath": "assets/tabbar/select.png",
      "selectedIconPath": "assets/tabbar/select__act.png"
    }  
    ]
  }
  
 }

上述操作完成后，效果如下：

page.json
可以独立设置导航栏的标题，颜色之类
页面配置优先级大于全局配置，和局部变量与全局变量的性质一样

{
  "usingComponents": {},
  //对于导航栏的设置不用使用app.json中的window关键字
  "navigationBarTitleText":"分类",
  "navigationBarBackgroundColor":"#ff0000"
  
}

page.json完成后，跳转页面显示如下：