微信開發之旅———Day7（媒體api——上）

摘要： （昨天不太舒服就鴿了一天，今天補上一起發） 前天看了一個最常用的網路api—— wx.request ！ 然後可能會有人問了，我想自己寫api，怎麼去做呢？這裡給大家提供一個思路，就是用spring boot去寫api，僅需要少量的配置，開發複雜度大大降低。（有需求的同學可以先去了...

（昨天不太舒服就鴿了一天，今天補上一起發）

前天看了一個最常用的網路api—— wx.request ！

然後可能會有人問了，我想自己寫api，怎麼去做呢？這裡給大家提供一個思路，就是用spring boot去寫api，僅需要少量的配置，開發複雜度大大降低。（有需求的同學可以先去了解一下，我之後可能也會開一篇從零學spring boot吧，有興趣的朋友們可以關注一下）。

之前還說過，除了這個api還有很多api，這裡就不一一演示了，因為沒有現成的api供大家使用，所以看一下用法就ok，實際操作和wx.request大同小異。

詳情戳這裡

• uploadFile
• downloadFile
• WebSocket

媒體api

今天我們主要來看看媒體api，媒體api大致分為5類：

• 圖片api
• 錄音api
• 音訊播放控制api
• 音樂播放控制api
• 視訊api

先來看一下圖片api

圖片api

圖片api主要實現對本地相簿圖片或相機拍照圖片的處理，目前包括6個api介面

• wx.saveImageToPhotosAlbum(Object object) 介面用於預覽圖片。
• wx.previewImage(Object object) 介面用於在新頁面中全屏預覽圖片。預覽的過程中使用者可以進行儲存圖片、傳送給朋友等操作。
• wx.getImageInfo(Object object) 介面用於獲取圖片資訊。網路圖片需先配置download域名才能生效。
• wx.compressImage(Object object) 介面用於壓縮圖片介面，可選壓縮質量。
• wx.chooseMessageFile(Object object) 介面用於從客戶端會話選擇檔案。
• wx.chooseImage(Object object) 介面用於從本地相簿選擇圖片或使用相機拍照。

來一個一個看一下

1.wx.saveImageToPhotosAlbum(Object object) 介面用於預覽圖片。

More Actions屬性型別必填說明filePathstring是圖片檔案路徑，可以是臨時檔案路徑或永久檔案路徑，不支援網路圖片路徑successfunction否介面呼叫成功的回撥函式failfunction否介面呼叫失敗的回撥函式completefunction否介面呼叫結束的回撥函式（呼叫成功、失敗都會執行）

屬性	型別	必填	說明
filePath	string	是	圖片檔案路徑，可以是臨時檔案路徑或永久檔案路徑，不支援網路圖片路徑
success	function	否	介面呼叫成功的回撥函式
fail	function	否	介面呼叫失敗的回撥函式
complete	function	否	介面呼叫結束的回撥函式（呼叫成功、失敗都會執行）

示例程式碼

wx.saveImageToPhotosAlbum({
success(res) { }
})

2.wx.previewImage(Object object)介面用於在新頁面中全屏預覽圖片。預覽的過程中使用者可以進行儲存圖片、傳送給朋友等操作。

屬性	型別	預設值	必填	說明
urls	Array		是	需要預覽的圖片連結列表。 2.2.3 起支援雲檔案ID。
current	string	urls 的第一張	否	當前顯示圖片的連結
success	function		否	介面呼叫成功的回撥函式
fail	function		否	介面呼叫失敗的回撥函式
complete	function		否	介面呼叫結束的回撥函式（呼叫成功、失敗都會執行）

示例程式碼

wx.previewImage({
current: '', // 當前顯示圖片的http連結
urls: [] // 需要預覽的圖片http連結列表
})

3.wx.getImageInfo(Object object) 介面用於獲取圖片資訊。網路圖片需先配置download域名才能生效。

屬性	型別	必填	說明
src	string	是	圖片的路徑，可以是相對路徑、臨時檔案路徑、儲存檔案路徑、網路圖片路徑
success	function	否	介面呼叫成功的回撥函式
fail	function	否	介面呼叫失敗的回撥函式
complete	function	否	介面呼叫結束的回撥函式（呼叫成功、失敗都會執行）

示例程式碼

wx.getImageInfo({
src: 'images/a.jpg',
success(res) {
console.log(res.width)
console.log(res.height)
}
})

wx.chooseImage({
success(res) {
wx.getImageInfo({
src: res.tempFilePaths[0],
success(res) {
console.log(res.width)
console.log(res.height)
}
})
}
})

4.wx.compressImage(Object object) 介面用於壓縮圖片介面，可選壓縮質量。

