文章目录
前言
前两节学习了文字,这节学习下链接和图片组件,让我们的小程序在形式上更丰富一些。
小能手这段时间在学习微信小程序开发,按照 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 就是针对这一节的代码修改。