前往控制台
指南目录
社区/学习指南/微信云开发学习指南

链接与图片

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

在小程序里，我们是通过 navigator 组件来给页面添加链接的。有些页面在我们打开小程序的时候就可以看得到，还有些则需要我们通过点击链接进行页面切换才可以看得到，这些我们可以称之为二级页面。

技术文档：navigator 组件技术文档

二级页面

为了让二级页面与 tabBar 的页面有更加清晰的结构关系，我们可以在 tabBar 对应的页面文件夹下面新建要跳转的页面。比如我们的第一个 tabBar 是 home，凡是 home 会跳转的二级页面，我们都建在 home 文件夹里。

我们同样在 pages 配置项里新建一个页面 imgshow，名称大家可以自定义~这样 pages 配置项的内容如下：

"pages/home/home",

    "pages/home/imgshow/imgshow",

    "pages/list/list",

    "pages/partner/partner",

    "pages/more/more"

然后我们再来在 home 页面的 home.wxml 加入以下代码

<view class="index-link">

  <navigator url="./../home/imgshow/imgshow" class="item-link">让小程序显示图片</navigator>

</view>

在上面的代码中，我们把 navigator 组件嵌套在 view 组件里，当然不嵌套也是可以的。要写一个非常复杂的页面，就会经常用到这种嵌套。

由于 navigator 组件没有添加样式，所以在视觉上看不出它是一个可以点击的链接，我们在 home.wxss 里给它添加一个样式：

.item-link{

  margin: 20px;

  padding:10px 15px;

  background-color: #4ea6ec;

  color: #fff;

  border-radius: 4px;

}

url 是页面跳转链接，大家注意这个路径的写法，我们也可以把上面的链接形式写成以下代码：

/pages/home/imgshow/imgshow

这两个路径都是指向 imgshow 页面。

小任务：为什么页面的路径有两个 imgshow？比如把路径写成 /pages/home/imglist 对应的是什么页面？在 pages 配置项添加一下看看效果。

相对路径与绝对路径

相对路径

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

  • "./" 代表当前目录 等同于
  • “../” 代表上一级目录
  • "/" 当前根目录，是相对目录；

**小任务：**你知道当前根目录是什么吗？/pages/home/imgshow/imgshow 和./../home/imgshow/imgshow 这两个的写法你明白它们为啥指向的是同一个路径了吗？

要管理好图片资源、链接（页面）资源、音频资源、视频资源、wxss 样式资源等等内部与外部资源，就一定要掌握路径方面的知识。我们之后也会经常运用这个知识。

绝对路径

那什么是绝对路径呢？网络链接比如 ：

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

这个就是绝对路径，还有 C:*Windows*\System32，这种从盘符开始的路径也是绝对路径。通常相对路径用的会比较多一些。

image 组件

一个好看的网页怎么可能少得了图片呢？小程序添加图片是通过 image 组件的方式。

技术文档：image 组件技术文档

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

<view id="imgsection">

  <view class="title">小程序显示图片</view>

  <view class="imglist">

    <image class="imgicon" src="/image/icon-tab1.png"></image>

  </view>

</view>

注意图片的链接是我们之前的 tab 图标链接，也就是这个链接来源于小程序的本地文件夹。可能你的图片命名会有所不同，主要根据情况修改。

这样我们的图片就在小程序里显示出来啦~~

如果我们不对图片的样式比如高度和宽度进行处理，图片显示就会变形。这是因为小程序会给图片增加一个默认的宽度和高度，宽度为 300px，高度为 225px。

图片光显示出来还是不够的，很多时候我们会对图片显示出来的大小有要求，或者对它的外边距有要求；利用之前学到的知识，我们也可以给 image 组件加一些 css 样式。比如我们在 imgshow.wxss 里面添加

.imglist{

  text-align: center;

}

.imglist .imgicon{

  width: 200px;

  height: 200px;

  margin: 20px;

}

云存储

