微信小程式開發基礎篇(四)之請求、上傳、下載
阿新 • • 發佈:2019-01-27
針對前幾篇的基本的瞭解,然後我們首先要先學習和了解它的基本語法,我主要從API官網上學習,然後總結在這篇部落格中。供自己後期檢視。以備不時之需。因為自己也是初學者,很多的都是按照API來學習講解。
按照API的順序,我先學習網路的模組
一、請求:wx.request(OBJECT)
wx.request
發起的是 HTTPS 請求。
OBJECT引數說明:
引數名 | 型別 | 必填 | 說明 |
---|---|---|---|
url | String | 是 | 開發者伺服器介面地址 |
data | Object、String | 否 | 請求的引數 |
header | Object | 否 | 設定請求的 header , header 中不能設定 Referer |
method | String | 否 | 預設為 GET,有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT |
dataType | String | 否 | 預設為 json。如果設定了 dataType 為 json,則會嘗試對響應的資料做一次 JSON.parse |
success | Function | 否 | 收到開發者服務成功返回的回撥函式,res = {data: '開發者伺服器返回的內容'} |
fail | Function | 否 | 介面呼叫失敗的回撥函式 |
complete | Function | 否 | 介面呼叫結束的回撥函式(呼叫成功、失敗都會執行) |
示例程式碼:
wx.request({
url: 'test.php' , //僅為示例,並非真實的介面地址
data: {
x: '' ,
y: ''
},
header: {
'content-type': 'application/json'
},
success: function(res) {
console.log(res.data)
}
})
從上邊例項程式碼我們可以看到,()內有多個引數的時候,我們要用{ }括起來,然後每個用逗號分開,可以看到我們使用的屬性方法,每個屬性的後面使用冒號,然後再加{ },success後面是一個函式,我們可以從程式碼中 可以看到一旦請求data成功,就會在控制檯答打印出data的資料。
Bug & Tip
tip
: content-type 預設為 'application/json'bug
: 開發者工具0.10.102800
版本,header
的content-type
設定異常;tip
: 客戶端的 HTTPS TLS 版本為1.2,但Android
的部分機型還未支援 TLS 1.2,所以請確保 HTTPS 伺服器的 TLS 版本支援1.2及以下版本;tip
: 要注意 method 的 value 必須為大寫(例如:GET);tip
: url 中不能有埠;tip
: request 的預設超時時間和最大超時時間都是 60stip
: request 的最大併發數是 5tip
: 網路請求的 referer 是不可以設定的,格式固定為https://servicewechat.com/{appid}/{version}/page-frame.html
,其中{appid}
為小程式的 appid,{version}
為小程式的版本號,版本號為 0 表示為開發版。
wx.uploadFile(OBJECT)
將本地資源上傳到開發者伺服器。如頁面通過 wx.chooseImage 等介面獲取到一個本地資源的臨時檔案路徑後,可通過此介面將本地資源上傳到指定伺服器。客戶端發起一個 HTTPS POST
請求,其中 content-type
為 multipart/form-data
。
OBJECT引數說明:
引數 | 型別 | 必填 | 說明 |
---|---|---|---|
url | String | 是 | 開發者伺服器 url |
filePath | String | 是 | 要上傳檔案資源的路徑 |
name | String | 是 | 檔案對應的 key , 開發者在伺服器端通過這個 key 可以獲取到檔案二進位制內容 |
header | Object | 否 | HTTP 請求 Header , header 中不能設定 Referer |
formData | Object | 否 | HTTP 請求中其他額外的 form data |
success | Function | 否 | 介面呼叫成功的回撥函式 |
fail | Function | 否 | 介面呼叫失敗的回撥函式 |
complete | Function | 否 | 介面呼叫結束的回撥函式(呼叫成功、失敗都會執行) |
success返回引數說明:
引數 | 型別 | 說明 |
---|---|---|
data | String | 開發者伺服器返回的資料 |
statusCode | Number | HTTP狀態碼 |
示例程式碼:
wx.chooseImage({
success: function(res) {
var tempFilePaths = res.tempFilePaths
wx.uploadFile({
url: 'http://example.weixin.qq.com/upload', //僅為示例,非真實的介面地址
filePath: tempFilePaths[0],
name: 'file',
formData:{
'user': 'test'
},
success: function(res){
var data = res.data
//do something
}
})
}
})
根據以上的API開發文件,我們很容易的理解上面的一段程式碼,上面的程式碼,主要是通過chooseImage的介面,將本地的圖片,上傳到指定的伺服器路徑。就做了這麼一個事。
三、下載
wx.downloadFile(OBJECT)
下載檔案資源到本地。客戶端直接發起一個 HTTP GET 請求,返回檔案的本地臨時路徑。
OBJECT引數說明:
引數 | 型別 | 必填 | 必填 |
---|---|---|---|
url | String | 是 | 下載資源的 url |
header | Object | 否 | HTTP 請求 Header |
success | Function | 否 | 下載成功後以 tempFilePath 的形式傳給頁面,res = {tempFilePath: '檔案的臨時路徑'} |
fail | Function | 否 | 介面呼叫失敗的回撥函式 |
complete | Function | 否 | 介面呼叫結束的回撥函式(呼叫成功、失敗都會執行) |
注:檔案的臨時路徑,在小程式本次啟動期間可以正常使用,如需持久儲存,需在主動呼叫 wx.saveFile,在小程式下次啟動時才能訪問得到。
示例程式碼:
wx.downloadFile({
url: 'http://example.com/audio/123', //僅為示例,並非真實的資源
success: function(res) {
wx.playVoice({
filePath: res.tempFilePath
})
}
})
Bug & Tip
tip
: 最大併發限制是 10 個tip
: 預設超時時間和最大超時時間都是 60stip
: 網路請求的 referer 是不可以設定的,格式固定為https://servicewechat.com/{appid}/{version}/page-frame.html
,其中{appid}
為小程式的 appid,{version}
為小程式的版本號,版本號為 0 表示為開發版。tip
: 6.5.3 以及之前版本的 iOS 微信客戶端header
設定無效