「小程序JAVA實戰」小程序多媒體組件（27）

轉自：https://idig8.com/2018/08/19/xiaochengxujavashizhanxiaochengxuduomeitizujian27/

來講下 ，小程序的多媒體組件。源碼：https://github.com/limingios/wxProgram.git 中的No.14

媒體組件

• audio
  

  能夠在小程序嵌入一些音樂，歌曲，mp3什麼的

• image
  

  任何小程序中必然會使用圖片組件

* video

視頻組件，主要視頻播放類的

• camera
  

  攝像頭組件，新版才提供的

• live-player
  

  直播相關的，跟自媒體有關係，在線直播什麼的。

• live-pusher
  

  直播相關的，跟自媒體有關係，在線直播什麼的。

重點說說image組件，其餘你們看下官網就行

懶加載比較經常使用。

<!--pages/image/image.wxml-->
<image src='https://developers.weixin.qq.com/miniprogram/dev/image/cat/0.jpg?t=18081622'></image>


<image src='{{imageSrc}}'></image>

<image src='{{imageSrc}}' style='width:200px;height:200pxx'></image>

<block wx:for="{{array}}">
  <image src='{{imageSrc}}' mode='{{item.mode}}' style='width:250px;height:250x' lazy-load='{{true}}' bindload='load'></image>
</block>

// pages/image/image.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    imageSrc:'../img/cat.jpg',
    array: [{
      mode: 'scaleToFill',
      text: 'scaleToFill：不保持縱橫比縮放圖片，使圖片徹底適應'
    }, {
      mode: 'aspectFit',
      text: 'aspectFit：保持縱橫比縮放圖片，使圖片的長邊能徹底顯示出來'
    }, {
      mode: 'aspectFill',
      text: 'aspectFill：保持縱橫比縮放圖片，只保證圖片的短邊能徹底顯示出來'
    }, {
      mode: 'top',
      text: 'top：不縮放圖片，只顯示圖片的頂部區域'
    }, {
      mode: 'bottom',
      text: 'bottom：不縮放圖片，只顯示圖片的底部區域'
    }, {
      mode: 'center',
      text: 'center：不縮放圖片，只顯示圖片的中間區域'
    }, {
      mode: 'left',
      text: 'left：不縮放圖片，只顯示圖片的左邊區域'
    }, {
      mode: 'right',
      text: 'right：不縮放圖片，只顯示圖片的右邊邊區域'
    }, {
      mode: 'top left',
      text: 'top left：不縮放圖片，只顯示圖片的左上邊區域'
    }, {
      mode: 'top right',
      text: 'top right：不縮放圖片，只顯示圖片的右上邊區域'
    }, {
      mode: 'bottom left',
      text: 'bottom left：不縮放圖片，只顯示圖片的左下邊區域'
    }, {
      mode: 'bottom right',
      text: 'bottom right：不縮放圖片，只顯示圖片的右下邊區域'
    }]


  },

  load: function(e){
    console.log(e.detail);
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {

  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

PS：image在後續的使用會愈來愈多，一塊兒學習進步吧。