前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序快速入门教程 1.3 链接与图片

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

作者头像
twowinter
发布2020-04-17 11:29:01
8580
发布2020-04-17 11:29:01
举报
文章被收录于专栏:twowinter

前言

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

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

1 使用 navigator 组件来添加链接

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

代码语言:javascript
复制
"pages/home/home",
"pages/home/imgshow/imgshow",
"pages/list/list",
"pages/partner/partner",
"pages/more/more"

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

代码语言:javascript
复制
<view class="index-link">
  <navigator url="./../home/imgshow/imgshow" class="item-link">让⼩程序显示图片 </navigator>
</view>

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

代码语言:javascript
复制
.item-link{
  margin: 20px;
  padding:10px 15px;
  background-color: #4ea6ec;
  color: #fff;
  border-radius: 4px;
}

2 image 组件

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

在 imgshow.wxml 中增加 image 组件:

代码语言:javascript
复制
<view id="imgsection">
  <view class="title">⼩程序显示图⽚</view>
  <view class="imglist">
    <image class="imgicon" src="/image/icon-home.png"></image>
  </view>
</view>

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

代码语言:javascript
复制
imglist{
  text-align: center;
}
.imglist .imgicon{
  width: 200px;
  height: 200px;
  margin: 20px;
}

3 image 组件的更多玩法

3.1 使用外链图片

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

代码语言:javascript
复制
<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 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变

代码语言:javascript
复制
<view class="imglist">
  <image class="imgitem" mode="widthFix"  src="https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/weapp.jpg">
  </image>
</view>

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

代码语言:javascript
复制
.imglist .imgitem{
  width: 100%;
}

3.3 将图片用作背景

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

代码语言:javascript
复制
#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 的组件设置了圆角边框:

代码语言:javascript
复制
.imgitem{
  border-radius: 18px;
  box-shadow: 5px 8px 30px rgba(53,178,225,0.26);
}

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

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

代码语言:javascript
复制
<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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 1 使用 navigator 组件来添加链接
  • 2 image 组件
  • 3 image 组件的更多玩法
    • 3.1 使用外链图片
      • 3.2 图片的裁剪和缩放
        • 3.3 将图片用作背景
          • 3.4 美化图片的边框
            • 3.5 navigator 组件嵌套 image 组件 实现图片点击跳转
            • 4 小结
            • END
            相关产品与服务
            云开发 CloudBase
            云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档