小程序组件

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

组件的属性

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

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

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

小任务：通过技术文档了解一下<text&组件、<image&组件、<view&组件、<navigator&组件有哪些私有属性。

擅于查阅技术文档，是任何方向的程序员必备的非常重要的能力，就跟学英语查词典一样。

在实际开发中，一个新的技术方向你所能依赖的不再有老师这样的角色，因为没有人有义务教你。技术文档和搜索能力是你最可信赖的依靠。

轮播效果

很多App和小程序的页面顶部都有一个图片的轮播，小程序有专门的轮播组件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自带很有特有的属性，大家可以自己动手多去配置，结合开发者工具实战的效果，来深入理解技术文档对这些属性以及属性的取值的说明。

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组件使用的场景和频次都非常低，audio组件以后就要被抛弃了，需要用到小程序的API来创建音乐播放。

video组件

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

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

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

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" rel="external nofollow"  rel="external nofollow"  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" rel="external nofollow"  ></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;
    }

地图组件

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

在搜索框里我们可以搜索“深圳腾讯大厦”，得到纬度为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标记，就能看到自定义的名称深圳腾讯大厦了。点击开发者工具的预览，使用手机微信扫描生成的二维码，在手机微信里的地图和模拟器的略微有点不同。

在地图上标记多个点

注意从技术文档里我们可以了解到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，还有以下属性，大家可以根据实际需求自行研究。