微信小程序基本组件元素介绍（二）

第二节跟大家分享一下平时在微信小程序以及编程中会遇到的常见单位度量以及颜色取值的一些方法。

（一）长度单位

1. px 像素单位

它是一个相对单位长度，相对于屏幕显示器分辨率而言，例如在电脑屏幕分辨率为2560*1440中，一条长为100px的线实际在显示屏占位4%的长度，但在1920*1080分辨率下，该线实际在显示屏占位5.2%的占位，因此在小程序布局中，使用px编译布局很可能会导致在使用其他类型的设备中，原本布局会错乱不美观，因此我更推荐使用下面长度单位布局编译。（初学者可以先不用纠结于此，在需要发布小程序的时候才需要考虑兼容性）

2. rpx 自适应像素单位

rpx是微信小程序特有的一个相对长度单位，可以根据屏幕大小调整1rpx的实际长度。系统规定屏幕宽度为750rpx，根据屏幕宽度的像素大小可等价换算出1rpx=npx。例如，若手机屏幕宽度为750px，则该手机在运行小程序时1rpx=1px； 若设备屏幕宽度为1500px，则该设备在运行小程序时1rpx=0.5px。

因此，在设计小程序布局时使用rpx来代替px，能够大致对不同设备打开小程序进行兼容（组件元素不会因为屏幕宽度而乱序），在实际设计布局中推荐使用。

3. em 相对单位长度

em也是属于一个相对的单位长度，它没有具体等效的像素单位值，而是取决于该组件元素父级的长度声明font-size:"x"；

例如小程序中，两个不同父级的子级view的长度与宽度和内部文字的大小都设置了相同的em值，高为5em，宽为15em。不同的是，前者的父级view没有另外设置font-size值（则font-size值默认为16px，此时1em=16px），而后者在wxss里设置了font-size：8px（此时1em=8px）。则会出现下面图示的现象：

wxml部分：

<view>
    <view style="height: 5em; width: 15em;background-color: aqua; ">我是修改前</view>
</view>
<view class="change">
    <view style="height: 5em; width: 15em;background-color: aqua; ">我是修改后</view>
</view>

wxss部分：

.change{
       font-size: 8px;
       /* font-size也可以修改成50%，相当于16px*0.5=8px */
       margin-top: 20px;
}

4. vh 相对视口高度（Viewport Height）

相对视口高度取决当前屏幕的视窗比例，即1vh=1%*视口高度，具体效果如下：

<view>
       <view style="width: 100vh; height: 32px; background-color: aquamarine; margin-top: 20px;"></view>
       <view style="width: 100%; height: 32px; background-color: aquamarine; margin-top: 20px;"></view>
       <view style="width: 100px;height: 50vh; background-color: aquamarine; margin-top: 20px;"></view>
</view>

5. %（百分比长度）

与上述视口高度类似，一般来说有1%=1vh（前提是没有父级限定长宽范围）

（二）颜色取值

1. Color Name（red/yellow/green）

第一种颜色选取方式是直接输入颜色英文名，微信小程序已经在内部预定义了148种颜色，在对范围内的颜色选取可直接输入颜色英文名。（大小写不影响）具体预定义颜色可参考微信开放文档Color部分。

Color | 微信开放文档 (qq.com)

2. 十六进制选取（HEX）

可以通过#------来选择颜色，最基本的例如：

black（黑色）—— #000000

white（白色）—— #FFFFFF

red（红色）—— #FF0000

green（绿色）—— #00FF00

blue（蓝色）——#0000FF

yellow（黄色）—— #FFFF00

3. rgb 三原色色彩模式颜色选取

三原色选取是指，通过在三原色（红色，绿色，蓝色）中的权重比叠加后的颜色，使用规范为

rgb（x，y，z）

其中x，y，z分别是红色，绿色，蓝色的权重额，范围在0~255之间，最基本的例如：

纯红色—— rgb（255，0，0）

纯绿色—— rgb（0，255，0）

纯蓝色—— rgb（0，0，255）

偏青色—— rgb（128，255，0）

4. rgba 加入透明度的三原色色彩模式颜色选取

rgba是在rgb颜色选取上加入了Alpha（透明度）元素的颜色选取，配色过程中，考虑到背景光影，遮挡等因素后，用rgba选取出来的颜色会更加贴合。其中Alpha的取值范围在0~1之间，0表示完全透明，1表示完全不透明。

例如：（与上图偏青色rgb（128，255，0）相比较）

5. hsl

hsl是由色相（Hue）、饱和度（Saturation）、亮度（Lightness）三元素选取出来的颜色，使用规范为hsl（a，b，c）其中a，b，c分别是色相，饱和度，亮度的取值，其范围在a：0~360；b：0%~100%；c：0%~100%

6. hsla

hsla是在hsl的基础上加入透明度的颜色选取方式，透明度取值与rgba中的透明度取值相同

（三）颜色渐变

由于单一颜色在某些主题场景中略显单调，因此出现了一种能够平滑渐变颜色的指令选取方式。在微信小程序中常用的有两种渐变方式：线性渐变（linear-gradient）与径向渐变（radial-gradient），以下分别介绍以下基础用法：

（1）linear-gradient

线性渐变有多种表示方法：

*1. linear-gradient（to top/right/bottom/left, color1, color2,...）

线性渐变包括渐变方向与渐变颜色，例如：

在wxss对应元素的class加上

 background: linear-gradient(pink,blue)
/* linear-gradient()内部若没声明渐变方向则默认to bottom */

又或者是多颜色渐变的

 background: linear-gradient(to right, pink, blue，red)

*2.linear-gradient（xdeg，color1, color2, ...）

利用渐变角度实现非垂直平行的颜色渐变，x为渐变方向角度，取值为0~360，默认to top（垂直向上）为0deg,顺时针累加。

background: linear-gradient(30deg, pink,blue,red)

（2）radial-gradient

径向渐变的表示方法是: radial-gradient(color1,color2, ......)

例如，通过简单的径向渐变，可以粗略地描绘出恒星的形状：

background: radial-gradient(pink, yellow, black)

（3）渐变颜色权重

如上述讲到的颜色渐变（包括线性渐变与径向渐变），每个颜色权重都是一样的，如果需要赋予渐变中某个颜色更高的权重，则需要在颜色后面加入x%，意思是该颜色渐变到x%才停止，例如：

background: linear-gradient(to right,pink 50%,blue 70%,red 100%)

（4）repeating

重复渐变是在线性渐变或者径向渐变的基础上加入的，意思是以规定的渐变形式重复渐变，重复次数结合上述颜色权重来计算，例如：

background: repeating-linear-gradient(to right, pink,blue,red 10%)

上述渐变表示当一次粉蓝红渐变完成时，总体进程完成了10%，因此重复次数为1/10%=10次，效果如下：

径向渐变效果也是类似，

 background: repeating-radial-gradient(pink, blue, red 10%)

课程总结

在本节中，我们学到了不同长度单位的显示效果以及颜色显示的几种表示方法，在最后我们着重介绍了颜色渐变与重复颜色渐变的表示方法，希望同学们回去能自行消化学习。另外，由于前两周我要回学校复习考试，所以搁置了一段时间，对此感到抱歉，后面我会加速更新，跟大家一起学习！