微信小程序--8（全局配置）

目录

一、概念

二、window

（一） 小程序窗口组成

（二） window节点的常用配置项

（三）tabBar

---

一、概念

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

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

二、window

（一） 小程序窗口组成

（二） window节点的常用配置项

属性名	类型	默认值	说明
navigationBarTitleText	String	字符串	导航栏标题文字内容
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色
navigationBarTextStyle	String	white	导航栏标题颜色，只能是black/white
backgroundColor	HexColor	#ffffff	窗口背景色
backgroundTextStyle	String	dark	下拉loading的样式，仅支持dark/light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
onReachBottomDistance	Number	50px	页面上拉触底事件触发时距离页面底部的距离

1、设置导航栏标题

步骤：app.json---window---navgitionBarTitleText

示例：

2、设置导航栏的背景色

步骤：app.json--window---navigationBarBackgroundColor

示例：

注意：只支持十六进制的颜色

3、设置导航栏的标题颜色

步骤：app.json--window---navigationBarTextStyle

示例：

注意：颜色只能是black/white

4、全局开启下拉刷新功能

概念：指通过手指下拉滑动，使页面重新加载的操作。

步骤：app.json--window---enablePullDownRefresh（值设为true）

示例：

注意：在app.json里面开启的下拉刷新功能，是作用于每个页面的。

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

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

修改背景颜色步骤：app.json--window---backgroundColor

示例：

6、设置下拉刷新时loading的样式

默认loading的颜色为白色，若要更改

步骤：app.json--window---backgroundTextStyle

示例：

注意：仅支持dark/light

7、设置上拉触底的距离

概念：上拉触底是指通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

步骤：app.json--window---onReachBottomDistance

示例：

注意：页面上拉触底事件触发时距离页面底部的距离默认50px，建议没有特殊需求，无需修改。

（三）tabBar

1、概念：是移动端应用常见的页面效果，用于实现多页面的快速切换。

2、分类：

• 底部tabBar
• 顶部tabBar

3、注意：

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

4、组成部分

• backgroundColor：背景色
• selectedIconPath：选中的图片路径
• selectedColor：文字选中时的颜色
• borderStyle：tabBar上边框的颜色
• iconPath：未选中的图片的路径
• color：文字默认颜色

5、tarBar的配置项

属性	类型	必填	默认值	描述
position	String	否	bottom	tabBar的位置，仅支持bottom/top
borderStyle	String	否	black	tabBar上边框的颜色，仅支持black/white
selectedColor	HexColor	否		文字选中时的颜色
color	HexColor	否		文字默认颜色
backgroundColor	HexColor	否		背景色
list	Array	是		页签的列表，少2个，最多5个

6、每个tab项的配置选项

属性	类型	必填	描述
pagePath	String	是	页面路径，页面必须在pages中预先定义
text	String	是	tab上显示的文字
iconPath	String	否	未选中的图标路径，当position为top时，不显示icon
selectedconPath	String	否	选中的图标路径，当position为top时，不显示icon

示例：