微信小程序全栈开发技术与实战（微课版）最新章节_张引著

2.1 视图容器与WXSS

在各种组件中，有一类特殊的组件，它们主要用于决定其他组件显示在哪里，我们称这类组件为“视图容器”。我们在Hello World项目中曾使用过的view组件就是视图容器。

view组件非常类似于HTML中的div。我们首先通过一个例子来了解一下view组件的用法。

要了解view组件的用法，请访问右侧二维码。

Hello World项目

在上面的视频中，我们将index.wxml中的内容替换为：

<!-- index.wxml -->
<view>
  <view>
    <view>Lorem Ipsum</view>
    <view>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</view>
    <view>Ut enim ad minim veniam</view>
  </view>
</view>

这组view组件的显示效果如图2-1所示。

图2-1 view组件的显示效果

这与我们在第1章看到的view组件没有什么区别。为了“决定其他组件显示在哪里”，我们还需要使用WXSS。首先，我们为这组view组件添加class属性：

<view class="contentBlock">
  <view class="contentHeader">Lorem Ipsum</view>
  <view class="content">Lorem ipsum dolor ...
  <view class="contentFooter">Ut enim ...
</view>

有了class属性之后，我们就可以使用WXSS文件来设置view组件的样式了。首先，我们为最外层的view组件，也就是为class="contentBlock"的view组件设置样式。我们将index.wxss中的内容替换为：

/* index.wxss */
.contentBlock {
  background-color: #00000066;
  color: #ffffff;
}

在上面的代码中，.contentBlock表示我们要为WXML文件中class="contentBlock"的组件设置样式。接下来的部分用“英语”来理解就可以了。background-color表示背景色，color表示颜色。

#ffffff和#00000066是RGB颜色。#ffffff代表白色，#000000代表黑色。#00000066的最后两位66，代表透明度。因此，#00000066代表颜色为半透明的黑色。

我们不会过多地介绍RGB颜色。事实上，RGB颜色是非常简单的。你可以从W3School了解到关于RGB颜色的更多内容。

现在view组件的显示效果如图2-2所示。

图2-2 设置了背景色和颜色之后的显示效果

效果看起来好一点了，不过我们还是能发现很多问题：

（1）我们希望文字不要紧贴着边框，这会给人很强的压迫感；

（2）我们希望第一行文字充当标题，因此它的字号应该大一些，并且居中显示；

（3）我们希望最后一行文字充当页脚，因此它的背景色应该比其他部分更深一点。

要解决第一个问题，我们需要为contentHeader、content以及contentFooter添加衬距：

.contentHeader, .content, .contentFooter {
  padding: 16rpx;
}

在上面的代码中，我们使用逗号来分隔不同的class，并将它们的衬距统一设置为16rpx,rpx是微信小程序中的尺寸单位。现在，文字就不会紧贴着边框了，此时view组件显示效果如图2-3所示。

图2-3 设置了衬距之后的显示效果

接下来，我们设置contentHeader的样式：

.contentHeader {
  font-size:　x-large;
  text-align: center;
}

上面这段代码用“英语”就能很容易地理解，font-size 表示字号，x-large 为特大，text-align表示文本对齐，center为居中。这段代码实现的效果如图2-4所示。

图2-4 设置了字号和文本对齐之后的显示效果

最后，我们设置contentFooter的样式：

.contentFooter {
  background-color: #00000066;
}

上面这段代码将 contentFooter 的背景色设置成了半透明的黑色。由于 contentFooter 位于contentBlock之内，并且contentBlock的背景色也是半透明的黑色，因此它们的背景色会发生叠加，显示效果如图2-5所示。

图2-5 背景色叠加后的显示效果

正如名字所说的那样，视图容器的主要功能是作为“容器”来“放置”其他组件。将视图容器与WXSS相结合，我们就能够决定其他组件的显示位置了。当然，由于WXSS的功能非常强大，我们还可以通过WXSS来设置视图容器及其所容纳的组件的字号、背景色等样式。

当然，视图容器和WXSS的功能还远不止这些。不过，为了防止读者过深地“陷入”细节，我们对视图容器和 WXSS 的介绍就告一段落。在后面的章节中，我们还会多次使用视图容器和WXSS，并不断地介绍关于它们的新知识。

要了解更多的视图容器组件，请访问微信官方文档。