小程序-模板与配置-全局配置

全局配置

1.全局配置文件及常用的配置项

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

1. pages
   记录当前小程序所有页面的存放路径
2. window
   全局设置小程序窗口的外观
3. tabBar
   设置小程序底部的tarBar效果
4. style
   是否启用新版的组件样式

全局配置-window

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

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

3.设置导航栏里的标题

设置步骤：app.json->window->navigationBarTitleText

4.设置导航栏里的背景色

设置步骤：app.json->window->navigationBarBackgroundColor

5.设置导航栏的标题颜色

设置步骤：app.json->window->navigationBarTextStyle
注意：navigationBarTextStyle的可选值只有white和black

6.全局开启下拉刷新功能

概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动动作，从而重新加载页面数据的行为。
设置步骤：app.json->window->把enablePullDownRefresh的值设为true
注意：在app.json中设置会 作用于每个小程序页面。

7.设置下拉刷新后窗口的背景色

当全局开启下拉刷新之后，默认的窗口背景色为白色。若要自定义下拉刷新窗口背景色，设置步骤为：app.json->window->为backgroundColor指定16进制的颜色值#efefef。效果如下：

8.设置下拉刷新时的loading样式

当全局开启下拉刷新功能之后，默认窗口的loading样式为白色，如果要更改loading样式的效果，设置步骤为app.json->window->为backgroundTextStyle指定dark值。效果如下：
注意：backgroundTextStyle可选值只有light和drak。

9.设置上拉触底的距离

概念上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。
设置步骤：app.json->window->为onReachBottomDistance设置新的数值。
注意：默认触底距离是50px，如果没有特殊要求，建议使用默认值即可。

全局配置-tabBar

1.什么是tabBar？

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

注意：tabBar只能配置最少2个，最多5个tab页签。
当渲染顶部tabBar时，不显示icon，只显示文本。

2.tabBar的6个组成部分

1. backgroundColor：tabBar的背景色
2. selectedIconPath：选中时的图片路径
3. borderStyle：tab上边框的颜色
4. iconPath：未选中时的图片路径
5. selectedColor：tab上的文字选中时的颜色
6. color：tab上文字的默认（未选中）的颜色

3.tabBar节点的配置项

在app.json文件中新增一个配置项如下，与window平级

 "tabBar": {
    "list": [{
      "pagePath": "pagePath",
      "text": "text",
      "iconPath": "iconPath",
      "selectedIconPath": "selectedIconPath"
    }]
  },

4.每个tab项的配置选项

全局配置-案例：配置tabBar

实现如下效果：

实现步骤：

1. 拷贝图标资源
   将图片资源拷贝到项目目录。
2. 新建三个对应的tab页面
   在app.json中的pages节点新增页面。
3. 配置tabBar选项
   打开app.json配置文件，和pages、window平级，新增tabBar节点。
   tabBar节点中，新增list数组，这个数组中存放的是每个tab的配置项。
   在list数组中，新增每一个tab项的配置对象。对象中包含的属性如下：
   pagePath指定当前tab对应的页面路径【必填】
   text指定当前tab上按钮的文字【必填】
   iconPath指定当前tab未选中时候的图片路径【可选】
   selectedIconPath指定当前tab被选中后高亮的图片路径