【微信小程序】WXSS模板样式 —

1.1、什么是样式导入

使用WXSS提供的 @import 语法，可以导入外联的样式表。

1.2、WXSS 和 CSS 的关系

WXSS具有CSS大部分特性，同时，WXSS还对CSS进行了扩充以及修改，以适应微信小程序的开发。与CSS相比，WXSS扩展的特性有：

rpx 尺寸单位

@import 样式导入

1.3、rpx 的实现原理

rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份（即：当前屏幕的总宽度为750rpx）。

在较小的设备上，1rpx所代表的宽度较小

在较大的设备上，1rpx所代表的宽度较大

小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。

1.4、@import 的语法格式

@import 后跟需要导入的外联样式表的相对路径，用；表示语句结束。示例如下：

//外部样式 common.wxss
.small-p{padding:5px;
}//引入外部样式 app.wxss
@import "common.wxss";
.middle-p{padding:15px;
}

2.1、全局样式

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

2.2、局部样式

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

注意：

（1）当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式

（2）当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

全局配置

3.1、全局配置文件及常用的配置项

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

（1）pages

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

（2）window

全局设置小程序窗口的外观

（3）tabBar

设置小程序底部的tabBar效果

（4）style

是否启用新版的组件样式

3.2、小程序窗口的组成部分

3.3、了解window节点常用的配置项

属性名	类型	默认值	说明
navigationBarTitleText	String	字符串	导航栏标题文字内容
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black / white
backgroundColor	HexColor	#ffffff	窗口的背景颜色
backgroundTextStyle	String	dark	下拉loading的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px

3.3.1、设置导航栏的标题

设置步骤：app.json => window => navigationBarTitleText

需求：把导航条上的标题，从默认的"WeChat" 修改为 “小程序学习” ，效果如图所示

3.3.2、设置导航栏的背景色

设置步骤：app.json => window => navigationBarBackgroundColor

需求：把导航栏标题的背景色，从默认的 #fff 修改为 #2E62E2

3.3.3、设置导航栏的标题颜色

设置步骤：app.json => window => navigationBarTextStyle

需求：把导航栏上的标题，从默认的 black 修改为 white，效果如图所示：

3.3.4、全局开启下拉刷新功能

概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。设置步骤：app.json => window => enablePullDownRefresh 的值设置为true

注意：在app.json 中启用下拉刷新功能，会作用于每个小程序页面！

3.3.5、设置下拉刷新时窗口的背景色

当全局开启下拉刷新功能之后，默认的窗口背景为白色。如果自定义下拉刷新窗口背景色，设置步骤为：app.json => window => 为backgroundColor 指定16进制的颜色值 #efefef。效果如下：

3.3.6、设置下拉刷新时loading的样式

当全局开启下拉刷新功能之后，默认窗口的 loading 样式为白色，如果要更改 loading 样式的效果，设置步骤为 app.json => window => 为 backgroundTextStyle 指定 dark 值。效果如下：

3.3.7、设置上拉触底的距离

概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

设置步骤： app.json => window => 为onReachBottomDistance 设置新的数值

注意：默认距离为50px，如果没有特殊需求，建议使用默认值即可。

4.1、tabBar

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

底部 tabBar

顶部 tabBar

注意：

tabBar中只能配置最少2个、最多5个 tab页签

当渲染顶部tabBar时，不显示icon，只显示文本

4.2、tabBar的6个组成部分

backgroundColor：tabBar的背景色

selectedconPath：选中时的图片路径

borderStyle：tabBar上边框的颜色

iconPath：未选中时的图片路径

selectedColor：tab上的文字选中时的颜色

color：tab上文字的默认（未选中）颜色

4.3、tabBar节点的配置项

属性	类型	必填	默认值	描述
position	String	否	bottom	tabBar的位置，仅支持 bottom / top
borderStyle	String	否	black	tabBar 上边框的颜色，仅支持 black / white
color	HexColor	否		tab 上文字的默认（未选中）颜色
selectedColor	HexColor	否		tab上的文字选中时的颜色
backgroundColor	HexColor	否		tabBar的背景色
list	Array	是		tab页签的列表，最少2个、最多5个tab

示例代码如下：

4.4、每个tab项的配置选项

属性	类型	必填	描述
pagePath	String	是	页面路径，页面必须在 pages 中预先定义
text	String	是	tab上显示的文字
iconPath	String	否	未选中时的图标路径；当 postion 为 top 时，不显示 icon
selectedIconPath	String	否	选中时的图标路径；当 postion 为 top 时，不显示 icon

示例代码如下：

页面配置

5.1、页面配置文件的作用

小程序中，每个页面都有自己的.json配置文件，用来对当前页面的窗口外观、页面效果等进行配置。

5.2、页面配置和全局配置的关系

小程序中，app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现。

如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的.json 配置文件” 就可以实现这种需求。

注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

5.3、页面配置中常用的配置项

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	当前页面导航栏背景颜色，如#000000
navigationBarTextStyle	String	white	当前页面导航栏标题颜色，仅支持 black / white
navigationBarTitleText	String		当前页面导航栏标题文字内容
backgroundColor	HexColor	#ffffff	当前页面窗口的背景色
backgroundTextStyle	String	dark	当前页面下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否为当前页面开启下拉刷新的效果
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px