第六章：小程序多媒體相關能力

作者：知曉雲 - 小程序開發快人一步
來源：知曉課堂

本章節介紹微信小程序已支持的多媒體資源，分別爲 image（圖片）、camera（照相機）、audio（音頻）、video（視頻）等媒體組件。

圖片

用法

本小節介紹 image 組件的使用方法。

在這六種多媒體組件中，開發者最爲熟悉的應該就是 image 組件了。幾乎任意一個可提供服務的小程序中都會用到圖片資源。它的使用方式也很簡單：

引入單個圖片資源，僅需一行代碼：

<image style="{{style}}" mode="{{mode}}" src="{{src}}"></image>

循環展示一個數組中的圖片數據：

<view class="section section_gap" wx:for="{{array}}" wx:for-item="item">
 <view>{{item.text}}</view>
 <view>
  <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{item.src}}"></image>
 </view>
</view>

屬性

本小節介紹 image 組件的屬性。

image 組件共 5 個屬性，最常使用的爲 src 和 mode。

1. src - 圖片資源地址字符串，String 類型，無默認值；

2. mode - 圖片裁剪、縮放的模式，String 類型，默認值爲 ‘scaleToFill’ ；

3. lazy-load - 圖片懶加載（只針對 page 與 scroll-view 下的 image 有效），Boolean 類型，默認值爲 false ；

4. binderror - 當錯誤發生時，發佈到 AppService 的事件名，事件對象event.detail = {errMsg: ‘something wrong’}， HandleEvent 類型，無默認值；

5. bindload - 當圖片載入完畢時，發佈到 AppService 的事件名，事件對象event.detail = {height:‘圖片高度px’, width:‘圖片寬度px’}，HandleEvent 類型，無默認值。

有了這 5 種屬性，開發者在提供了有效的資源地址後，可以決定是否讓圖片進行懶加載、如何裁剪和縮放圖片、捕獲圖片加載過程出錯事件和圖片加載完畢事件。加載出錯時可以獲知出錯原因，加載完畢時可以獲取圖片原始寬高。

相機

用法

使用系統相機功能時，需要用戶授權 scope.camera 。用戶同意授權後，可以操作系統相冊或者使用拍照功能。

下面是一段調用系統相機的示例代碼：點擊拍照按鈕，調用相機拍照，展示已拍攝圖片的預覽圖。

<!-- camera.wxml -->
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>預覽</view>
<image mode="widthFix" src="{{src}}"></image>

// camera.js
 
Page({
 takePhoto() {
  const ctx = wx.createCameraContext()
  ctx.takePhoto({
   quality: 'high',
   success: (res) => {
    this.setData({
     src: res.tempImagePath
    })
   }
  })
 },
 error(e) {
  console.log(e.detail)
 }
})

屬性

本小節介紹 camera 組件的 4 個屬性。

1. device-position - 前置或後置攝像頭， String類型， 取值爲 ‘front’ 和 ‘back’，默認值爲 ‘back’ ；

2. flash - 閃光燈，String 類型，取值爲 ‘auto’、 ‘on’、 ‘off’，默認值爲 ‘auto’ ；

3. bindstop - 攝像頭在非正常終止時觸發，如退出後臺等情況，EventHandle 類型，無默認值；

4. binderror - 用戶不允許使用攝像頭時觸發，EventHandle 類型，無默認值。

根據這 4 種屬性，開發者可以在調用系統相機拍照時控制相機的攝像頭爲前置或後置；是否啓用閃光燈；捕獲攝像頭異常終止事件；捕獲用戶拒絕授權使用攝像頭請求事件。

音頻

用法

在頁面中插入一段音頻資源。示例代碼如下：

<!-- audio.wxml -->
 
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio>
<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暫停</button>
<button type="primary" bindtap="audio14">設置當前播放時間爲 14 秒</button>
<button type="primary" bindtap="audioStart">回到開頭</button>

// audio.js
 
Page({
 
 onReady: function (e) {
 
  // 使用 wx.createAudioContext 獲取 audio 上下文 context
 
  this.audioCtx = wx.createInnerAudioContext('myAudio')
 
 },
 
 data: {
 
  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',
 
 },
 
 audioPlay: function () {
 
  this.audioCtx.play()
 
 },
 
 audioPause: function () {
 
  this.audioCtx.pause()
 
 },
 audio14: function () {
  this.audioCtx.seek(14)
 },
 audioStart: function () {
  this.audioCtx.seek(0)
 }
})

