构建welcome页面的元素和样式我们仅仅正确地加载和显示了welcome页面，还没有编写任何页面代码。在本小节中，将尝试为welcome页面添加一些标签元素。 创建的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的目录，用来存放OrangeCan的所有图片资源。在images目录下新建avatar目录，然后将一些适合做头像的图片拷贝到avatar目录中。 如何将图片放入到小程序的目录中？微信Web开发者工具无法通过Ctrl+C、Ctrl+V的功能复制粘贴图片，也没有提供导入图片的功能。我们需要在操作系统中打开项目的目录，并将图片拷贝到对应的avatar文件夹中，小程序会自动刷新目录，并在开发工具中显示这些图片。 以上操作完成后，我们的过程目录将变成
现在在image组件中加入属性src：
当保存项目后，模拟器立刻会出现这张图片，但图片显示的高宽并不是图片本身的高宽。它被MINA框架设置成了宽度300px、高度225px，这也是小程序默认的图片高宽。如果我们不显示地指定图片高宽，所有图片都将保持这个默认值。 相对路径与绝对路径在小程序中同样有相对路径和绝对路径的区别。上面我们在设置image组件的src属性时，使用的是绝对路径，它以“/”开头，“/”代表根目录。我们也可以使用相对路径来为image指定图片路径，比如，将代码中image组件的src属性改写为相对路径：<image src="../../images/avatar/avatar-1.png"></image>路径中的“..”表示向上一级。这里由于使用绝对路径更加简洁，所以我们使用绝对路径。 代码中间部分使用一个view组件包裹一个“开启小程序之旅”的text组件来实现按钮部分。由于还没有编写样式，所以暂时它还不能呈现为一个按钮的形状。
现在来编写welcome页面的样式。小程序编写样式的语言就是CSS，我们应该将CSS代码写在页面的wxss文件中。在编写welcome.wxss文件之前，首先在welcome.wxml文件中给每个需要样式的组件加入样式名称class name。
就和我们在HTML中编写CSS名称一样，不是吗？ 接着我们将下面这段CSS代码加入到welcome.wxss文件中。
让我们保存一下，看看页面发生了什么变化
下面简单介绍一下这些CSS代码的作用。 container是所有组件元素的容器样式。这里使用Flex布局的方式，来控制容器下子元素的排布规则。 avatar设置头像图片的大小和位置。 motto设置“Hello，桔子罐头”这段文本的样式。 journey-container设置了“开启小程序之旅”的外边框，使它们看起来更像一个按钮。border-radius让这个外边框变成一个“圆角”的矩形。 journey则设置了圆角矩形内的文本样式。 |
|
|