我们可以把图片放在小程序的本地文件夹里，也可以把图片放在网上。那如何把一张图片以链接的方式让其他人看到呢？这个时候就需要一个专门的存储图片的服务器（图床）了。

免费的图床：腾讯云对象存储 COS

由于我们之前注册过小程序，可以选择其他登录方式里的微信公众号登录，登录后点击右上角控制台，即可进入后台，在工具栏里下拉云产品，找到存储下面的对象存储，在左侧菜单存储桶列表创建存储桶，只需注意将访问权限改为公有读私有写，其他按说明自行操作。

创建好存储桶 bucket，然后大家可以把图片上传到对象存储服务器里面，并分享链接并在 imgshow.wmxl 测试一下：

<view class="imglist">

    <image class="imgitem" src="https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/weapp.jpg"></image>

</view>

尺寸单位 rpx

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

技术文档：尺寸单位 rpx

在小程序里，所有的手机屏幕的宽度都为 750rpx，我们可以把图片等比缩小。比如给图片添加样式:

 .imglist .imgitem{

  width: 700rpx;

  height: 415rpx;

  margin: 20rpx;

}

有了 rpx 这个尺寸单位，我们可以确定一个元素在小程序里的精准位置和精准大小，不过这个尺寸单位处理图片起来经常需要换算挺麻烦的，我们来看下面的处理方法。

图片的裁剪

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

小程序是通过 mode 的方式来对图片进行裁剪的，大家可以去阅读一下 image 组件关于 13 种 mode 模式的说明。

技术文档：image 组件技术文档

如果我们想处理好上面的图片，我们该怎么处理呢？按照技术文档，我们可以给 image 组件添加一个 widthFix 模式：宽度不变，高度自动变化，保持原图宽高比不变。

<view class="imglist">

    <image class="imgitem" mode="widthFix" src="https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/weapp.jpg"></image>

</view>

然后给图片添加 wxss 样式：

.imglist .imgitem{

  width: 100%;

}

也就是说设置图片的宽度为百分比样式，而高度则自动变化，保持原图宽高比不变。

百分比是网页、移动端等用来布局以及定义大小的一个非常重要的单位，大家要多学多练多分析哦~

当然还会有这样的一个要求，我们希望图片全屏显示，但是设计师却只给图片预留了一个很小的高度，这样我们就必须对图片进行一定的裁剪了，我们可以在 imgshow.wxml 这样写。

<view class="imglist">

     <image class="imgfull" mode="center" src="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/background.png"></image>

  </view>

而在 imgshow.wxss 里面添加一些样式

.imglist .imgfull{

  width: 100%;

  height: 100px;

}

大家可以在开发者工具以及通过扫描开发者工具预览生成的二维码在手机上体验一下，并把这里的 mode=”center”，换成其他 12 个模式来了解一下，不同的模式对图片裁剪的影响。

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

背景属性

背景属性也是属于 CSS 方面的知识，所谓背景属性就是给组件添加一些颜色背景或者图片背景。由于 css 的背景属性尤其是当我们想用一张图片作为组件的背景时，也会涉及到背景图片的位置与裁剪，这个和小程序 image 组件的裁剪多少有一些相通之处，所以我们就把 CSS 的背景属性放到这里来讲一下~

以下是我们经常会使用到的 css 背景属性以及相对应的技术文档，和之前我们强调的一样，技术文档是来翻阅和深入学习的，大家可以先用背景属性做出一些效果再说~

背景属性 备注
background 在一个声明中设置所有的背景属性。
background-color 设置元素的背景颜色。
background-image 设置元素的背景图像。
background-size 规定背景图片的尺寸。
background-repeat 设置是否及如何重复背景图像。

比如我们可以给我们之前写好的 home 页面，id 为 wxmlinfo 的 view 组件加一个背景颜色以及 id 为 studyweapp 的 view 组件添加一个背景图片：

#wxmlinfo{

  background-color: #dae7d9;

}

#studyweapp{

  background-image: url(https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/bg.png);

  background-size: cover;

  background-repeat: no-repeat;

}