示例代碼實現了將音頻插入到當前頁面，操作音頻播放、暫停、設置當前音頻播放時長以及控制音頻播放完完畢後回到音頻開頭。

不難看出，僅使用一行代碼即可實現在頁面中插入音頻播放器：

<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio>

屬性

本小節介紹 audio 組件的 12 個屬性。

1. id - audio 組件的唯一標識， String類型，無默認值；

2. src - 音頻資源地址，String 類型，無默認值；

3. loop - 是否循環播放，Bollean 類型，默認值爲 false ；

4. controls - 是否顯示默認控件，Boolean 類型，默認值爲 false ；

5. poster - 默認控件上的音頻封面的圖片資源地址，如果 controls 屬性值爲 false 則設置 poster 無效，無默認值；

6. name - 默認控件上的音頻名字，如果 controls 屬性值爲 false 則設置 name 無效，無默認值；

7. author - 默認控件上的作者名字，如果 controls 屬性值爲 false 則設置 author 無效，無默認值；

8. binderror - 當發生錯誤時觸發 error 事件，detail = {errMsg: MediaError.code}

9. bindplay - 當開始 / 繼續播放時觸發 play 事件；

10. bindpause - 當暫停播放時觸發 pause 事件；

11. bindtimeupdate - 當播放進度改變時觸發 timeupdate 事件，detail = {currentTime, duration}

12. bindended - 當播放到末尾時觸發 ended 事件。

音頻組件允許開發設置與音頻資源相關的屬性，允許捕獲音頻播放過程中的事件：播放、暫停、播放進度改變、播放結束時和播放過程中出錯的事件。

播放過程出錯時，開發者可以通過 MediaError.code 來查看錯誤碼，對照一下錯誤碼錶即可知道錯誤原因：

MediaError.code

| 返回錯誤碼 | 描述 |

| ----- | --------- |

| 1 | 獲取資源被用戶禁止 |

| 2 | 網絡錯誤 |

| 3 | 解碼錯誤 |

| 4 | 不合適資源 |

視頻

用法

在頁面中插入一段視頻片段的示例代碼如下：

<view class="section tc">
 <video src="{{src}}"  controls ></video>
 <view>
  <button bindtap="bindButtonTap">獲取視頻</button>
 </view>
</view>

<view class="section tc">
 <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>
 <view>
  <button bindtap="bindButtonTap">獲取視頻</button>
  <input bindblur="bindInputBlur"/>
  <button bindtap="bindSendDanmu">發送彈幕</button>
 </view>
</view>
function getRandomColor () {
 let rgb = []
 for (let i = 0 ; i < 3; ++i){
  let color = Math.floor(Math.random() * 256).toString(16)
  color = color.length == 1 ? '0' + color : color
  rgb.push(color)
 }
 return '#' + rgb.join('')
}
 
Page({
 onReady: function (res) {
  this.videoContext = wx.createVideoContext('myVideo')
 },
 
 inputValue: '',
  data: {
    src: '',
  danmuList: [
   {
    text: '第 1s 出現的彈幕',
    color: '#ff0000',
    time: 1
   },
   {
    text: '第 3s 出現的彈幕',
    color: '#ff00ff',
    time: 3
  }]
  },
 
 bindInputBlur: function(e) {
  this.inputValue = e.detail.value
 },
 
 bindButtonTap: function() {
  var that = this
  wx.chooseVideo({
   sourceType: ['album', 'camera'],
   maxDuration: 60,
   camera: ['front','back'],
   success: function(res) {
    that.setData({
     src: res.tempFilePath
    })
   }
  })
 },
 
 bindSendDanmu: function () {
  this.videoContext.sendDanmu({
   text: this.inputValue,
   color: getRandomColor()
  })
 }
})

相關閱讀
第一章：一文了解小程序
第二章：手把手，動手編寫一個簡單小程序（上）
第三章：手把手，動手編寫一個簡單小程序（下）
第四章：如何開發一款內容展示類小程序（上）
第五章：如何開發一款內容展示類小程序（下）

【關注「知曉雲」公衆號，點擊菜單欄「知曉雲」-「知曉課堂」，獲取更多開發教程。】