小程序云开发学习指南
小程序云开发学习指南
阅读(3.9k) 书签 赞(0) 我要纠错

云开发 链接与图片

2020-07-17 16:33 更新

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

navigator组件

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

技术文档：[navigator组件技术文档]( https://www.w3cschool.cn/weixinapp/weixinapp-navigator.html )

二级页面

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

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

  1. "pages/home/home",
  4.     "pages/home/imgshow/imgshow",
  7.     "pages/list/list",
  10.     "pages/partner/partner",
  13.     "pages/more/more"

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

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

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

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

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

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

  1. /pages/home/imgshow/imgshow

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

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

相对路径与绝对路径

相对路径

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

  • "./" 代表当前目录 <img src="./img/icon.jpg" />等同于<img src="img/icon.jpg" />
  • “../” 代表上一级目录
  • "/" 当前根目录，是相对目录；<img src="/img/icon.jpg" />

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

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

绝对路径

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

  1. 7n.w3cschool.cn/attachments/knowledge/202006/77455.png

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

image组件

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

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

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

  1. <view id="imgsection">
  4.   <view class="title">小程序显示图片</view>
  7.   <view class="imglist">
  10.     <image class="imgicon" src="/image/icon-tab1.png"></image>
  13.   </view>
  16. </view>

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

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

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

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

  1. .imglist{
  4.   text-align: center;
  7. }
  10. .imglist .imgicon{
  13.   width: 200px;
  16.   height: 200px;
  19.   margin: 20px;
  22. }

云存储

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

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

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

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

  1. <view class="imglist">
  4.     <image class="imgitem" src="7n.w3cschool.cn/attachments/knowledge/202006/77455.png"></image>
  7. </view>

尺寸单位rpx

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

技术文档：尺寸单位rpx

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

  1.  .imglist .imgitem{
  4.   width: 700rpx;
  7.   height: 415rpx;
  10.   margin: 20rpx;
  13. }

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

图片的裁剪

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

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

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

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

  1. <view class="imglist">
  4.     <image class="imgitem" mode="widthFix" src="7n.w3cschool.cn/attachments/knowledge/202006/77455.png"></image>
  7. </view>

然后给图片添加wxss样式：

  1. .imglist .imgitem{
  4.   width: 100%;
  7. }

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

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

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

  1. <view class="imglist">
  4.      <image class="imgfull" mode="center" src="7n.w3cschool.cn/attachments/knowledge/202006/77455.png"></image>
  7.   </view>

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

  1. .imglist .imgfull{
  4.   width: 100%;
  7.   height: 100px;
  10. }

大家可以在开发者工具以及通过扫描开发者工具预览生成的二维码在手机上体验一下，并把这里的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组件添加一个背景图片：

  1. #wxmlinfo{
  4.   background-color: #dae7d9;
  7. }
  10. #studyweapp{
  13.   background-image: url(https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/bg.png);
  16.   background-size: cover;
  19.   background-repeat: no-repeat;
  22. }

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

图片的边框美化

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

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

  3.  .imglist .img{
  6.   border-radius: 8px;
  9.   box-shadow: 5px 8px 30px rgba(53,178,225,0.26);
  12. }

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

这里用到了一个颜色就是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图片，

  1. <view class="imglist">
  4.     <image class="circle" mode="widthFix" src="https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/logo.jpg" rel="external nofollow" ></image>
  7. </view>

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

  1. .imglist .circle{
  4.   width: 200px;
  7.   height: 200px;
  10.   border-radius: 100%;
  13. }

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

view、navigator、image组件嵌套

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

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

  1. <view class="event-list">
  4.     <navigator url="/pages/home/imgshow/imgshow" class="event-link">        
  7.         <view class="event-img">
  10.             <image mode="widthFix" src="https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/weapp.jpg" rel="external nofollow" ></image>
  13.         </view>
  16.         <view class="event-content">
  19.             <view class="event-title">零基础学会小程序开发</view>
  22.             <view class="event-desc">通过两天集中的学习，你会循序渐进的开发出一些具有实际应用场景的小程序。 </view>
  25.             <view class="event-box">
  28.                 <view class="event-address">深圳南山</view>
  31.                 <view class="event-time">2018年9月22日-23日</view>
  34.             </view>
  37.         </view>
  40.     </navigator>
  43. </view>

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

  1. .event-list{
  4.   background-color: #fafbfc;
  7.   padding: 20px 0;
  10.   }
  13. .event-link{
  16.   margin: 10px;
  19.   border-radius: 5px;
  22.   background-color: #fff;
  25.   box-shadow:5rpx 8rpx 10rpx rgba(53,178,225,0.26);
  28.   overflow: hidden;
  31. }
  34. .event-img image{
  37.   width: 100%;
  40.   }
  43. .event-content{
  46.   padding: 25rpx;
  49.   }
  52. .event-title{
  55.   line-height: 1.7em;
  58.   }
  61. .event-desc{
  64.   font-size: 14px;
  67.   color: #666;
  70.   line-height: 1.5em;
  73.   font-weight: 200;
  76.   }
  79. .event-box{
  82.   margin-top: 15px;
  85.   overflow: hidden;
  88.   }
  91. .event-address,.event-time{
  94.   float: left;
  97.   color: #cecece;
  100.   font-size: 12px;
  103.   padding-right: 15px;
  106.   }
以上内容是否对您有帮助：
← 云开发 WXML与WXSS
云开发 WeUI框架 →

推荐文章

推荐教程

推荐课程

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号