3.3 构建welcome页面的元素和样式
在上一小节中，我们仅仅正确地加载和显示了welcome页面，还没有编写任何页面代码。在本小节中，将尝试为welcome页面添加一些标签元素。
可以在本书的彩页中查看welcome页面的最终设计图。这个设计图的设计元素非常简单，仅由一张圆形的图片、一段文本和一个按钮构成。下面我们一起来完成第一个小程序页面吧。
首先来编写3.2小节中所创建的welcome.wxml文件，在该文件中键入以下代码，这段代码将welcome页面所需要的标签元素全部填入到页面源文件中。
这段代码总共使用了3个微信小程序的组件，分别是view、text和image组件。view组件通常作为容器来使用，类似于HTML中的div标签；text组件用来显示一段文本，类似于HTML中的span标签，本例中第一个text组件用来显示一段文本“Hello，桔子罐头”；而image组件用来显示一张图片，类似于HTML中的img标签。
大家应该注意到了，笔者在描述这些元素时的用词区别。描述wxml元素使用的是“组件”，而描述HTML元素使用的是“标签”，这是符合规范称呼的。HTML是标记语言，它的标签主要是用来标记页面骨架，标签的属性也比较少。但组件不同，组件除了标记的作用，它的属性一般也是非常丰富的。小程序官方文档中也将view、text、image称为组件，而并没有称为标签。
同HTML中的img标签一样，image组件需要设置一个src属性，该属性指向一张图片的路径，用来显示该图片。我们在项目的根目录下新建一个名为images的目录，用来存放Orange Can的所有图片资源。在images目录下新建avatar目录，然后将一些适合做头像的图片拷贝到avatar目录中。
如何将图片放入到小程序的目录中？微信Web开发者工具无法通过Ctrl+C、Ctrl+V的功能复制粘贴图片，也没有提供导入图片的功能。我们需要在操作系统中打开项目的目录，并将图片拷贝到对应的avatar文件夹中，小程序会自动刷新目录，并在开发工具中显示这些图片。
以上操作完成后，我们的过程目录将变成如图3-5所示的结构。
图3-5 加入图片后的文件结构
现在在image组件中加入属性src：
当保存项目后，模拟器立刻会出现这张图片，但图片显示的高宽并不是图片本身的高宽。它被MINA框架设置成了宽度300px、高度225px，这也是小程序默认的图片高宽。如果我们不显示地指定图片高宽，所有图片都将保持这个默认值。
相对路径与绝对路径
在小程序中同样有相对路径和绝对路径的区别。上面我们在设置image组件的src属性时，使用的是绝对路径，它以“/”开头，“/”代表根目录。我们也可以使用相对路径来为image指定图片路径，比如，将代码中image组件的src属性改写为相对路径：
<image src="../../images/avatar/avatar-1.png"></image>
路径中的“..”表示向上一级。这里由于使用绝对路径更加简洁，所以我们使用绝对路径。
代码中间部分使用一个view组件包裹一个“开启小程序之旅”的text组件来实现按钮部分。由于还没有编写样式，所以暂时它还不能呈现为一个按钮的形状。目前整个页面看起来是这个样子的，如图3-6所示。
图3-6 还没有加入样式代码时welcome页面的样子
现在来编写welcome页面的样式。小程序编写样式的语言就是CSS，我们应该将CSS代码写在页面的wxss文件中。在编写welcome.wxss文件之前，首先在welcome.wxml文件中给每个需要样式的组件加入样式名称class name。
就和我们在HTML中编写CSS名称一样，不是吗？
接着我们将下面这段CSS代码加入到welcome.wxss文件中。
让我们保存一下，看看页面发生了什么变化，如图3-7所示。
图3-7 添加样式后的welcome页面
下面简单介绍一下这些CSS代码的作用。
• .container是所有组件元素的容器样式。这里使用Flex布局的方式，来控制容器下子元素的排布规则。关于Flex将在下个小节里具体讲解。
• .avatar设置头像图片的大小和位置。
• .motto设置“Hello，桔子罐头”这段文本的样式。
• .journey-container设置了“开启小程序之旅”的外边框，使它们看起来更像一个按钮。border-radius让这个外边框变成一个“圆角”的矩形。
• .journey则设置了圆角矩形内的文本样式。
本书的主要目的是讲解小程序的核心知识，并不是一本CSS和JavaScript的基础语法书。限于书籍的篇幅，我们只对CSS样式中的核心内容作较为深入的讲解。下个小节，我们来学习小程序官方推荐的布局方式：Flex布局。
真实项目中，图片资源尽量不要存储在小程序的目录中，因为小程序的大小不能超过1MB，超过则无法真机运行和发布项目。应该将图片都存放在服务器上，让小程序通过网络来加载图片资源。