云開發(fā) 小程序組件

2020-07-20 11:21 更新

在前面我們已經接觸過表示文本的<text>組件、表示圖像的<image>組件、表示視圖容器的<view>組件，表示鏈接的<navigator>組件，這些組件大大豐富了小程序的結構布局和元素類型，接下來我們還將介紹一些組件。

組件的屬性

前面我們已經通過實戰(zhàn)的方式接觸了一些組件，這個時候我們再回頭理解一些基礎的概念，那就是組件的屬性。

公共屬性是指小程序所有的組件都有的屬性，比如id、class、style等，而不同屬性的值就是數據，有數據就有數據類型。

技術文檔：小程序組件

大家可以打開上面的技術文檔，快速了解一下組件的公共屬性有哪些，以及屬性有哪些類型，各個類型的數據類型和取值說明。而不同的組件除了都有公共屬性外，還有自己的特有屬性。查閱技術文檔，大家能夠理解多少是多少，不要去強行理解和記憶。在實際開發(fā)中，很多屬性我們不會

小任務：通過技術文檔了解一下<text&組件、<image&組件、<view&組件、<navigator&組件有哪些私有屬性。

擅于查閱技術文檔，是任何方向的程序員必備的非常重要的能力，就跟學英語查詞典一樣。在實際開發(fā)中，一個新的技術方向你所能依賴的不再有老師這樣的角色，因為沒有人有義務教你。技術文檔和搜索能力是你最可信賴的依靠。

輪播效果

很多App和小程序的頁面頂部都有一個圖片的輪播，小程序有專門的輪播組件swiper。要詳細了解輪播組件swiper，當然少不了要閱讀官方的技術文檔啦

技術文檔：輪播組件swiper

使用開發(fā)者工具，在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,

要構成一個完整的輪播，除了配置相同尺寸規(guī)格的圖片以外，還可以配置輪播時的面板指示點、動畫效果、是否自動播放等。輪播組件swiper自帶很有特有的屬性，大家可以自己動手多去配置，結合開發(fā)者工具實戰(zhàn)的效果，來深入理解技術文檔對這些屬性以及屬性的取值的說明。

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來創(chuàng)建音樂播放。

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：是否循環(huán)播放
  • 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。

使用開發(fā)者工具，在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: '深圳騰訊大廈'
        }],

在開發(fā)者工具的模擬器里我們就可以看到騰訊大廈的地圖了，點擊marker標記，就能看到自定義的名稱深圳騰訊大廈了。點擊開發(fā)者工具的預覽，使用手機微信掃描生成的二維碼，在手機微信里的地圖和模擬器的略微有點不同。

技術文檔：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：指定一系列坐標點，從數組第一項連線至最后一項，比如跑步的路線
以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號