小程序云开发（十四）：小程序的组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序云开发（十四）：小程序的组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

🔗 运行环境：小程序云开发

🚩 撰写作者：左手の明天

🥇 精选专栏：《python》

🔥 推荐专栏：《算法研究》

🔐#### 防伪水印——左手の明天 ####🔐

💗 大家好🤗🤗🤗，我是左手の明天！好久不见💗

💗今天更新小程序云开发💗

📆 最近更新：2024 年 03 月 11 日，左手の明天的第 318 篇原创博客

📚 更新于专栏：小程序开发

🔐#### 防伪水印——左手の明天 ####🔐

在前面已经接触过表示文本的<text>组件、表示图像的<image>组件、表示视图容器的<view>组件，表示链接的<navigator>组件，这些组件大大丰富了小程序的结构布局和元素类型，接下来介绍一些组件。

1 组件的属性

前面我们已经通过实战的方式接触了一些组件，这个时候我们再回头理解一些基础的概念，那就是组件的属性。

公共属性是指小程序所有的组件都有的属性，比如id、class、style等，而不同属性的值就是数据，有数据就有数据类型。

技术文档：小程序组件

大家可以打开上面的技术文档，快速了解一下组件的公共属性有哪些，以及属性有哪些类型，各个类型的数据类型和取值说明。而不同的组件除了都有公共属性外，还有自己的特有属性。查阅技术文档，大家能够理解多少是多少，不要去强行理解和记忆。

擅于查阅技术文档，是任何方向的程序员必备的非常重要的能力，就跟学英语查词典一样。在实际开发中，一个新的技术方向你所能依赖的不再有老师这样的角色，因为没有人有义务教你。技术文档和搜索能力是你最可信赖的依靠。

2 轮播效果

很多App和小程序的页面顶部都有一个图片的轮播，小程序有专门的轮播组件swiper。要详细了解轮播组件swiper，当然少不了要阅读官方的技术文档啦

技术文档： 轮播组件swiper

使用开发者工具，在home.wxml里输入以下代码：

<view class="home-top">
  <view class="home-swiper">
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{activecolor}}">
      <block wx:for="{{imgUrls}}" wx:key="*this" >
        <swiper-item>
            <image src="{{item}}" style="width:100%;height:200px" class="slide-image" mode="widthFix"  />
        </swiper-item>
      </block>
    </swiper>
  </view>
</view>

然后在home.js里的data里添加以下数据：

imgUrls: [
  'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
  'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
  'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
],
interval: 5000,
duration: 1000,
indicatorDots: true,
indicatorColor: "#ffffff",
activecolor:"#2971f6",
autoplay: true,

要构成一个完整的轮播，除了配置相同尺寸规格的图片以外，还可以配置轮播时的面板指示点、动画效果、是否自动播放等。轮播组件swiper自带很有特有的属性，大家可以自己动手多去配置，结合开发者工具实战的效果，来深入理解技术文档对这些属性以及属性的取值的说明。

3 audio组件

audio组件是音频组件，我们在home.wxml文件里输入以下代码：

<audio src="{{musicinfo.src}}" poster="{{musicinfo.poster}}" name="{{musicinfo.name}}" author="{{musicinfo.author}}" controls></audio>

然后在home.js里的data里添加以下数据：

musicinfo: {
  poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
  name: '此时此刻',
  author: '许巍',
  src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
},

技术文档： audio组件技术文档

src：要播放音频的资源地址
poster：默认控件上的音频封面的图片资源地址
name：默认控件上的音频名字
author：默认控件上的作者名字

需要注意的是audio组件以后就要被抛弃了，这里只是让大家了解一下基础的组件构成，后面的章节会具体介绍如何使用小程序的API来创建音乐播放。

4 video组件

video组件用来表示视频，我们在home.wxml文件里输入以下代码：

<video id="daxueVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" autoplay loop muted initial-time="100" controls event-model="bubble">
</video>

技术文档： video组件技术文档

大家可以结合实际效果和技术文档来理解以下属性，把上面案例的autoplay或者某个属性删掉查看一下具体效果，加深自己对组件属性的理解。

autoplay：是否自动播放
loop：是否循环播放
muted：是否静音播放
inital-time：指定视频初始播放位置，单位是秒
controls：是否显示默认播放控件

5 cover效果

我们也可以把view、图片组件覆盖在地图map或视频video组件之上。比如我们希望在视频的左上角显示视频的标题以及在右上角显示商家的logo，就可以使用cover效果。

<video id="daxueVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls event-model="bubble">
   <view class="covertext">腾讯大学：腾讯特色学习交流平台</view>
   <image class="coverimg" src="https://imgcache.qq.com/open_proj/proj_qcloud_v2/gateway/portal/css/img/nav/logo-bg-color.svg" ></image>
</video>

在wxss文件里输入以下代码:

.covertext{
  width: 500rpx;
  color: white;
  font-size: 12px;
  position: absolute;
  top:20rpx;
  left:10rpx;
}
.coverimg{
  width:100rpx;height:23rpx;
  position: absolute;
  right:10rpx;
  top:10rpx;
}

6 地图

（1）经纬度获取并显示

要想在地图上标记一个地点，首先我们需要知道该地点的经纬度，这个时候就需要使用到坐标拾取器的工具。

经纬度获取：腾讯地图坐标拾取器

在搜索框里我们可以搜索“深圳腾讯大厦”，得到纬度为22.540503，经度为113.934528。

使用开发者工具，在home.wxml里输入以下代码：

<map
  id="myMap"
  style="width: 100%; height: 300px;"
  latitude="{{latitude}}"
  longitude="{{longitude}}"
  markers="{{markers}}"
  covers="{{covers}}"
  show-location
></map>

然后在home.js的data里添加以下代码：

latitude: 22.540503,
longitude: 113.934528,
markers: [{
  id: 1,
  latitude: 22.540503,
  longitude: 113.934528,
  title: '深圳腾讯大厦'
}],

在开发者工具的模拟器里我们就可以看到腾讯大厦的地图了，点击marker标记，就能看到自定义的名称深圳腾讯大厦了。点击开发者工具的预览，使用手机微信扫描生成的二维码，在手机微信里的地图和模拟器的略微有点不同。

技术文档：Map组件技术文档

（2）在地图上标记多个点

注意从技术文档里我们可以了解到markers标记点用于在地图上显示标记的位置，它的数据类型是Array数组，我们也看到上面的案例它的数据是由中括号[]包住的列表。也就是我们可以在地图上标记多个点。在markers里多添加几个坐标：

markers: [{
  id: 1,
  latitude: 22.540503,
  longitude: 113.934528,
  title: '深圳腾讯大厦'
  },
  {
    id: 2,
    latitude: 22.540576,
    longitude: 113.933790,
    title: '万利达科技大厦'
  },
  {
    id: 3,
    latitude: 22.522807,
    longitude: 113.935338,
    title: '深圳腾讯滨海大厦'
  },
  {
    id: 4,
    latitude: 22.547400,
    longitude: 113.944370,
    title: '腾讯C2'
}],

这里标记了腾讯在深圳的4个办公地点，大家可以在手机上预览了解实际的效果。地图是一个非常复杂的组件，除了marker，还有以下属性，大家可以根据实际需求自行研究。文章来源地址https://www.toymoban.com/news/detail-846625.html