小程序快速入门教程 1.3 链接与图片

前言

前两节学习了文字，这节学习下链接和图片组件，让我们的小程序在形式上更丰富一些。

小能手这段时间在学习微信小程序开发，按照 UI、API、云开发 三个部分并结合示例系统性地学习，并实现了一个物联网小程序“花花草草守护仪”，详细可点此查看小程序快速入门教程。

1 使用 navigator 组件来添加链接

在 app.json 的 pages 配置项⾥新建⼀个二级⻚⾯ imgshow ：

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

在 home.wxml 中增加 navigator 组件，详细可查看官方 navigator 文档，url 使用相对路径跳转到刚新建的二级页面：

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

在 home.wxss ⾥给这个组件添加⼀个样式，使得看起来更像一个链接：

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

2 image 组件

接下来，我们尝试在 imgshow ⻚⾯中增加 image 组件。

在 imgshow.wxml 中增加 image 组件：

<view id="imgsection">
  <view class="title">⼩程序显示图⽚</view>
  <view class="imglist">
    <image class="imgicon" src="/image/icon-home.png"></image>
  </view>
</view>

在 imgshow.wxss 中给该组件增加样式，调整下图片的大小：

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

3 image 组件的更多玩法

3.1 使用外链图片

上一步的 image 组件使用的是本地的图片，更推荐大家使用外链图片：

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

3.2 图片的裁剪和缩放

大部分情况下图片大小都还需要做调整，在官方文档中还提到了13种图片裁剪缩放的模式，我们可以利用这 13 个 mode 方便地实现想要的效果。

以 widthFix mod 为例：

widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

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

给图片组件再套个样式，设置图⽚的宽度为百分⽐样式，⽽⾼度则⾃动变化，保持原图宽⾼⽐不变：

.imglist .imgitem{
  width: 100%;
}

3.3 将图片用作背景

css 的背景图片属性 background-image 可以用于设置背景图片：

#studyweapp{
  background-image: url(https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}

3.4 美化图片的边框

css 的边框属性 border-radius 可以用于给组件添加圆角边框，这个例子中给 imgitem 的组件设置了圆角边框：

.imgitem{
  border-radius: 18px;
  box-shadow: 5px 8px 30px rgba(53,178,225,0.26);
}

3.5 navigator 组件嵌套 image 组件 实现图片点击跳转

前⾯我们学习了Navigator组件⾥添加⼀段⽂字，实现点击⽂字进⾏链接的跳转，Navigator组件还可以嵌套view组件，⽐如我们点击某块的内容会进⾏⼀个跳转。和view组件⼀样，Navigator组件也是可以嵌套的。

<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>

4 小结

这节学习了 navigator 组件用于页面跳转，还学习了最常见的图片组件以丰富我们小程序展示，同时还介绍了外链图片、图片裁剪缩放模式、背景图片、美化边框、图片点击跳转等操作。

如果你对源码有疑问，可参考 我在 github 的 DEMO 提交，lesson 3 就是针对这一节的代码修改。

END

---