小程序云开发学习指南云开发小程序组件

2024-02-25 开发教程小程序云开发学习指南匿名 2℃

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

组件的属性

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

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

技术文档：小程序组件

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

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

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

轮播效果

很多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自带很有特有的属性，大家可以自己动手多去配置，结合开发者工具实战的效果，来深入理解技术文档对这些属性以及属性的取值的说明。

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组件使用的场景和频次都非常低，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>

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

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

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

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

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

在地图上标记多个点

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

callout:点击marker出现气泡callout、以及气泡上的label，可以丰富点击地图标记弹出丰富的信息介绍；
circle：在地图上显示圆，比如用于显示方圆几公里，或者权重大小在地图的可视化
polygon：指定一系列坐标点，根据 points 坐标数据生成闭合多边形,，比如圈出实际的范围
polyline：指定一系列坐标点，从数组第一项连线至最后一项，比如跑步的路线

上一节：云开发列表渲染与条件渲染

下一节：云开发优化与部署上线

"小程序云开发学习指南"的目录

小程序云开发学习指南 云开发 小程序组件