小程序云开发系列

前面几节的内容让我们的小程序有了文字，但是小程序的内容形式还不够丰富。比如没有链接、图片等元素，这些元素也是通过小程序中的组件来实现的。

2.3.1 组件

在小程序中，我们通过组件添加页面的链接。有的页面我们打开小程序就可以看到，有的则需要我们点击链接来切换页面。这些可以称为辅助页面。

技术文档：组件技术文档

1. 二级页面

为了让二级页面和原页面有更清晰的结构关系，我们可以在对应的页面文件夹下新建一个页面跳转到。比如我们第一个是home，我们将home会跳转到的所有二级页面都构建在home文件夹中。

我们还在配置项中新建一个页面。名称可以自定义。配置项内容如下：

"pages/home/home", "pages/home/imgshow/imgshow", "pages/list/list", "pages/partner/partner", "pages/more/more"

然后我们在主页的home.wxml中添加如下代码：

让小程序显示图片

在上面的代码中，我们将组件嵌套在视图组件中。当然，不嵌套也是可以的。要编写非常复杂的页面，经常会使用这种嵌套。

由于该组件没有添加样式，因此它在视觉上不可见作为可点击的链接。我们在 home.wxss 中添加一个样式：

.item-link{ margin: 20px; padding:10px 15px; background-color: #4ea6ec; color: #fff; border-radius: 4px; }

URL是页面跳转链接。请注意这个路径怎么写。我们还可以将上面的链接形式写成如下代码：

/pages/home/imgshow/imgshow

两条路径都指向页面。

小任务：为什么页面有两条路径？比如//home/对应的路径对应哪个页面？添加到配置项中，看看效果。

2.相对路径和绝对路径

请注意，我们之前使用的路径基本上都是相对路径。相对路径使用“/”字符作为目录的分隔符。

小任务：你知道当前根目录是什么吗？你明白为什么//home//和./../home//这两种写法会指向同一个路径吗？

要管理图片资源、链接（页面）资源、音频资源、视频资源、wxss样式资源等内外部资源，必须掌握路径的知识。我们将来会经常使用这些知识。

那么什么是绝对路径呢？互联网链接，例如：

https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/weapp.jpg

这是绝对路径，而C:\\，从盘符开始的路径也是绝对路径。通常相对路径使用得比较多。

2.3.2 组件

一个好看的网页怎么能没有图片呢？图片通过组件添加到小程序中。

技术文档：组件技术文档

我们首先将要显示的图片放到小程序的文件夹中，然后在页面下的.wxml中添加以下代码：

小程序显示图片

注意图片的链接是我们之前的标签图标链接，也就是说这个链接来自小程序本地文件夹。你的图片名称可能不同，主要是根据情况修改。

这样我们的图片就会显示在小程序中啦~~

如果我们不对图像的高度、宽度等样式进行处理，图像显示就会变形。这是因为小程序会为图像添加默认的宽度和高度。宽度为 ，高度为 。

仅仅显示图像是不够的。很多时候我们对图像的大小或其边距有要求。利用之前学过的知识，我们还可以给组件添加一些CSS样式。例如我们在.wxss中添加

.imglist{ text-align: center; } .imglist .imgicon{ width: 200px; height: 200px; margin: 20px; }

2.3.3 云存储

我们可以将图片放在小程序本地文件夹中，也可以将图片放在网上。那么如何链接图片以便其他人可以看到它呢？这时候就需要一个专门的服务器（图床）来存储图片。云开发自带的云存储可以作为画床使用。

单击开发者工具中的“云开发”图标，打开云开发控制台，然后单击菜单栏中的“存储”图标。在这里我们可以创建新的文件夹并将各种格式的文件上传到云存储。上传图片后，您可以获得图片的下载地址并分享到其他平台或在小程序中使用。例如在.wmxl中测试（将下面的src地址替换为云存储地址）：

2.3.4 尺寸单位rpx

上面的网络图片变形了。为了让图片不变形，我们需要给图片添加wxss样式。这里有一个问题。这张图片的宽度是，高度是，但是手机的宽度没有这么高的像素。 。想要图片完整显示在手机上不变形怎么办？一种方法是我们可以使用尺寸单位 rpx。

技术文档：尺寸单位 rpx

小程序中所有手机屏幕的宽度都是 ，我们可以按比例缩小图片。例如，为图像添加样式：

.imglist .imgitem{ width: 700rpx; height: 415rpx; margin: 20rpx; }

通过rpx大小单位，我们可以确定小程序中某个元素的精确位置和大小。然而，这个尺寸单位在处理图像时往往需要转换。我们来看看下面的处理方法。

2.3.5 图片裁剪

由于我们的图片可能尺寸不同，或者由于手机尺寸不同以及我们对图片显示的要求不同，为了让我们的图片正常显示，小程序需要对图片做一些裁剪。

该小程序使用模式来裁剪图像。您可以阅读该组件对 13 种模式的描述。

技术文档：组件技术文档

如果我们要处理上面的图片，应该怎么处理呢？根据技术文档，我们可以给组件添加一种模式：宽度不变，高度自动变化，原图长宽比不变。

然后给图片添加wxss样式：

.imglist .imgitem{ width: 100%; }

也就是说，将图像的宽度设置为百分比样式，高度会自动变化，保持原图像的长宽比不变。

百分比是一个非常重要的单位，用于网页、移动端等布局、尺寸定义，大家要多学习、多练习、多分析~

当然会有这样的要求。我们希望图片能够全屏显示，但是设计者只给图片预留了很小的高度，所以我们必须对图片进行一定程度的裁剪。我们可以将其写在 .wxml 中。

并在.wxss中添加一些样式

.imglist .imgfull{ width: 100%; height: 100px; }

您可以在手机上的开发者工具中通过扫描开发者工具预览生成的二维码进行体验，并将此处的mode=""更改为其他12种模式，以了解不同模式对图像裁剪的影响。影响。

图像处理是一个非常重要的知识点，需要大家去实践，但是原理和核心知识点都在wxss的样式处理和小程序组件里，大家可以根据实际需要进行应用。

2.3.6 背景属性

背景属性也属于CSS知识。所谓背景属性就是给组件添加一些颜色背景或者图片背景。因为CSS的属性，尤其是当我们想要使用图片作为组件的背景时，还会涉及到背景图片的位置和裁剪。这个有点类似小程序组件的裁剪，所以我们使用CSS这里说一下背景属性~

以下是我们经常使用的css背景属性以及对应的技术文档。正如我们之前强调的，技术文档是用来阅读和深入研究的。可以先利用背景属性来制作一些效果~

背景属性