WXSS模板样式-rpx

• rpx是什么
  是小程序独有的，用来解决屏幕适配的尺寸单位。
• rpx实现原理
  由于不同设备屏幕大小不同，为实现屏幕的自动适配，rpx把所有的设备屏幕在宽度上等分为750份即当前屏幕宽度为750rpx。

这样在不同设备上，1rpx代表的宽度也不一样，

• rpx与px之间的单位换算
  例如iPhone6屏幕宽度为375px，则1rpx=375/750rpx

WXSS模板样式的导入

• 什么是样式导入
  使用WXSS提供的@import语法，可以导入外联的样式表。
• @import的语法格式
  @import后跟需要导入的外联样式表的相对路径，用；表示语句结束。例如：@import "common.wxss"

全局样式和局部样式

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

注意：
（1）当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式。
（2）当局样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式。

全局配置

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

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

全局配置window

• window节点常用的配置项

tabBar配置项

• 什么是tabBar
  tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：底部tabBar、顶部tabBar。

注意：
（1）tabBar中只能配置最少2个、最多5个tab页签。
（2）当渲染顶部tabBar时，不显示icon，只显示文本。

• tabBar的6个组成部分
  （1）backgroundColor：tabBar的背景色

（2）selectedIconPath：选中时的图片路径
（3）borderStyle:tabBar上边框的颜色
（4）iconPath:未选中时的图片路径
（5）selectedColor:tab上的文字选中时的颜色
（6）color：tab上文字的默认颜色

• tabBar节点的配置项

• 每个tab项的配置选项

页面配置

• 页面配置文件的作用
  小程序中，每个页面都有自己的.json配置文件，用来对当前页面的窗口外观、页面效果进行配置。
• 页面配置和全局配置的关系
  小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现。

如果某些小程序页面想要拥有特殊的窗口表现，此时，页面级别的.json配置文件就可以实现这种需求。
注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

• 页面配置中常用的配置项