小程序微信小程序的样式机制

如何看待微信公开课小程序热门讨论「小程序微信小程序的样式机制」
摘要：小程序微信小程序的样式机制
展开：之前，我已经介绍过在小程序开发中使用WXML来做界面布局，但是WXML只是一个界面的骨架。要让我们的小程序变得精致漂亮高大上起来，就需要一种为其添加样式的机制。小程序的开发框架采用了与Web开发中所使用的CSS（层叠样式表）几乎相同的一种机制，称作WXSS。WXSS用于描述WXML的组件样式，用于决定WXML的组件应该如何显示。为了适应广大的前端开发者，它被设计为支持CSS中大部分的特性（但是注意是大部分，还是有一些特性是不支持的），并且有一些自己的扩展和修改。比如引入了一种新的尺寸单位rpx，还有@import这种外联样式的导入机制（话说这个功能不是CSS里也有的么）关于CSS，我就不在这里介绍它的用法了，这个内容实在有点多，还没学习过CSS的朋友可以自己找一下资料学习，我在这里主要想讲解一下WXSS和CSS之间的不同之处。样式的设置在WXML文件中，我们可以通过style和class属性为组件设置样式。不过由于WXML的数据绑定功能的存在，我们就可以动态的设置style和class的属性值了。比如：viewstylecolor:{{color}};padding:{{padding}};Hello/viewviewclassmessage{{type}}{{message}}/view不过，我们要尽量避免使用style来设置组件的样式，最好将样式定义成样式规则放到样式文件中(.wxss)，然后通过class属性来设置。因为组件通过style接收动态样式，在运行时会进行解析，影响渲染性能。有限的选择器和CSS不一样，小程序的WXSS支持的选择器的类型有限，官方文档中明确列出说支持的，目前只有以下几种选择器：.class：类选择器，例如.errormsg，它会选择所有classerrormsg的组件id：ID选择器，例如mycontainer，它会选择idmycontainer的组件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(responsivepixel，响应式px)，简单来说，就是不管什么尺寸的设备，总是认为屏幕宽度是750rpxrem(rootem，根em)，也很简单，就是不管什么尺寸的设备，总是认为屏幕的宽度是20rem。所以rpx和rem之间的换算，就是：1rem(750/20)rpx37.5rpx设计师的设计稿一般都是按照px来做单位的，那么在开发阶段，开发人员就需要在px和rpx之间进行换算，具体可以如下来计算：rpx(屏幕实际宽度/750)pxpx(750/屏幕实际宽度)rpx因此，如果设计师的设计是以iphone6屏幕尺寸为参照(iphone6的屏幕宽度为375px)，则：1rpx(375/750)px0.5px1px(750/375)rpx2rpx是不是很容易理解？好了，关于微信小程序样式WXSS的关键点内容，就讲解到这里，不对的地方欢迎指正。谢谢啦。文／一斤代码（简书作者）原文链接：http://www.jianshu.com/p/30caa82e55c6