微信小程序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基本支持CSS中的选择,而且类似于last-child之类的css的高级属性,也可以在WXSS中使用。
差别六:全局样式与局部样式
在小程序中,一般一个WXSS负责一个WXML视图文件,但一个应用难免会有一些共用的属性,所以小程序为应用自身提供了一个WXSS—app.wxss,它不用人工引入,会自动的加载到每一个视图上。
总之,小程序样式语言WXSS具有了CSS大部分属性,而且还拓展了尺寸单位和样式导入等特性,更适合开发微信小程序。对于熟悉CSS的开发者来说WXSS上手并没有太大难度,当然更多的细节差别还有待开发朋友们多挖掘探索。
本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。