微信小程序--26(全局配置-1)

一、全局配置文件

1.标志

• app.json

2.配置项

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

• window
  全局配置小程序窗口配置

• tabBar
  设置小程序底部的tabBar效果

• style
  是否启用新版本的组将样式

3.window

• 导航栏区域
  navigationBar

• 背景区域
  background

• 页面主体区域
  用来显示 wxml中的布局

二、window

1.导航栏

• navigationBarTitleText
  导航栏标题文字内容
• 步骤：app.json→window→navigationBarTitleText

• navigationBarBackgroundColor
  导航栏背景颜色
• 步骤：app.json→window→navigationBarBackgroundColor

• navigationBarTextStyle
  导航栏表一颜色 黑/白
• 步骤：app.json→window→navigationBarTextStyle

2.窗口背景

• backgroundColor
  窗口背景色
• 步骤：app.json→window→backgroundColor

• backgroundTextStyle(小圆点)
  下拉loading的样式
• 步骤：app.json→window→backgroundTextStyle

3.页面效果

• enablePullDownRefresh
  是否全局开启下拉刷新
  下拉刷新，重新加载页面
• 步骤：app.json→window→enablePullDownRefresh设置为true

• onReachBottomDistance
  页面上拉触底事件时距页面底部举例

三、tabBar

1.作用

• 实现多页面的快速切换

2.类型

• 底部 tabBar
• 顶部 tabBar

3.注意点

• 只能2-5项
• 顶部只能显示文本
• 在pages处tabBar页面必须在前面

4.组成

• backgroundColor
  tabBar的背景颜色

• selectedIconPath
  选中图片路径

• borderStyle
  tabBar上边框的颜色

• iconPath
  未选中图片路径

• selectedColor
  选择文字的颜色

• color
  未选择文字的颜色

5.配置选项

• pagePath
  页面路径

• text
  tab上显示的文字

• iconPath
  选中图片路径

• selectedIconPath
  选中图片路径

6.练习

• 1.拷贝图标资源

• 2.新建3个对应的tab页面

• 3.配置tabBar选项
  app.json中新增tabBar节点
  在tabBar中新增list数组
  配置tab项的配置对象