全局配置-window和tabBar

一、全局配置文件及常用的配置项

小程序根目录下的app.json文件是小程序的全局配置文件，常用的配置项如下：

1.pages：记录当前小程序所有页面的存放路径

2.window：全局设置小程序窗口的外观

3.tabBar：设置小程序底部的tabBar效果

4.style：是否启用新版的组件样式

二、window

1.小程序窗口的组成部分

（1）导航栏区域

（2）背景区域(默认不可见，下拉才可见)

2.了解window节点常用的配置项

（1）设置导航栏标题

app.json -> window -> navigationBarTitleText

需求：把导航条上的标题，从默认的"Weixin"修改为"NA"

（2）设置导航栏的背景色

app.json -> window -> navigationBarBackgroundColor

注意：设置导航栏的背景色时，只支持16进制的值，不支持像red、green这种文本类型的值

（3）设置导航栏的标题颜色

app.json -> window -> navigationBarTextStyle

注意：navigationBarTextStyle 的可选值只有black和white

（4）全局开启下拉刷新功能

下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。

app.json -> window -> 把enablePullDownRefresh的值设为true

注意：在app.json中启用下拉刷新功能，会作用于每个小程序页面

（5）设置下拉刷新时窗口的背景色

当全局开启下拉刷新功能之后，默认的窗口背景为白色

自定义下拉刷新窗口背景色：

app.json -> window -> 为backgroundColor 指定16进制的颜色值 #efefef

注意：backgroundTextStyle 的可选值只有light和dark

（6）设置上拉触底的距离

上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为

app.json -> window -> 为onReachBottomDistance 设置新的数值

注意：默认距离是50px，如果没有特殊需求，使用默认值即可

二、tabBar

1.tabBar

tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换，小程序中将其分为：

（1）底部tabBar

（2）顶部tabBar

注意：

（1）tabBar中只能配置最少2个，最多5个tab页签

（2）当渲染顶部tabBar时，不显示icon，只显示文本

2.tabBar的6个组成部分

（1）backgroundColor：tabBar的背景色

（2）selectedIconPath：选中时的图片路径

（3）borderStyle：tabBar上边框的颜色

（4）iconPath：未选中时的图片路径

（5）selectedColor：tab上的文字选中时的颜色

（6）color：tab上的文字默认（未选中）的颜色

3.tabBar节点的配置项

4.每个tab项的配置选项

css 复制代码

{
  "pages": [
    "pages/index/index",
    "pages/test/test",
    "pages/logs/logs"
  ],  
  "window": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "NA",
    "navigationBarBackgroundColor": "#2b4b6b",
    "enablePullDownRefresh":true,
    "backgroundColor":"#efefef"
  },

  "tabBar":{
    "list":[
      {
        "pagePath":"pages/index/index",
        "text":"index"
      },
      {
        "pagePath":"pages/index/index",
        "text":"test"
      }
    ]
  },

  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}