一、全局配置文件
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项的配置对象