Network communication in the WeChat applet can only communicate with the specified domain name. The WeChat applet includes four types of network requests.
Normal HTTPS request (wx.request)
Upload file (wx.uploadFile)
Download file (wx.downloadFile)
WebSocket communication (wx.connectSocket)
Here to introducewx.request
,wx.uploadFile
,wx.dowloadFile
Three types of network requests are the main ones
If you want the WeChat applet to communicate over the network, you must Set the domain name first, otherwise an error will occur:
The URL domain name is illegal, please try again after mp background configuration
Needs to be set in the mini program of the WeChat public platform domain name.
You can see the setting options in the setting interface of the WeChat applet:
Settings
SelectDevelopment Settings
:
Development settings
You can see the server settings:
Server Settings
Here you can set the domain names corresponding to four types of network access. Each type of network request needs to set a domain name. Note that if you set the domain name https://example here .com/api/, thenhttps://example.com/api
cannot be called, and must be followed by/
.
Usewx.request
to initiate an http request. A WeChat applet is limited toonly 5 network requests at the same time.
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) } }) }
The above code will send an http get request and then print out the returned results. The parameters are also relatively easy to understand.
url
The url address of the server
data
The request parameters can be Stringdata:"xxx=xxx&xxx=xxx"
or Objectdata:{"userId":1}
header
Set the request header
success
Interface success callback
fail
Interface Failed callback
There are also two parameters not in the code:
method
http method, default For GET request
complete
The callback after calling the interface will be called regardless of success or failure
The api for uploading files iswx.uploadFile
, which will initiate ahttp post
request, in which theContent-type
ismultipart/form-data
. The server needs to receive files according to theContent-type
type. Example code:
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) } }) }
among whichurl
,header
,success
,fail
andcomplete
are the same as ordinary http requests. (WeChat applet application number exchange group 563752274)
The different parameters here are:
name
The key corresponding to the file, the server needs to passname
Parameters to get the file
formData
Other parameters that can be used in the http request
The api for downloading files iswx.downloadFile
. This api will initiate an http get request and return the temporary path of the file after the download is successful. Sample code:
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) } }) }
The parameters ofurl
,header
,fail
,complete
andwx.uploadFile
are consistent. The different parameters are:
type
: The type of the downloaded resource, which is used for automatic identification by the client. Parameters that can be usedimage/audio/ video
success
: Callback after successful download, returns the temporary directory of the file with thetempFilePath
parameter:res ={tempFilePath:'File path'}
After successful download, it is a temporary file, which can only be used during the current running of the program. If you need to save it permanently, you need to call the methodwx.saveFile
Actively persist files, example code:
function svaeFile(tempFile,success){ wx.saveFile({ tempFilePath:tempFile, success:function(res){ var svaedFile=res.savedFilePath if(success){ success(svaeFile) } } }) }
Usewx.saveFile
to save temporary files locally and provide them for use when the applet is started next time. Parameters:
tempFilePath
需要被保存文件的路径
success
保存成功的回调,返回保存成功的路径,使用res.savedFilePath
可以获取保存成功的路径
fail
失败的回调
complete
结束的回调
在微信小程序开发:MINA中已经提到了在app.js
中设置networkTimeout
可以设置四种类型网络访问的超时时间:
"networkTimeout":{ "request": 10000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000 }
这里设置的超时时间对应着四种类型的网络请求。
更多WeChat applet development: http request相关文章请关注PHP中文网!