微信小程序开发框架组成之WXSS使用和特性——简明教程(六)

 

小程序视图层的另外一种语言,WXSS它的全称是WeiXin Style Sheets,是一种样式语言,用于描述wxml组件的样式。他决定是小程序各个元素在视觉效果上的展示,和我们的css是一样的道理。不过wxss在css的基础上做了一些修改和补充,这一点我们需要知道。

一、WXSS特性之响应式像素

在小程序中使用的单位是rpx,这和我们的css中有所不同。在讲单位rpx之前,我们先来了解下几个概念。如下图:

image-20200121164102633

1、首先是设备像素,指的是设备能显示的最小物理单位,也就是屏幕上的点,这些点是固定不变的。

2、CSS像素使用的是px,是外部编程的一个概念,是css代码中使用的逻辑像素。

3、PPI,也叫做DPI,指的是每英寸所拥有的像素数目,数目越高就代表显示屏能以最高的密度去显示图像。

4、DPR指的是在设备的某一方向上,设备像素和CSS像素之比。大家可以看到在小程序开发工具栏的模拟器,在切换不同的设备时,选择的设备后面都会有一个DPR的数值,这个DPR就是我们现在说的这个DPR。

以为刚开始的时候wxss是不能适配各种设备的,虽然wxss支持rem,但是我们知道rem是根据html根元素的font-size大小来适配的,但是wxss并不能直接去操作html样式属性,所以rem的适配也就失效了。因此微信团队就推出了rpx来适配。其实是和rem是一样的道理,最终也会被渲染成rem。

二、WXSS特性之样式

wxss也支持外部样式的引入,可以使用@import关键字来引入。要注意的是,样式文件执行是有顺序的,是从上到下,从左到右。

例如:

<view class="container">hello</view>


/**index.wxss**/
@import "hello.wxss";
.container{
  color: red;
}

/* hello.wxss */
.container{
  color: blue;
}

// 最终的结果是红色。

另外也是可以使用style属性在内联样式,而且可以样式绑定。

所以我们把静态样式写入wxss文件中,而动态样式写入style属性中。

<view class="container" style="color:">hello</view>

// js部分
Page({
  data:{
		 setcolor:"yellow"
  }
})

// 最终的颜色为黄色

三、WXSS特性之选择器

选择器和我们的css选择器是一样的,可以是class和id等。而我们要注意的是选择器的优先级的问题。wxss选择器具有权重,不同的权重是更具选择器的不同而决定的。下图表示了选择器的权重。

image-20200121172841491

以上就是wxss的特性和强大的视图功能。

推荐阅读:

本文为博主原创文章,知识共享,开源精神,转载注明出处。