微信小程序云开发教程

同学们大家好，我是小伊同学，在上一节课中我们讲解了编写一组样式的语法格式，那么如何将样式作用到组件上呢？这就是我们今天要教给大家的。

  上一节课我们介绍的声明段代码都需要写在wxss后缀的文件中，而我们在wxml部分的讲解中提到，组件有两种属性可以设置其样式，分别是style和class属性。

  这两种方式的区别在于：

  也就是说，class的方式才需要我们将样式写进wxss中，而如果使用style方式，则需要我们将声明直接写到wxml文件中的style属性值中。这里的声明同样可以写很多条，但是不要忘记使用分号进行分隔。通过style直接将样式写在wxml中的方式称为内联样式。

  一般来说静态的样式统一写到 class中。style接收动态的样式，在运行时才会进行解析，所以请同学们尽量避免将静态的样式写进style中，以免影响页面加载的速度。

  结合之前学过的知识，这里给出了一个示例。这里的style属性是将view组件的color属性设置为了js中color变量的值。那么在js中我通过给color变量赋不同的值就能实现对前端页面该view组件样式的改变。

  class虽然同样用于指定样式规则，但其属性值是样式规则中类选择器名(样式类名)的集合，实际上就是wxss中写的选择器名称，只是这里样式类名不需要带上点（’.’）。同样，class属性可以指定多个样式，样式类名之间用空格分隔。比如这里通过class属性设置了两种样式，那么程序将去该页面对应的wxss文件中寻找normal_view和my_view这两个名称的声明块，把两种样式同时作用到view组件上。

  当两种样式的某些声明发生冲突，也就是属性一样但属性值不同时，比如一个将颜色设置为黑色，另一个将颜色设置为橘色，两种样式同时作用于一个组件上时，编译器并不会报错，而是选择在wxss文件中书写位置更靠后的那一个属性值进行加载。因此，大家要注意编码的规范性，要么尽量一个组件只写一个声明块，将该组件的所有样式都写进去；要么按照属性分类编写声明块，每个声明块中仅包含一种属性的设置，而在wxml中通过同时设置多个样式进行样式组合，以避免冲突。例如颜色为黑色和橘色的声明各自单独一个声明块，在wxml中使用时从所有颜色类别的声明块中选择一个即可。

  很多同学可能注意到了，之前我们提到了一个概念叫做类选择器。那什么是类选择器呢？我们知道，选择器的作用是指明哪些组件使用这个样式，那么在小程序中，有很多种类型的选择器，其中最常用的主要有两种，id选择器和class选择器。

  id选择器即通过在wxml中组件的id属性来识别所用的样式。由于我们常用id来区分同一类的不同组件，因此id选择器最好在整个代码中只能有一个，尽量不要同名。它的语法格式是以井号开头加上id名称然后就是之前我们见到的花括号及声明了。其余地方都一样，只是选择器这个位置有所区别。如例子中所示，如果在wxss中写了这个名称为my_id的声明块，那么要想其发挥作用，必须在wxml中想要的组件上加上id属性，也就是在html标签中添加id等于my_id字样，这样这个样式就会作用在组件上了。

  class选择器又称为类选择器，这就是我们开始举过的例子，语法格式为使用点加上选择器名称后面加上花括号和样式内容。要想使用类选择器，必须在组件的标签中写明class属性，以上面这个为例就是加上class等于my_class字样。class选择器在整个代码中可以同名很多个，所有同名的声明块内的属性和属性值相当于在同一个声明块内，都会起作用。如果出现冲突，就按照我们之前讲过的位置关系进行判定。

  微信小程序中还有一些其他的选择器，他们的作用都是关联组件和样式，但是这些并不常用，如果想要了解可以访问微信开发者文档查阅。