微信小程序的样式机制

之前，我已经介绍过在小程序开发中使用WXML来做界面布局，但是WXML只是一个界面的骨架。要让我们的小程序变得精致漂亮高大上起来，就需要一种为其添加样式的机制。小程序的开发框架采用了与Web开发中所使用的CSS（层叠样式表）几乎相同的一种机制，称作WXSS。

 

WXSS用于描述WXML的组件样式，用于决定WXML的组件应该如何显示。为了适应广大的前端开发者，它被设计为支持CSS中大部分的特性（但是注意是大部分，还是有一些特性是不支持的），并且有一些自己的扩展和修改。比如引入了一种新的尺寸单位rpx，还有@import这种外联样式的导入机制（话说这个功能不是CSS里也有的么...）

 

关于CSS，我就不在这里介绍它的用法了，这个内容实在有点多，还没学习过CSS的朋友可以自己找一下资料学习，我在这里主要想讲解一下WXSS和CSS之间的不同之处。

 

样式的设置

在WXML文件中，我们可以通过style和class属性为组件设置样式。不过由于WXML的数据绑定功能的存在，我们就可以动态的设置style和class的属性值了。比如：

 

<view style="color:{{color}};padding:{{padding}};">Hello</view>

<view class="message-{{type}}">{{message}}</view>

不过，我们要尽量避免使用style来设置组件的样式，最好将样式定义成样式规则放到样式文件中(.wxss)，然后通过class属性来设置。因为组件通过style接收动态样式，在运行时会进行解析，影响渲染性能。

 

有限的选择器

和CSS不一样，小程序的WXSS支持的选择器的类型有限，官方文档中明确列出说支持的，目前只有以下几种选择器：

• .class：类选择器，例如.error-msg，它会选择所有class="error-msg"的组件
• #id：ID选择器，例如#my-container，它会选择id="my-container"的组件
• element：元素选择器，例如view，它会选择所有view组件
• element, element：多选择器，例如view, button，它会选择所有view和button组件
• ::after：例如view::after，它会在view组件后面插入内容
• ::before：例如view::after，它会在view组件前面插入内容

其实自己试了一些在CSS中可用，小程序官方没有声明在WXSS里支持的选择器，也是可以生效的。但是有些用了就会把微信web开发者工具给整崩溃掉，所以，还是不要在实际开发中使用这类没说支持的选择器了，虽然在有的场景下麻烦了点，但是以上支持了的选择器还是基本够用了。

 

全局样式与局部样式

WXSS中有全局样式与局部样式之分。

定义在app.wxss文件中的样式为全局样式，将会对每一个页面起作用。

而定义为page同名的wxss文件，则称为局部样式，只会针对对应的页面起作用，而且样式优先级比全局样式要高，可以覆盖全局样式。

 

新的尺寸单位

最后来说一下WXSS中新增和扩展的尺寸单位，对于做屏幕的自适应是非常有帮助的。

• rpx (responsive pixel，响应式px)，简单来说，就是不管什么尺寸的设备，总是认为屏幕宽度是750rpx
• rem (root em，根em)，也很简单，就是不管什么尺寸的设备，总是认为屏幕的宽度是20rem。

所以rpx和rem之间的换算，就是：

 

1rem = (750/20)rpx = 37.5rpx

设计师的设计稿一般都是按照px来做单位的，那么在开发阶段，开发人员就需要在px和rpx之间进行换算，具体可以如下来计算：

 

rpx = (屏幕实际宽度/750)px
 px = (750/屏幕实际宽度)rpx

因此，如果设计师的设计是以iphone6屏幕尺寸为参照(iphone6的屏幕宽度为375px)，则：

 

1rpx = (375/750)px = 0.5px
 1px = (750/375)rpx = 2rpx

是不是很容易理解？

 

好了，关于微信小程序样式WXSS的关键点内容，就讲解到这里，不对的地方欢迎指正。谢谢啦。

 

现在主要用简书写东西，更多文章查看我的简书吧