首頁 > 微信小程式 > 小程式開發 > 微信小程式開發:http請求

微信小程式開發:http請求

高洛峰
發布: 2017-02-16 10:07:31
原創
1685 人瀏覽過

在微信小程式進行網路通信,只能和指定的網域進行通信,微信小程式包括四種類型的網路請求。

  • 普通HTTPS請求(wx.request)

  • 上傳檔案(wx.uploadFile)

  • 下載檔案(wx.downloadFile)

  • 下載檔(wx.downloadFile)

這裡以介紹wx.request,wx.uploadFile,

wx.dowloadFile

三種網路請求為主

設定網域名稱

要微信小程式進行網路通訊,必須先設定網域,設定網域名稱:
要微信小程式。
URL 網域不合法,請在mp 後台配置後重試


需要在微信公眾平台的小程式中設定網域。

在微信小程式的設定介面可以看到設定選項:微信小程式開發:http請求

設定選擇

開發設定

微信小程式開發:http請求

:可以看到設定

開發設定


微信小程式開發:http請求
伺服器設定

在這裡可以設定對應四種網絡訪問的域名,每一種類型的網絡請求需要設置一個域名,注意如果在這裡設置域名https://example.com/api/,那麼

https://example.com/api
是無法呼叫的,必須加上後面/http請求

使用

wx.request

可以發起http請求,一個微信小程式被限制為同時只有5個網路請求

function queryRequest(data){    
    wx.request({
        url:"https://example.com/api/",
        data:data,
        header:{           // "Content-Type":"application/json"
        },
        success:function(res){            console.log(res.data)
        },
        fail:function(err){            console.log(err)
        }

    })

}
登入後複製
上面的程式碼會傳送一個http get請求,然後列印出回傳的結果。其中的參數也比較容易理解。

  • url

    伺服器的url位址

  • data

    伺服器的url位址data 請求的參數可以採用String

    data:"xxx=xxx&xxx=xxx"
  • 請求的參數可以採用String
  • 的形式

  • header
  • 設定請求的header

  • success
  • 介面成功的回調

裡:

  • method http的方法,預設為GET請求

  • complete 呼叫介面結束之後的回調,無論成功或失敗該介面都會被呼叫。為

    wx.uploadFile
  • ,api會啟動一個
http post

請求,其中的

Content-type

multipart/form-data。伺服器端需要按照該Content-type類型接收檔案,範例程式碼:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="hljs javascript">function uploadFile(file,data) { wx.uploadFile({ url: &amp;#39;http://example.com/upload&amp;#39;, filePath: file, name: &amp;#39;file&amp;#39;, formData:data, success:function(res){ console.log(res.data) }, fail:function(err){ console.log(err) } }) }</pre><div class="contentsignin">登入後複製</div></div>其中的urlheader

success

fail以及successfail以及 (微信小程式應用號交流群563752274)這裡有區別的參數是:

  • name

    檔案對應的key,伺服器端需要透過name參數取得檔案。可以使用的其他參數

  • 下載檔案下載檔案的api為

    wx.downloadFile
  • ,該api會啟動http get請求,並在下載成功之後返回檔案的臨時路徑,範例程式碼:
function downloadFile(url,typ,success){
    wx.downloadFile({
        url:url,
        type:typ,
        success:function(res){            if(success){
                success(res.tempFilePath)
            }
        },
        fail:function(err){            console.log(err)
        }
    })
}
登入後複製

function svaeFile(tempFile,success){
  wx.saveFile({
      tempFilePath:tempFile,
      success:function(res){          
      var svaedFile=res.savedFilePath          
      if(success){
              success(svaeFile)
          }
      }
  })
}
登入後複製

其中的

url,header

,

fail,completewx.uploadFile的參數使用是一致的,其中有區別的參數是:用於客戶端自動識別,可以使用的參數image/audio/video

  • success

    :下載成功之後的回調,以tempFile '文件路徑'}下載成功後的是臨時文件,只會在程式本次運行期間可以使用,如果需要持久的保存,需要調用方法wx.saveFile

    主動持久化文件,實例代碼:
  • "networkTimeout":{   
    "request": 10000,   
    "connectSocket": 10000,   
    "uploadFile": 10000,   
    "downloadFile": 10000
    }
    登入後複製
    登入後複製
  • 使用

    wx.saveFile保存臨時檔案到本地,提供給小程式下次啟動時使用,其中的參數:

  • tempFilePath 需要被保存文件的路径

  • success 保存成功的回调,返回保存成功的路径,使用res.savedFilePath可以获取保存成功的路径

  • fail 失败的回调

  • complete结束的回调

超时的设置

在微信小程序开发:MINA中已经提到了在app.js中设置networkTimeout可以设置四种类型网络访问的超时时间:

"networkTimeout":{   
"request": 10000,   
"connectSocket": 10000,   
"uploadFile": 10000,   
"downloadFile": 10000
}
登入後複製
登入後複製

这里设置的超时时间对应着四种类型的网络请求。

更多微信小程式開發:http請求相关文章请关注PHP中文网!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板