屬性	型別	預設值	必填	說明
src	string		是	圖片路徑，圖片的路徑，可以是相對路徑、臨時檔案路徑、儲存檔案路徑
quality	number	80	否	壓縮質量，範圍0～100，數值越小，質量越低，壓縮率越高（僅對jpg有效）。
success	function		否	介面呼叫成功的回撥函式
fail	function		否	介面呼叫失敗的回撥函式
complete	function		否	介面呼叫結束的回撥函式（呼叫成功、失敗都會執行）

示例程式碼

wx.compressImage({
src: '', // 圖片路徑
quality: 80 // 壓縮質量
})

5.wx.chooseMessageFile(Object object) 介面用於從客戶端會話選擇檔案。

屬性	型別	預設值	必填	說明
count	number	100	否	最多可以選擇的圖片張數，可以 0～100
type	string	'all'	否	所選的檔案的型別
success	function		否	介面呼叫成功的回撥函式
fail	function		否	介面呼叫失敗的回撥函式
complete	function		否	介面呼叫結束的回撥函式（呼叫成功、失敗都會執行）

示例程式碼

wx.chooseMessageFile({
count: 10,
type: 'image',
success(res) {
// tempFilePath可以作為img標籤的src屬性顯示圖片
const tempFilePaths = res.tempFilePaths
}
})

6.wx.chooseImage(Object object) 介面用於從本地相簿選擇圖片或使用相機拍照。

屬性	型別	預設值	必填	說明
count	number	9	否	最多可以選擇的圖片張數
sizeType	Array	['original', 'compressed']	否	所選的圖片的尺寸
sourceType	Array	['album', 'camera']	否	選擇圖片的來源
success	function		否	介面呼叫成功的回撥函式
fail	function		否	介面呼叫失敗的回撥函式
complete	function		否	介面呼叫結束的回撥函式（呼叫成功、失敗都會執行）

示例程式碼

wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作為img標籤的src屬性顯示圖片
const tempFilePaths = res.tempFilePaths
}
})

實踐

然後上一波實驗程式碼，學完一定要實踐，不然相當於沒學！在實踐中才能真正搞懂文件到底講的什麼。

今天的程式碼依然沒有任何美化，只是功能的實踐（大概這就是直男吧）

<!--pages/mt/mt.wxml-->
<button bindtap='ciBtn'>chooseImage</button>
<button bindtap='cmfBtn'>chooseMessageFile</button>
<button bindtap='piBtn'>previewImage</button>
<button bindtap='giiBtn'>getImageInfo</button>
<button bindtap='sitpaBtn'>saveImageToPhotosAlbum</button>
src: <text>{{info}}</text>
<view wx:for="{{p}}" wx:for-item="image">
<image src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>
</view>

// pages/mt/mt.js
Page({

/**
* 頁面的初始資料
*/
data: {
p:null,
info:null
},

//選擇圖片，這裡我設定可以選擇兩張
ciBtn:function(){
var that = this;
wx.chooseImage({
count:2,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function(res) {
var tempFilePaths = res.tempFilePaths
console.log(tempFilePaths)
that.setData({
p:tempFilePaths
})
},
})
},

//預覽圖片
piBtn:function(){
wx.previewImage({
urls:this.data.p,
current: this.data.p[0],
})
},

//獲取圖片資訊，其實資訊有很多，這裡只打印了圖片路徑
giiBtn:function(){
var s = this.data.p[0];
var that = this;
wx.getImageInfo({
src: s,
success(res){
that.setData({
info: res.path
})
}
})
},

//另外一種匯入圖片的方式，同時可以匯入其他檔案
cmfBtn:function(){
var that = this;
wx.chooseImage({
count: 10,
type: 'image',
success: function (res) {
var tempFilePaths = res.tempFilePaths
console.log(tempFilePaths)
that.setData({
p: tempFilePaths
})
},
})
},

//儲存圖片到本地
sitpaBtn:function(){
wx.saveImageToPhotosAlbum({
filePath: this.data.p[0],
success(res){
console.log('儲存成功')
}
})
}

})

要注意的是，這次程式碼裡面沒去做過多邏輯的處理，所以一定先上傳圖片再做其他的功能，否則我也不知道會出什麼bug。。。

然後這裡再提一點關於使用方面的問題，除錯的時候其實可以不用每次都用console.log（）去檢視每一個變數的值，可以直接在控制檯的appdata裡面檢視資料。會方便很多！

好了，關於圖片這部分的api就先看到這裡吧。！

上一篇： 微信開發之旅———Day6（遠端請求）

下一篇：