样式类别
- 项目公共样式：根目录中的app.wxss为项目公共样式，它会被注入到小程序的每个页面。
- 页面样式：与app.json注册过的页面同名且位置同级的WXSS文件。
- 其它样式：其它样式可以被项目公共样式和页面样式引用。
尺寸单位
在WXSS中，引入了rpx（responsive pixel）尺寸单位。
- 引用新尺寸单位的目的是，适配不同宽度的屏幕，开发起来更简单。
- rpx与px的换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。
iPhone6屏幕宽度为375px，共750个物理像素，那么1rpx = 375 / 750 px = 0.5px。 - 换算公式：
#rpx转px:
var px = rpx / 750 * wx.getSystemInfoSync().windowWidth;
#px转rpx:
var rpx = px * 750 / wx.getSystemInfoSync().windowWidth;
样式引用
WXSS的样式引用是这样写：
@import './test_0.wxss'
由于WXSS最终会被编译打包到目标文件中，用户只需要下载一次，在使用过程中不会因为样式的引用而产生多余的文件请求。
选择器
| 类型 | 选择器 | 样例 | 样例描述 |
|---|---|---|---|
| 类选择器 | .class | .intro | 选择所有拥有 class="intro" 的组件 |
| id选择器 | #id | #firstname | 选择拥有 id="firstname" 的组件 |
| 元素选择器 | element | view checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件 |
| 伪元素选择器 | ::after | view::after | 在 view 组件后边插入内容 |
| 伪元素选择器 | ::before | view::before | 在 view 组件前边插入内容 |
WXSS优先级与CSS类似，权重如下图：
选择器权重
权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式。
view{ // 权重为 1
color: blue
}
.ele{ // 权重为 10
color: red
}
#ele{ // 权重为 100
color: pink
}
view#ele{ // 权重为 1 + 100 = 101，优先级最高，元素颜色为orange
color: orange
}
view.ele{ // 权重为 1 + 10 = 11
color: green
}
官方样式库
WeUI.wxss基础样式库。
WeUI是一套与微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、progress、toast、article、actionsheet、icon等各式原生。
网友评论