界面设计
前面讲到小程序的用户界面是由WXML（页面布局文件）和WXSS（布局样式文件）决定的。为了让开发者能够以最快的速度设计出美观而具有动态效果的小程序界面，本章结合实际案例的开发过程介绍微信小程序页面的常用样式和flex页面布局（弹性布局）。
* 理解CSS标准规定的页面布局模型；
* 掌握样式在小程序界面设计中的使用方法；
* 掌握flex布局在小程序界面设计中的使用方法；
* 掌握background-color、background-image、background-size、background-position和background-repeat等样式属性在小程界面设计中的使用方法；
* 掌握view、text、input、button、swiper、image和scroll-view等组件在小程序界面设计中的使用方法。
3.1 概述
早期的Web页面排版主要使用HTML中的table（表格）元素实现，同时在table的单元格中通过align、valign属性来指定水平方向、垂直方向的对齐，但是这种方式很难直接传达页面的实际含义，使页面文档的可读性不高，且不容易维护。于是，1996年12月，W3C（World Wide Web Consortium，万维网联盟）推出了用以解决结构与样式混杂问题的CSS规范的第一个版本，即CSS1.0。1998年，W3C发布了CSS的第二个版本，即CSS2.0。2001年5月，W3C完成了CSS3草案规范。CSS是一种用来表现HTML或XML等文本样式的计算机语言，它不仅可以静态地修饰网页，配合各种脚本语言动态地对网页各元素进行格式化，还能够对网页中元素位置的排版进行像素级精确控制。CSS标准规定的页面布局模型有以下3种：
（1）流动模型：流动模型是浏览器默认的一种网页布局模式，块级元素自上向下排列，行级元素自左向右排列。如表格布局就是采用流动模型实现页面元素的布局，它是CSS页面布局最简单的方式，页面元素排版布局时以默认的html元素在表格中的结构顺序显示。
（2）浮动模型：浮动模型提出的初衷是为了实现文字环绕效果，采用浮动布局的页面，浮动元素可以左右移动，直到它的边缘碰到父元素的边缘或另一个浮动元素的边缘。如浮动布局就是采用浮动模型实现页面元素的布局，它是目前Web页面设计采用最多的一种布局 方式。
（3）层模型：层模型是根据页面元素的position属性值的不同来控制页面元素的显示位置，position的属性值有static（静态）、absolute（绝对）、relative（相对）和fixed（固定）四种定位布局。
这几种布局模型的搭配使用虽然可以比较轻松地完成页面设计的常见需求，但也存在缺少语义、不够灵活、浏览器兼容性差等缺陷。随着Web页面的语义化越来越流行，为了与搜索引擎建立良好的沟通、有助于爬虫和机器很好地解析网页内容，方便屏幕阅读器、盲人阅读器、移动终端设备等解析后渲染网页，W3C从CSS的第三版本（CSS3.0）开始提出了弹性盒子模型（flex），该模型的flex布局方式可以更简便、完整、响应式地实现各种页面布局，目前也已经得到了几乎所有浏览器的支持。小程序的开发框架也使用了flex排版布局，它有助于开发者快速、灵活地构建小程序的UI。
3.2 样式
微信小程序开发框架为开发人员提供了视图容器（View Container）、基础内容（Basic Content）、表单（Form）、导航（Navigation）、媒体（Media）、地图（Map）和画布（Canvas）、开放能力(Open Ability)等8大类组件，用于小程序的界面设计。但是，要达到用户想要的界面效果，还需要使用WXSS样式。WXSS样式决定了组件应该如何显示，并在CSS样式的基础上做了一些功能扩展和修改。
3.2.1 长度单位
实现CSS样式时，开发者为了保证不同移动终端设备显示效果的适配性，需要考虑设备屏幕的不同宽度和像素比，采用一些技巧来换算像素单位。小程序的WXSS样式文件除了支持CSS的常用长度单位（表3-1）外，还新增了一个新的长度单位——rpx（responsive pixel）。rpx可以自动适配不同的屏幕宽度（规定屏幕宽度为750rpx），开发者设计小程序的用户界 面，如果使用rpx单位，换算工作就由小程序底层来完成，提高了开发效率。
表3-1 CSS常用长度单位
单位
说 明
pt
绝对长度单位，points（1pt等于1/72英寸）
pc
绝对长度单位，picas（1pc等于12pt）
in
绝对长度单位，英寸
cm
绝对长度单位，厘米
mm
绝对长度单位，毫米
%
相对长度单位，百分比
px
相对长度单位，pixels像素
em
相对长度单位，基于当前字体大写字母M的尺寸，当改变font-size的大小时，该长度单位将发生改变，默认1em=16px
ex
相对长度单位，基于当前字体小写字母x的高度值3.2.2 样式导入
小程序的WXSS支持样式的导入，这个功能在实际应用开发时非常有用，尤其是使用一些其他库的时候可以直接导入第三方的WXSS文件。用法步骤如下：
（1）新建要导入的WXSS样式文件，此处以新建的common.wxss样式文件为例，代码如下：
1 /** common.wxss **/
2 .top-p{
3 padding:15px;
4 }
（2）使用@import语句导入WXSS样式文件，此处以在app.wxss样式文件导入common.wxss样式文件为例，代码如下：
1 /** app.wxss **/
2 @import "common.wxss"; /** @import语句后使用需要导入的样式文件的相对路径**/
3 .bottom-p {
4 padding:10px;
5 }
3.2.3 内联样式与类样式
与CSS样式一样，WXSS样式支持使用style、class属性控制组件的样式，但是实际使用时有区别：在小程序的样式使用时，对于静态样式，应统一定义到WXSS样式文件中，然后在WXML页面文件中由class属性设定；对于动态样式，需要直接在WXML页面文件中由style属性设定，这样有助于运行时动态解析，以便根据后台数据更新页面内容。如果将过多的样式直接使用style属性设定，会导致小程序在页面渲染时还要解析对应的样式布局，影响小程序渲染页面的速度。
style接受动态样式，运行时会进行解析，尽量避免将静态的样式写入style中，以免影响渲染速度。代码格式如下所示：
1 <!-- style属性控制样式 -->
2 <view style = "color:{{color}};"></view> <!-- color需要在js文件中操作 -->
class用于指定样式规则，通常用于统一样式类型的多个元素或重复使用的元素，减少重复代码的数量。其属性值是样式规则中类选择器名（样式类名）的集合。代码格式如下所示：
1 <!-- class类控制样式 -->
2 <view class = "view_style” ></view> <! -- view_style需要在wxss文件中定义 -->
3.3 flex布局
flex是flexible box（弹性盒子布局）的缩写，为页面使用盒状模型设计提供了最大的灵活性。开发设计微信小程序时，它既能符合小程序的文档开发要求，又能减少CSS的相关样式声明。
采用flex布局的元素称为flex容器（flex container），flex容器中可以包含一个或多个flex容器项（flex item），一个容器项只能属于一个直接的容器，容器里面的多个容器项有排列方向。如图3.1所示，其中有一个flex容器（flex container）和三个容器项（flex item），这三个容器项从左到右排列，和容器项排列方向一致的这条线称作主轴（main axis），图中的主轴为水平方向，与主轴垂直的一条线称作交叉轴（cross axis），图中的交叉轴为垂直方向。主轴的开始位置（与边框的交叉点，图3.1中左边框处）称为main start，主轴的结束位置（与边框的交叉点，图3.1中右边框处）称为main end；交叉轴的开始位置（与边框的交叉点，图3.1中上边框处）称为cross start，交叉轴的结束位置（与边框的交叉点，图3.1中下边框处）称为cross end。
图3.1 flex布局结构
在小程序页面设计中，设有display:flex或display:block的元素就是一个flex container，flex container中的任何一个flex item也可以使用block或flex进行布局。
（1）display: block，?指定为块内容器模式，总是从新行开始显示容器项（flex item），小程序的视图容器（view、scroll-view、swiper、movable-view和cover-view等）的样式属性display默认设置为block。
（2）display: flex，指定为行内容器模式，默认在一行内显示容器项（flex item），也可以使用?flex-wrap?、flex-direction等属性设置特定的显示效果。
例如，页面样式文件和页面结构文件分别如下列代码，其显示效果如图3.2所示。
（1）页面样式文件。
1 /** 页面样式文件——index.wxss **/
2 page {
3 height: 100%;
4 width: 100%;
5 background-color: bisque;
6 }
7 .container {
8 width: 100%;
9 height: 100%;
10 display: block;
11 }
12 .item {
13 height: 80rpx;
14 width: 80rpx;
15 background-color: yellow;
16 margin: 10rpx;
17 }
图3.2 block显示效果
用CSS设置样式时，width:100%会自动填满整个屏幕的宽度，而height:100%只会自动适应子元素的高度。在正常的HTML代码中，要让子元素自动填充整个屏幕的高度，就必须给它的父元素也设置height:100%，所以通常给网页的HTML或body属性增加height:100%就可以了。由于在小程序页面结构文件（wxml文件）中并没有HTML和body元素，所以不可能这样设置，但是小程序有一个Page( )注册页面的方法，因此可以使用上述第2~6行的代码来设置flex container父容器（本示例的页面容器page即为父容器）的height属性，读者在开发小程序时务必要注意这一细节。
（2）页面结构文件。
1 <!-- 页面结构文件——index.wxml -->
2 <view class="container">
3 <view class='item'>0</view>
4 <view class='item'>1</view>
5 <view class='item'>2</view>
6 <view class='item'>3</view>
7 <view class='item'>4</view>
8 <view class='item'>5</view>
9 <view class='item'>6</view>
10 </view>
如果将页面样式文件中第10行的block改为flex，显示效果如图3.3所示。
图3.3 flex显示效果
3.3.1 容器的属性
flex-direction
flex-direction属性用来规定容器的主轴方向，主轴可以是水平方向，也可以是垂直方向，交叉轴垂直于主轴方向。即flex-direction属性用以指定容器项在容器中如何摆布，它有4个属性值。
（1）row（默认值）：主轴为水平方向，容器项的起点在水平方向的左端。例如，页面样式文件和页面结构文件分别如下列代码所示，其显示效果如图3.3所示。
① 页面样式文件。
1 /** 页面样式文件——flexdirection.wxss **/
2 page {
3 height: 100%;
4 width: 100%;
5 background-color: bisque;
6 }
7 .container {
8 width: 100%;
9 height: 100%;
10 display: flex;
11 flex-direction：row;
12 }
13 .item {
14 height: 80rpx;
15 width: 80rpx;
16 background-color: yellow;
17 margin: 10rpx;
18 }
② 页面结构文件。
1 <!-- 页面结构文件——flexdirection.wxml -->
2 <view class="container">
3 <view class='item'>0</view>
4 <view class='item'>1</view>
5 <view class='item'>2</view>
6 <view class='item'>3</view>
7 <view class='item'>4</view>
8 <view class='item'>5</view>
9 <view class='item'>6</view>
10 </view>
（2）row-reverse：主轴为水平方向，容器项的起点在水平方向的右端。例如，将上述页面样式文件第11行代码的flex-direction属性值设置为row-reverse，页面结构文件代码相同，其显示效果如图3.4所示。
（3）column：主轴为垂直方向，容器项的起点在垂直方向的上沿。例如，将上述页面样式文件第11行代码的flex-direction属性值设置为column，页面结构文件代码相同，其显示效果如图3.2所示。
（4）column-reverse：主轴为垂直方向，容器项的起点在垂直方向的下沿。例如，将上述页面样式文件第11行代码的flex-direction属性值设置为column-reverse，页面结构文件代码相同，其显示效果如图3.5所示。
图3.4 row-reverse显示效果
图3.5 column-reverse显示效果
flex-wrap
默认情况下，容器项都只能在一条主轴线上排列，超过界面宽度的容器项一般不显示。flex-wrap属性用于指定容器项在一条主轴线上排列不下时如何换行（本部分介绍内容以主轴线在水平方向为例），它有如下3个属性值：
（1）nowrap（默认值）：容器项不换行，如果容器项超过容器的宽度和高度，会自动在主轴方向压缩；如果压缩后仍然超过容器的宽度和高度，超过的部分不会显示。例如，页面样式文件和页面结构文件代码如下，其显示效果如图3.6所示。
图3.6 nowrap显示效果
① 页面样式文件。
1 /** 页面样式文件——flexwrap.wxss **/
2 page {
3 height: 100%;
4 width: 100%;
5 background-color: bisque;
6 }
7 .container {
8 width: 100%;
9 display: flex;
10 flex-direction：row;
11 flex-wrap：nowrap;
12 }
13 .item {
14 height: 80rpx;
15 width: 80rpx;
16 background-color: yellow;
17 margin: 10rpx;
18 }
② 页面结构文件。
1 <!-- 页面结构文件——flexwrap.wxml -->
2 <view class="container">
3 <view class='item'>0</view>
4 <view class='item'>1</view>
5 <view class='item'>2</view>
6 <view class='item'>3</view>
7 <!-- 与上面代码类似，此处略 -->
8 <view class='item'>16</view>
9 <view class='item'>17</view>
10 </view>
从图3.6可以看出，主轴是水平方向的，容器项没有换行，但每个容器项目的宽度已经在水平方向压缩，压缩后还有14、15、16、17等内容没有显示。
（2）wrap：容器项换行，从左到右排列，第二行在第一行的下面，第三行在第二行的下面，以此类推。例如，将上述页面样式文件第11行代码的flex-wrap属性值设置为wrap，页面结构文件代码相同，其显示效果如图3.7所示。
（3）wrap-reverse：容器项换行，从左到右排列，第二行在第一行的上面，第三行在第二行的上面，以此类推。例如，将上述页面样式文件第11行代码的flex-wrap属性值设置为wrap-reverse，页面结构文件代码相同，其显示效果如图3.8所示。
图3.7 wrap显示效果
图3.8 flex-flow显示效果
flex-flow
flex-flow属性是flex-direction 和flex-wrap属性的简写形式，它的默认值是row nowrap，即主轴为水平方向、不换行。flex-flow属性值的设置可以使用下列形式：
1 flex-flow:flex-direction flex-wrap ;
例如，要实现图3.8所示的显示效果，可以将前面flexwrap.wxss样式文件的第10行、第11行代码替换为下列代码：
1 flex-flow: row wrap-reverse;
justify-content
justify-content属性用于指定容器项在主轴方向的对齐方式，它有如下5个属性值：
（1）flex-start（默认值）：容器项与主轴的起始端对齐。如果主轴为从左向右的水平方向，即容器项左对齐；如果主轴为从上向下的垂直方向，即容器项顶端对齐。
（2）flex-end：容器项与主轴的末尾端对齐。如果主轴为从左向右的水平方向，即容器项右对齐；如果主轴为从上向下的垂直方向，即容器项底端对齐。例如，页面样式文件和页面结构文件代码如下，其显示效果如图3.9所示。读者需要注意图3.5与图3.9显示效果的区别，图3.5显示效果对应的主轴是从下向上的垂直方向，justify-content的值默认为flex-start，所以容器项与主轴的起始端对齐排列（从下向上的垂直方向排列）；而图3.9显示效果对应的主轴是从上向下的垂直方向，justify-content的值设置为flex-end，所以容器项与主轴的末尾端对齐排列。
图3.9 flex-end显示效果
① 页面样式文件
1 /** 页面样式文件——justifycontent.wxss **/
2 page {
3 height: 100%;
4 width: 100%;
5 background-color: bisque;
6 }
7 .container {
8 width: 100%;
9 height: 100%;
10 display: flex;
11 flex-direction：column;
12 justify-content：flex-end;
13 }
14 .item {
15 height: 80rpx;
16 width: 80rpx;
17 background-color: yellow;
18 margin: 10rpx;
19 }
② 页面结构文件
1 <!-- 页面结构文件——justifycontent.wxml -->
2 <view class="container">
3 <view class='item'>0</view>
4 <view class='item'>1</view>
5 <view class='item'>2</view>
6 <view class='item'>3</view>
7 <!-- 与上面代码类似，此处略 -->
8 <view class='item'>6</view>
9 </view>
（3）center：容器项在主轴方向排列时居中对齐。例如，将页面样式文件justifycontent.wxss的第11行和第12行修改为如下代码后，其显示效果如图3.10所示。
1 flex-direction：row;
2 justify-content：center;
图3.10 center显示效果
（4）space-between：容器项沿主轴方向均匀分布，位于首尾两端的容器项与容器两端对齐。例如，将页面样式文件justifycontent.wxss的第11行和第12行修改为如下代码后，其显示效果如图3.11所示。
1 flex-direction：row;
2 justify-content：space-between;
图3.11 space-between显示效果
（5）space-around：容器项沿主轴方向均匀分布，位于首尾两端的容器项到容器边缘的距离是容器项与容器项之间间距的一半。
align-items
align-items属性用于指定容器项在交叉轴方向的对齐方式，它有如下5个属性值：
（1）stretch（默认值）：容器项沿交叉轴方向的尺寸拉伸至与容器一致。当主轴方向是水平方向时，如果容器项没有设置高度属性（height）或者高度属性值为auto，容器项将会填满整个容器的高度。例如，页面样式文件和页面结构文件代码如下，其显示效果如图3.12所示。当主轴方向是垂直方向时，如果容器项没有设置宽度属性（width）或者宽度属性值为auto，容器项将会填满整个容器的宽度。
① 页面样式文件。
1 /** 页面样式文件——alignitems.wxss **/
2 page {
3 height: 100%;
4 width: 100%;
5 background-color: bisque;
6 }
7 .container {
8 width: 100%;
9 height: 100%;
10 display: flex;
11 flex-direction：row;
12 }
13 .item {
14 width: 80rpx;
15 background-color: yellow;
16 margin: 10rpx;
17 }
② 页面结构文件。
1 <!-- 页面结构文件——alignitems.wxml -->
2 <view class="container">
3 <view class='item'>0</view>
4 <view class='item'>1</view>
5 <view class='item'>2</view>
6 <view class='item'>3</view>
7 <!-- 与上面代码类似，此处略 -->
8 <view class='item'>6</view>
9 </view>
（2）flex-start：容器项与交叉轴方向的起始端对齐。
（3）flex-end：容器项与交叉轴方向的末尾端对齐。
（4）center：容器项与交叉轴中点对齐。
（5）baseline：容器项与基线对齐。
align-content
align-content属性用于指定多根轴线的对齐方式。如果容器项目只有一根轴线，该属性不起作用。它共有flex-start、flex-end、center、space-between、space-around和stretch（默认值）等6个属性值，其功能含义与前面介绍的一样，这里不再赘述。
图3.12 stretch显示效果
图3.13 order显示效果
3.3.2 容器项的属性
order
容器项排列的位置默认是按照页面结构文件代码中的先后顺序排列的，也就是哪个容器项写在前面，默认就排列在前面。而order属性可以改变容器项的排列顺序，数值越小，排列越靠前，默认值为0。例如，页面样式文件和页面结构文件代码如下，其显示效果如图3.13所示。
① 页面样式文件。
1 /** 页面样式文件——order.wxss **/
2 page {
3 height: 100%;
4 width: 100%;
5 background-color: bisque;
6 }
7 .container {
8 width: 100%;
9 height：100%;
10 height: 100%;
11 display: flex;
12 flex-direction：row;
13 }
14 .item {
15 width: 80rpx;
16 height: 80rpx;
17 background-color: yellow;
18 margin: 10rpx;
19 }
20 .item:nth-child(5) {
21 order: -1;
22 }
② 页面结构文件。
1 <!-- 页面结构文件——order.wxml -->
2 <view class="container">
3 <view class='item'>0</view>
4 <view class='item'>1</view>
5 <view class='item'>2</view>
6 <view class='item'>3</view>
7 <!-- 与上面代码类似，此处略 -->
8 <view class='item'>6</view>
9 </view>
上述代码的第20行使用了nth-child(n)选择器，表示匹配属于其父元素的第n个子元 素，此处item：nth-child(5)规定属于容器的第5个容器项的order属性值为?1。从图3.12的显示效果可以看出，第5个容器项就是用view组件显示的“4”元素，其order属性值被设置为?1，其余元素的order属性值仍然是默认值0，所以4元素通过这样设置后，排在其他元素的最前面。
flex-grow
flex-grow属性用于定义容器项的放大比例，默认值为0，即如果存在剩余空间，该容器项也不会放大显示。如果所有容器项的flex-grow属性值设为1，则它们将等分剩余空间；如果其中一个容器项的flex-grow属性值设为n，其他容器项目都设为1，则前者占据的剩余空间将比其他容器项多n倍。当有放大空间时，值越大，放大的比例越大。
flex-shrink
flex-shrink属性用于定义容器项的缩小比例，默认值为1，即如果空间不足，该容器项目将缩小，值越大，缩小的比例越小。如果所有容器项目的flex-shrink属性值设为1，当空间不足时，都将等比例缩小；如果一个容器项的flex-shrink属性值设为0，其他容器项都设为1，当空间不足时，前者不缩小。负值对该属性无效。
flex-basis
flex-basis属性用于定义分配多余空间之前容器项占据的主轴空间。小程序根据这个属性计算主轴是否有多余空间，默认值为auto，即容器项的本来大小。例如，如果容器项目有多余的空间，flex-basis属性设置为200rpx，那么容器项会放大到200rpx的宽度。
flex
flex属性是flex-grow、flex-shrink 和 flex-basis属性的简写，默认值为0、1、auto，后两个属性可选。该属性有两个快捷值：auto(1 1 auto)和none(0 0 auto)。建议使用时优先使用这个属性，而不是单独写3个分开的属性值，这样有助于提高小程序的效率。
align-self
align-self属性用于设置单个容器项独特的对齐方式，默认值为auto（表示继承父容器的align-items属性）；该属性可以取6个值，除了auto值外，其他都与align-items属性完全一致。
3.4 仿“猜画小歌”界面设计
“猜画小歌”是Google于2018年7月18日发布的首款微信小程序。该小程序可以让每个人都有机会体验人工智能技术驱动下的人机交互。本节将模仿“猜画小歌”小程序首个界面（见图3.14）的实现过程介绍view组件、text组件和背景、颜色、边框等样式在小程序界面设计中的使用方法。
图3.14 “猜画小歌”界面
3.4.1 预备知识
view
view（视图组件）是一个容器组件，是微信小程序界面设计中最常用、最基础的组件。它里面不仅可以放置其他组件，还可以直接显示文本信息。本章3.3节已经在flex布局中阐述了用view组件显示文本信息和小程序界面的布局方法。该组件与HTML中的div标签一样，可以实现页面结构的划分、页面布局的调整等，另外还有表3-2中所示的单击态属性和功能。
表3-2 view组件的属性及功能说明
属性名
类型
说 明
hover-class
String
指定当单击view组件时调用的样式类。默认值为none，即没有单击效果
hover-stop-propagation
Boolean
指定是否阻止本节点的祖先节点出现单击态，即当单击本节点时，是否调用祖先节点hover-class指定的样式类。特别说明，只要在代码中定义了该属性，不管属性值是true还是false，都是阻止的
hover-start-time
Number
指定按住后多久出现调用hover-class指定的样式类。默认值为50，单位为ms
hover-stay-time
Number
指定松开后调用hover-class指定的样式类状态保留时间。默认值为400，单位为ms 以下面一段代码为例，介绍表3-2中4个属性的用法。
页面结构代码如下：
1 <view hover-class="red" class="view">单击view才会调用.red样式类</view>
2 <view hover-class="blue">
3 <view>其他内容</view>
4 <view hover-stop-propagation="true" hover-class="yellow">单击此view阻止调用.blue样式类</view>
5 </view>
6 <view hover-start-time="1000" hover-class="red">单击view 1秒后调用.red样式类</view>
7 <view hover-stay-time="3000" hover-class="red">单击view能让.red样式持续3秒</view>
页面样式代码如下：
1 .red{
2 color: red;
3 }
4 .blue{
5 color: blue;
6 }
7 .yellow{
8 color: yellow;
9 }
页面结构代码第1行指定了view组件的hover-class属性，当单击view时，会调用.red样式类，即此时view组件上显示的文本为红色；第2~5行使用了view嵌套来显示文本，第4行中使用了hover-stop-propagation属性，此时若单击第4行定义的view，会调用.yellow样式类，但不会调用其祖先节点（第2行定义的view）定义的.blue样式类，若没有使用hover-stop-propagation属性，则不仅调用.yellow样式类，还调用其祖先节点定义的.blue样 式类。
text
text（文本组件）是小程序中最基础的组件之一，常用于在页面中展示文字，它除了包含诸如颜色、背景等基础组件的属性外，还包括表3-3所示的小程序特有属性。
表3-3 text组件属性及功能说明
属性名
类型
说 明
selectable
Boolean
文本是否可选，默认值为false（文本不可选）
space
String
显示连续空格，默认不显示连续空格
decode
Boolean
是否解码，默认值为false（不解码） text支持\n换行；selectable属性用于指定text显示的文本在页面上是否可选，即当selectable为true时，可以长按文本选中，也可以复制。这两个特性是text与view组件在显示文本内容时的区别。
space属性用于设置文本中的空格在页面上显示时的间距，它有ensp（空格显示时为中文字符空格一半大小）、emsp（空格显示时为中文字符空格大小）和nbsp（空格显示时根据字体设置空格大小）三个属性值。例如，space的属性值为emsp，表示text中的文本若有多个空格，则在页面上以连续多个中文字符空格显示。
decode属性用于设置是否可以在页面上渲染一些特殊的标签，例如小于号<（<）、大于号>（>）、与符号&（&）、撇号'（&apos）及空格号（&ensp、&emsp、 ）。默认状态下，decode的属性值为false，即这些符号在小程序中默认不能被直接渲染显示，如果要渲染显示，就需要将decode属性值设为true。例如，以下代码表示text中的文本不可选，文本中的空格根据字体设置间距大小，可以在页面上显示<和>等特殊符号。
1 <view>
2 <text selectable='false' space='nbsp' decode='true'>
3 This is the first line.\n<>
4 </text>
5 </view>
下面使用view和text组件及样式实现图3.15所示的界面，实现代码如下。
① 页面结构文件。
1 <view class="bcontainer">
2 <view class="view_name">
3 <text>人的一生至少要有两次冲动</text>
4 <text>一次为奋不顾身的爱情</text>
5 <text>一次为奋不顾身的爱情</text>
6 <text>一次为说走就走的旅行</text>
7 <text class="text_line">——</text>
8 <text>Andy Andrews</text>
9 </view>
10 </view>
在以上代码中，最外层使用view组件作为容器，控制图3.15界面的全部背景效果，并设置了class的属性，即使用了类选择器.bcontainer，.bcontainer样式需要在页面样式文件中定义；然后在内层使用view组件放置具体的文本显示内容，由于文本显示内容需要指定样式，所以本案例的文本显示内容使用了text组件，也使用了类选择器.view_name，用于控制整个文本显示区域的背景。代码的第3~8行中分别定义了text组件上显示的内容，从图3.15可以看出只有第7行内容格式与其他行的显示效果有差别，所以使用了类选择器.text_line。
② 页面样式文件。
1 page {
2 width: 100%;
3 height: 100%;
4 }
5 .bcontainer {
6 height: 100%;
7 background: #d0dbec;
8 display: flex;
9 flex-direction: column;
10 align-items: center;
11 justify-content: space-around;
12 }
13 .view_name {
14 width: 100%;
15 background-color: #a6d1ca;
16 display: flex;
17 flex-direction: column;
18 justify-content: center;
19 }
20 text {
21 font-size: 25rpx;
22 align-self: center;
23 }
24 .text_line {
25 padding: 25rpx;
26 }
以上代码的第5~12行定义了外层view的布局，其中第8~9行设置布局使用主轴为垂直方向（从上至下）的flex布局、第10行设置布局中的内容在交叉轴方向（水平方向）居中、第11行设置布局中内容沿主轴方向（垂直方向）均匀分布；第13~19行定义了内层view的布局，其中第16~17行设置布局使用主轴为垂直方向（从上至下）的flex布局、第18行设置布局中内容（即text组件）沿主轴方向（垂直方向）居中对齐；第20~23行定义了一个控制text组件样式的元素选择器，用于设置text组件上显示的文字大小和对齐方式；第24~26行定义了图3.15中第5行文本的内边间距。
图3.15 view和text的显示效果
背景与颜色
CSS允许应用颜色值作为背景，也允许使用背景图像创建复杂的效果。小程序的样式文件基本延续了CSS的相关属性，但是实际使用中还是有一些差异的。下面介绍小程序界面设计中常用的一些属性作用和使用方法。
（1）background-color。
background-color属性用于为页面元素设置一种背景颜色，该颜色会填充元素的内容、内边距和内边框。background-color的属性及功能如表3-4所示。
表3-4 background-color的属性及功能说明
值
说 明
color_name
规定颜色值为颜色名称的背景颜色（如red）
hex_number
规定颜色值为十六进制值的背景颜色（如#ff0000）
rgb_number
规定颜色值为 rgb 代码的背景颜色（如rgb（255,0,0））
续表
值
说 明
transparent
默认。背景颜色为透明
inherit
规定应该从父元素继承 background-color 属性的设置 （2）background-image
background- image属性用于为页面元素设置一个背景图像，该图像占据元素的全部尺寸，包括内边距和内边框，默认背景图像位于元素的左上角，并在水平和垂直方向上重复显示。background-image的属性及功能如表3-5所示。
表3-5 background-image的属性及功能说明
值
说 明
url（'URL'）
指向图像的路径
none
默认值。不显示背景图像
inherit
从父元素继承 background-image 属性的设置 需要说明的是：本地资源图片无法通过微信小程序的样式文件获取，所以在微信小程序设计时，如果需要使用background-image属性设置背景图片，可以在样式文件中使用网络图片。例如，要实现图3.16的显示效果，可以使用如下代码。
① 页面结构文件。
1 <view class="container">
2 <view class="view_img"></view>
3 <view class="view_name">
4 <text >人的一生至少要有两次冲动</text>
5 <!-- 与上面代码类似，此处略 -->
6 <text class="text_line">————</text>
7 <text >Andy Andrews</text>
8 </view>
9 </view>
从上述代码可以看出，实现图3.16的效果是在图3.15的基础上增加了第2行代码，即使用1个view组件和定义了1个view_img样式选择器显示图片。
② 页面样式文件。
1 <!-- 与上面代码类似，此处略 -->
2 .bcontainer {
3 height: 100%;
4 background: #d0dbec;
5 display: flex;
6 flex-direction: column;
7 align-items: center;
8 justify-content: space-around;
9 }
10 <!-- 与上面代码类似，此处略 以下为新增样式定义 -->
11 .view_img{
12 width: 230rpx;
13 height: 230rpx;
14 background-image: url('https://zsc.nnutc.edu.cn/__local/B/BC/58/
BE88E69F69A86F324E5122302B9_8E7373D8_48D3D.jpg');
15 background-size: cover;
16 }
上述代码的第11~16行定义了.view_img类选择器设置页面样式，width、height属性分别指定view组件的宽度、高度，background-image属性指定了view组件的背景图片，background-size属性值为cover，表示让图片等比例缩放，铺满整个view。如果要实现图3.17所示的图片效果，可以在上述代码.view_img类选择器代码中添加“border-radius: 50%;”，border-radius属性用于给view设置圆角边框。
图3.16 background-image显示效果 图3.17 border-radius的显示效果
但是，如果view组件中显示的是本地图片资源，且不在样式文件中设置，则只可以在定义组件时使用内联样式，即用下面代码替换上述页面结构的第2行代码，并删除上述页面样式代码的第14行。
1 <view class="view_img" style='background-image:url(../../images/lvxin.
jpg);'></view>
（3）background-size。
background-size属性用于设定背景图像的尺寸，它的属性及功能如表3-6所示。
表3-6 background-size的属性及功能说明
值
说 明
auto
背景图的实际大小，默认值
length
设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为auto。如background-size:100px 100px;
percentage
以父元素的百分比来设置背景图像的宽度和高度，第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为auto。如background-size:100% 100%;
cover
等比例缩放背景图像以完全覆盖背景区域，有可能超出背景区域 续表
值
说 明
contain
将背景图片等比例缩放到宽度或高度与背景区域的宽度或高度相等，背景图片始终在背景区域内 （4）background-position。
background-position属性用于设定背景图像的起始位置，它的属性及功能如表3-7所示。
表3-7 background-position的属性及功能说明
值
说 明
xpos、ypos
水平方向可选left、center、right，垂直方向可选top、center、bottom；xpos 为 left 表示图像的左边与对象的左边对齐，为 right 表示图像的右边和对象的右边对齐；ypos 为 top 表示图像的顶部和对象的顶部对齐，为 bottom 表示图像的底部和对象的底部对齐；xpos、ypos为center表示图像在水平和垂直方向的中心和对象在水平和垂直方向的中心对齐；如果仅指定一个值，则另一个值是center
x%、y%
第一个值是水平位置，第二个值是垂直位置。左上角是0、0。右下角是100％、100％。如果仅指定了一个值，其他值将是50％。 默认值为0、0
x、y
第一个值是水平位置，第二个值是垂直位置。左上角是0、0。单位可以是像素（0px，0px）或任何其他单位。如果仅指定了一个值，其他值将是50％。默认值为0、0
inherit
从父元素继承 background-position属性的设置 （5）background-repeat。
background-repeat属性用于设定背景图像是否重复或如何重复，它的属性值及功能如 表3-8所示。
表3-8 background-repeat的属性及功能说明
值
说 明
repeat
背景图像向垂直和水平方向重复。默认值
repeat-x
只有水平位置会重复背景图像
repeat-y
只有垂直位置会重复背景图像
no-repeat
背景图像不会重复
inherit
从父元素继承 background-repeat属性的设置3.4.2 仿“猜画小歌”界面的实现
素材准备
根据图3.14的显示效果，需要准备界面背景图片bground.jpg、头像图片touimg.jpg、操作按钮图片btn1.jpg、btn2.jpg、btn3.jpg和btn4.jpg，并将这些图片保存到项目的images/guess文件夹下。
界面实现
本案例实现时，将图3.14整个界面的设计过程分为背景、头像、用户信息和操作按钮四个部分，如图3.18所示。
（1）背景。
① 页面布局代码。
1 <view class="container" style="background-image: url('../../images/guess/