大家注意，写在 wxss 里的图片只能来自服务器或者图床，不能放在小程序的文件结构里，这是小程序的一个规定。

图片的边框美化

我们经常在一些 app 里看到很多图片它有圆角或者阴影，那这个是怎么实现的呢？这些效果是通过 css 的边框属性来实现的。

大家可以在小程序的 image 文件夹添加一张深色背景的图片（如果小程序的背景是深色的，图片背景是白色也是可以的）。我们给之前添加的 image 组件加一个圆角和阴影样式，在 imgshow.wxss 添加以下代码：


 .imglist .img{

  border-radius: 8px;

  box-shadow: 5px 8px 30px rgba(53,178,225,0.26);

}

图片有了圆角，有了阴影就有了一些现代感啦。

这里用到了一个颜色就是 rgba 颜色值。RGB 前面我们要求大家查过，RGBA(R,G,B,A)的 R 是红色值，G 是绿色值，B 是蓝色值，R,G,B 的值取值范围是 0~255，A 是 Alpha 透明度，取值 0~1 之间，越靠近 0 越透明。

我们来重新回顾一下边框属border-radius和box-shadow，大家可以点击链接查看技术文档的详情。

除了圆角，我们经常会有把图片做成圆形的需求，我们来看具体的例子。首先在 wxml 文件里输入以下代码，添加一个 logo 图片，

<view class="imglist">

    <image class="circle" mode="widthFix" src="https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/logo.jpg"></image>

</view>

然后在与之对应的 wxss 文件里添加相应的 css 样式，

.imglist .circle{

  width: 200px;

  height: 200px;

  border-radius: 100%;

}

也就是我们只需要定义了图片长宽之后，再来定义一下 border-radius 为 100%即可把图片做成圆形。

view、navigator、image 组件嵌套

前面我们学习了 Navigator 组件里添加一段文字，实现点击文字进行链接的跳转，Navigator 组件还可以嵌套 view 组件，比如我们点击某块的内容会进行一个跳转。和 view 组件一样， Navigator 组件也是可以嵌套的。

比如我们在 home.wxml 里输入以下代码：

<view class="event-list">

    <navigator url="/pages/home/imgshow/imgshow" class="event-link">

        <view class="event-img">

            <image mode="widthFix" src="https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/weapp.jpg"></image>

        </view>

        <view class="event-content">

            <view class="event-title">零基础学会小程序开发</view>

            <view class="event-desc">通过两天集中的学习，你会循序渐进的开发出一些具有实际应用场景的小程序。 </view>

            <view class="event-box">

                <view class="event-address">深圳南山</view>

                <view class="event-time">2018年9月22日-23日</view>

            </view>

        </view>

    </navigator>

</view>

在 home.wxss 里输入以下样式：

.event-list{

  background-color: #fafbfc;

  padding: 20px 0;

  }

.event-link{

  margin: 10px;

  border-radius: 5px;

  background-color: #fff;

  box-shadow:5rpx 8rpx 10rpx rgba(53,178,225,0.26);

  overflow: hidden;

}

.event-img image{

  width: 100%;

  }

.event-content{

  padding: 25rpx;

  }

.event-title{

  line-height: 1.7em;

  }

.event-desc{

  font-size: 14px;

  color: #666;

  line-height: 1.5em;

  font-weight: 200;

  }

.event-box{

  margin-top: 15px;

  overflow: hidden;

  }

.event-address,.event-time{

  float: left;

  color: #cecece;

  font-size: 12px;

  padding-right: 15px;

  }
< 上一篇 WXML与WXSS下一篇 WeUI框架 >

本文出自 李东bbsky

京公网安备 11010802017518 粤B2-20090059 域名注册服务机构批复文号：京信信管发〔2018〕156号 代理域名注册服务机构：新网数码

友情链接
友情链接>

copyright©2013 - 2020

Tencent Cloud.All Rights Reserved.

腾讯云 版权所有