什么是微信小程序开发的样式机制

在以往的Web开发中通常使用XML和CSS来做页面样式与布局,微信小程序中界面布局则是一个WXML文件,但是WXML只是一个界面的骨架。要让我们的微信小程序外表变得更引人注目,就需要为其添加一种样式的机制。小程序的开发框架采用了与Web开发中所使用的CSS几乎相同的一种机制,这种样式机制在小程序中称作WXSS

WXSS用于描述WXML的组件样式,用于决定WXML的组件应该如何显示。为了适应广大的前端开发者,它被设计为支持CSS中大部分的特性,并且有一些自己的扩展和修改。


样式的设置

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

Hello

{{message}}

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

新的尺寸单位

WXSS中新增和扩展的尺寸单位,对于做屏幕的自适应是非常有帮助的。

rpx (responsive pixel,响应式px),简单来说,就是不管什么尺寸的设备,总是认为屏幕宽度是750rpx

rem (root em,根em),也很简单,就是不管什么尺寸的设备,总是认为屏幕的宽度是20rem。rpx和rem之间的换算为1rem = (750/20)rpx = 37.5rpx。开发人员就需要在px和rpx之间进行换算,具体为以下规则:

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

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

海量优质小程序视频教程,从0基础到精通,尽在即速学院。

全局样式与局部样式

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

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

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

有限的选择器

和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组件前面插入内容

实战微信小程序体验,更多微信小程序,即速资讯站等你来查看。

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

阅读更多
个人分类: kffff
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