關於微信小程式設定http請求的步驟

不言
發布: 2018-06-23 10:09:39
原創
9744 人瀏覽過

這篇文章給大家介紹了微信小程式如何進行http請求的詳細步驟,相信對大家學習微信小程式網路請求會有所幫助,有需要的朋友們下面來一起看看吧。

http請求介紹

HTTP(HyperText Transfer Protocol)是一套電腦透過網路通訊的規則。電腦專家設計出HTTP,使HTTP客戶(如Web瀏覽器)能夠從HTTP伺服器(Web伺服器)請求資訊和服務,HTTP目前協定的版本是1.1.HTTP是一種無狀態的協議,無狀態是指Web瀏覽器和Web伺服器之間不需要建立持久的連接,這意味著當一個客戶端向伺服器端發出請求,然後Web伺服器返回回應(response),連接就被關閉了,在伺服器端不保留連接的有關訊息.HTTP遵循請求(Request)/應答(Response)模型。 Web瀏覽器向Web伺服器發送請求,網路伺服器處理請求並傳回適當的應答。所有HTTP連接都被建構成一套請求和應答。

微信小程式設定http請求

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

     1、普通HTTPS請求(wx.request)

     2、上傳檔案(wx.uploadFile)

##     3、下載檔案(wx.downloadFile)

     4、WebSocket通訊(wx.connectSocket)

這裡以介紹wx.request,wx.uploadFile,wx.dowloadFile三種網路請求為主

#設定域名

要微信小程式進行網路通信,必須先設定域名,不然會出現錯誤:

URL 網域不合法,請在mp 後台配置後重試

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

在微信小程式的設定介面可以看到設定選項:


設定
選擇開發設定:


開發設定

可以看到伺服器設定:


伺服器設定

在這裡可以設定對應四種網路存取的域名,每一種類型的網路請求需要設定一個域名,注意如果在這裡設定域名為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 請求的參數可以採用String data:"xxx=xxx&xxx=xxx "的形式或Object data:{"userId":1}的形式

    header 設定請求的header

    success 介面成功的回呼

#    fail 介面失敗的回呼

另外還有兩個參數沒有在程式碼裡:
    

method http

的方法,預設為GET要求

    

complete 呼叫介面結束後的回呼,無論成功或失敗該介面都會被呼叫
上傳檔案

#上傳檔案的api為wx.uploadFile,該api會發起一個http post請求,其中的Content-typemultipart/form-data

。伺服器端需要依照該

Content-type

類型接收檔案,範例程式碼:

#

function uploadFile(file,data) {
 wx.uploadFile({
 url: 'http://example.com/upload',
 filePath: file,
 name: 'file',
 formData:data,
 success:function(res){
 console.log(res.data)
 },
 fail:function(err){
 console.log(err)
 }

 })

}
登入後複製
其中的urlheadersuccessfail
以及

complete

和普通的http請求是一樣的。

這裡有差異的參數是:     name檔案對應的key
,伺服器端需要透過

name

參數取得檔案
    

formData http

要求中可以使用的其他參數
下載檔案

### #######

下载文件的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)
 }
 })
}
登入後複製

其中的url,header,fail,completewx.uploadFile的参数使用是一致的,其中有区别的参数是:

type:下载资源的类型,用于客户端自动识别,可以使用的参数image/audio/video

success:下载成功之后的回调,以tempFilePath的参数返回文件的临时目录:res={tempFilePath:'文件路径'}

下载成功后的是临时文件,只会在程序本次运行期间可以使用,如果需要持久的保存,需要调用方法wx.saveFile主动持久化文件,实例代码:

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

使用wx.saveFile保存临时文件到本地,提供给小程序下次启动时使用,其中的参数:

tempFilePath 需要被保存文件的路径

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

fail 失败的回调

complete结束的回调

超时的设置

可以在app.js中设置networkTimeout可以设置四种类型网络访问的超时时间:

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

微信小程序开发教程之增加mixin扩展

微信小程序的MINA文件结构的介绍

微信小程序要怎么选择SSL证书类型

以上是關於微信小程式設定http請求的步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!