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