微信小程序知识点（二）

全局样式与局部样式

• 全局样式
  定义在 app.wxss 中的样式为全局样式，作用于每一个页面。

• 局部样式
  在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

注意：当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式效果！

app.json配置文件的作用

• pages 数组：配置小程序的页面路径（路由）

• window 对象：用于设置小程序的状态栏、导航条、标题、窗口背景色

• tabBar 对象：配置小程序的tab栏效果

注意

• pages数组的第一项代表小程序的初始页面（首页）。

• 小程序中新增/减少页面，都需要对 pages 数组进行修改。

小程序窗口组成

• navgationBar（导航条区域）
  navigationBarBackground
  Color：“十六进制的颜色”
  navigationBarTitleText：导航栏标题
  navigationBarTextStyle：导航栏标题颜色（只接受黑色和白色）

• background（背景区域，下拉显示）

• page（页面主体，wxml布局）

1. 全局开启下拉刷新功能
   app.json -> window -> 把 enablePullDownRefresh 的值设置为 true

2. 设置下拉刷新窗口的背景色
   app.json -> window -> 为 backgroundColor 指定16进制颜色值 #eee

3. 设置下拉 loading 的样式
   app.json -> window -> 为 backgroundTextStyle 指定 dark 值

4. 设置上拉触底的距离
   设置步骤： app.json -> window -> 为 onReachBottomDistance 设置新的数值
   注意：默认距离为50px，如果没有特殊需求，建议使用默认值即可；

tabBar

用于实现多页面的快速切换；
小程序中通常将其分为底部tabBar和顶部tabBar。
注意：tabBar中，只能配置最少2个、最多5个 tab 页签，当渲染顶部tabBar的时候，不显示icon，只显示文本

• tabBar组成:
  backgroundColor：导航条背景色
  selectedIconPath：选中时的图片路径
  borderStyle：tabBar上边框的颜色
  iconPath：未选中时的图片路径
  selectedColor：tab 上的文字选中时的颜色
  color：tab 上的文字默认（未选中）颜色

list：tab 的列表，
最少2个、最多5个 tab（必须设置）
position：tabBar的位置，
仅支持bottom/top

ist的配置项
pagePath ：页面路径，必须在 pages 中先定义（必须设置）
text：tab 上按钮文字（必须设置）
iconPath：未选中图片路径；icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图。当?postion?为top时，不显示 icon
selectedIconPath：选中时的图片路径；
icon 大小限制为40kb，
建议尺寸为 81px * 81px，不支持网络图片。当postion为top时，不显示 icon

---

页面级别和全局级别配置的关系

每一个页面配置
navigationBarBackgroundColor：导航栏背景颜色
navigationBarTextStyle：导航栏标题颜色，仅支持?black?/?white
navigationBarTitleText：导航栏标题文字内容
backgroundColor：窗口的背景色

backgroundTextStyle：下拉loading的样式，仅支持dark/light
enablePullDownRefresh:是否全局开启下拉刷新
onReachBottomDistance:页面上拉触底事件触发时距页面底部距离，
单位为px。（默认50px）
disableScroll:设置为true,则页面整体不能上下滚动；只在页面配置中有效，无法在app.json中设置该项

页面级别配置优先于全局配置生效。

注意：页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现。