1. 程式人生 > >微信小程式開發基礎篇(四)之請求、上傳、下載

微信小程式開發基礎篇(四)之請求、上傳、下載

針對前幾篇的基本的瞭解,然後我們首先要先學習和了解它的基本語法,我主要從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

  1. tip: content-type 預設為 'application/json'
  2. bug: 開發者工具 0.10.102800 版本,header 的 content-type 設定異常;
  3. tip: 客戶端的 HTTPS TLS 版本為1.2,但 Android 的部分機型還未支援 TLS 1.2,所以請確保 HTTPS 伺服器的 TLS 版本支援1.2及以下版本;
  4. tip: 要注意 method 的 value 必須為大寫(例如:GET);
  5. tip: url 中不能有埠;
  6. tip: request 的預設超時時間和最大超時時間都是 60s
  7. tip: request 的最大併發數是 5
  8. tip: 網路請求的 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

  1. tip: 最大併發限制是 10 個
  2. tip: 預設超時時間和最大超時時間都是 60s
  3. tip: 網路請求的 referer 是不可以設定的,格式固定為 https://servicewechat.com/{appid}/{version}/page-frame.html,其中 {appid} 為小程式的 appid,{version} 為小程式的版本號,版本號為 0 表示為開發版。
  4. tip: 6.5.3 以及之前版本的 iOS 微信客戶端 header 設定無效