微信小程序WXSS样式介绍

微信小程序开发中,需要用到一种微信自己推出的一套样式语言——WXSS(WeiXin Style Sheets),它用于描述WXML的组件样式,也就是说用来决定WXML的组件应该怎么显示。那么今天小程序观察网小编就和各位开发者一起聊聊微信小程序WXSS样式语言。

开发者开发微信小程序,需要对小程序的界面进行排版,此时就要用到WXML和WXSS了。WXML指定了界面的框架结构,而WXSS起到的作用就是指定界面的框架及元素的显示样式。

按照微信官方的介绍,WXSS具有CSS的大部分特性,并且在CSS的基础上进行了扩充和修改,以适合广大的前端开发者开发微信小程序。CSS的特性和使用方法想必开发朋友都清楚,这里就不介绍了。既然官方说WXSS具有CSS的大部分特性,那就说明还是有部分是不同的,小编就来整理一下哪些地方不同。

差别一:没有body

小程序的每一个page里都没有body属性,要想影响整个页面的样式可以通过在WXSS中对page进行设置来实现。

差别二:尺寸变化

在CSS里衡量尺寸的单位有很多,比如px、em等,而WXSS里除了这些外,还新增了一个单位:rpx。它最重要的特性是可以根据屏幕宽度进行自适应,毕竟小程序作为在移动端展现需要适配各种规格的移动设备。官方介绍,规定屏幕宽为750rpx,如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

差别三:样式导入

小程序WXSS支持样式的导入,比如我们使用一些其他库的时候就可以直接导入第三方的WXSS文件,这是一个相当有用的功能。

差别四:内联样式

WXSS和CSS一样支持class和style两种样式,但用法上有一些区别。按照官方的说法概括为:样式中存在动态内容,就写道style中,其他的都放到class文件。

差别五:选择器

微信小程序WXSS样式语言

如官方介绍,WXSS基本支持CSS中的选择,而且类似于last-child之类的css的高级属性,也可以在WXSS中使用。

差别六:全局样式与局部样式

在小程序中,一般一个WXSS负责一个WXML视图文件,但一个应用难免会有一些共用的属性,所以小程序为应用自身提供了一个WXSS—app.wxss,它不用人工引入,会自动的加载到每一个视图上。

总之,小程序样式语言WXSS具有了CSS大部分属性,而且还拓展了尺寸单位和样式导入等特性,更适合开发微信小程序。对于熟悉CSS的开发者来说WXSS上手并没有太大难度,当然更多的细节差别还有待开发朋友们多挖掘探索。


声明:本站部分文章来源于互联网,如有侵犯作者著作权,请及时与我们联系。

为您推荐