微信小程序的样式机制

472 查看

之前,我已经介绍过在小程序开发中使用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的关键点内容,就讲解到这里,不对的地方欢迎指正。谢谢啦。


2018 - 知识虫 - 我的知识库 渝ICP备16002641号-2

渝公网安备 50010702501581号