小程序|微信小程序 - 04_wxss模板样式和全局配置（模板样式_rpx_@import样式导入、全局配置_window_tabBar）微信小程序|小程序

文章目录

wxss模板样式
- 01 什么是wxss
- - 1.1wxss和css的关系
  - - 1.1.1 什么是rpx
  - 1.2 样式导入
- 02 全局样式和局部样式
- - 2.1 全局样式
  - 2.2 局部样式
全局配置
- 01 全局配置文件常用配置项
- - 1.1 window
  - - 1.1.1 组成部分
    - 1.1.2 常用配置项
    - 1.1.3 全局开启下拉刷新功能
    - 1.1.4 设置下拉刷新背景色
    - 1.1.5 设置下拉刷新时loading的样式
    - 1.1.6 设置上拉触底的距离
  - 1.2 tabBar
  - - 1.2.1 tabBar的6个组成部分
    - 1.2.2 tabBar结点配置选项
    - 1.2.3 每个tab项的配置选项
    - 1.2.4 实例
  - 1.3 页面配置
  - - 1.3.1 页面配置和全局配置的关系
    - 1.3.2 页面配置中常用的配置项

欢迎访问笔者个人技术博客： http://rukihuang.xyz/
wxss模板样式 01 什么是wxss

wxss是一套样式语言，用于美化wxml的组件样式，类似于网页开发的css

1.1wxss和css的关系

wxss具有css大部分特性，同时wxss还对css进行了扩充和修改，以适应微信小程序的开发。
- wxss扩展有：
  - rpx尺寸单位
  - @import样式导入

1.1.1 什么是rpx

rpx是微信小程序独有的，用来解决屏幕适配的尺寸单位
实现原理：rpx把所有设备的屏幕，在宽度上等分为750份（当前屏幕的总宽度为750rpx）
- 在小设备上，1rpx代表的宽度较小
- 在大设备上，1rpx代表的宽度较大

1.2 样式导入

使用wxss提供的@import语法，可以导入外联的样式表
@import后跟需要导入的外联样式表的相对路径，用; 表示语句结束

/* common样式 */ .username { color: red; }

/* 导入样式 */ @import "/common/common.wxss";

02 全局样式和局部样式 2.1 全局样式

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

2.2 局部样式

在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面
注意：
- 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
- 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局样式

全局配置 01 全局配置文件常用配置项

小程序根目录下的app.json文件是小程序的全局配置文件。常用的配置项如下：
- pages
  - 记录当前小程序所有页面的存放路径
- window
  - 全局设置小程序窗口的外观
- tabBar
  - 设置小程序底部的tabBar效果
- style
  - 是否启用新版的组件样式

1.1 window

"window":{ "navigationBarBackgroundColor": "#025D54", "navigationBarTitleText": "在线测试", "navigationBarTextStyle":"white", "enablePullDownRefresh": true, "backgroundColor": "#efefef", "backgroundTextStyle":"dark", "onReachBottomDistance": 50 },

1.1.1 组成部分

小程序|微信小程序 - 04_wxss模板样式和全局配置（模板样式_rpx_@import样式导入、全局配置_window_tabBar）

文章图片

1.1.2 常用配置项

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

设置路径：app.json->window

1.1.3 全局开启下拉刷新功能

通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为
设置路径：app.json->window->enablePullDownRefresh设置为true
注意：在app.json开启下拉刷新功能后，会作用于每个小程序页面

1.1.4 设置下拉刷新背景色

当全局开启下拉刷新功能之后，默认的窗口背景为白色。
设置路径：app.json->window->backgroundColor16进制颜色值（#efefef）

1.1.5 设置下拉刷新时loading的样式

当全局开启下拉刷新功能之后，默认窗口的loading样式为白色。
设置路径：app.json->window->backgroundTextStyle为dark
注意：backgroundTextStyle可选值只有dark和light

1.1.6 设置上拉触底的距离

通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。
设置路径：app.json->window->onReachBottomDistance设置新的值
注意：默认距离为50px，如果没有特殊需求，建议使用默认值

1.2 tabBar

tabBar是移动端常见的页面效果，用于实现多页面的快速切换。通常分为：
- 底部tabBar
- 顶部tabBar
注意：
- tabBar中只能配置最少2个，最多5个tab页签
- 当渲染顶部tabBar时，不显示icon，只显示文本

1.2.1 tabBar的6个组成部分

文章图片

backgroundColor：tabBar 的背景色
selectedlconPath：选中时的图片路径
borderStyle：tabBar上边框的颜色
iconPath：未选中时的图片路径
selectedColor： tab上的文字选中时的颜色
color：tab上文字的默认(未选中)颜色

1.2.2 tabBar结点配置选项

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

1.2.3 每个tab项的配置选项

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

1.2.4 实例 【小程序|微信小程序 - 04_wxss模板样式和全局配置（模板样式_rpx_@import样式导入、全局配置_window_tabBar）】

文章图片

"tabBar": { "list": [ { "pagePath": "pages/home/home", "text": "home", "iconPath": "images/home.png", "selectedIconPath": "images/home-active.png" }, { "pagePath": "pages/message/message", "text": "message", "iconPath": "images/message.png", "selectedIconPath": "images/message-active.png" }, { "pagePath": "pages/contact/contact", "text": "contact", "iconPath": "images/contact.png", "selectedIconPath": "images/contact-active.png" } ] }

1.3 页面配置

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

1.3.1 页面配置和全局配置的关系

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

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

属性	类型	默认值	描述
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