Shulou(Shulou.com)06/02 Report--

What are the http requests in the development of WeChat Mini Programs? I believe many inexperienced people are at a loss about this. Therefore, this paper summarizes the causes and solutions of the problems. Through this article, I hope you can solve this problem.

For network communication in WeChat Mini Programs, you can only communicate with the specified domain name. WeChat Mini Programs includes four types of network requests.

Normal HTTPS request (wx.request)

Upload files (wx.uploadFile)

Download file (wx.downloadFile)

WebSocket Communications (wx.connectSocket)

The main purpose of this paper is to introduce three kinds of wx.request,wx.uploadFile,wx.dowloadFile network requests.

Set the domain name

For WeChat Mini Programs to communicate on the network, you must first set the domain name, otherwise an error will occur:

The URL domain name is invalid. Please try again after mp backend configuration.

You need to set the domain name in the Mini Program of Wechat public platform.

You can see the settings options in WeChat Mini Programs's settings interface:

Select the development settings:

.

You can see the server settings:

Here, you can set a domain name corresponding to four types of network access. For each type of network request, you need to set a domain name. Note that if the domain name is set to https://example.com/api/, here, then https://example.com/api cannot be called and must be followed by /.

Http request

Using wx.request, you can initiate one http request, and one WeChat Mini Programs is limited to only five 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 sends a http get request and then prints out the returned result. The parameters are also easier to understand.

Url address of the url server

The parameters of a data request can be in the form of String data: "xxx=xxx&xxx=xxx" or Object data: {"userId": 1}

Header sets the requested header

Successful callback of success API

Callback of failed fail API

There are two other parameters that are not in the code:

The method of method http, which defaults to GET request

The callback after the end of the complete call interface, regardless of success or failure, the interface will be called

Upload files

The api for uploading the file is wx.uploadFile, and the api initiates a http post request, where the Content-type is multipart/form-data. The server needs to receive files according to this Content-type type. Sample 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)}})}

The url,header,success,fail and complete are the same as normal http requests.

The parameters that differ here are:

The key corresponding to the name file. The server needs to obtain the file through the name parameter.

Other parameters that can be used in a formData http request

Download a file

The api of the downloaded file is wx.downloadFile, and the api initiates a http get request and returns the temporary path to 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 of url,header,fail,complete and wx.uploadFile are the same, and the different parameters are:

Type: the type of download resource, which can be automatically identified by the client, and the parameter image/audio/video that can be used

Success: callback after a successful download. Return the temporary directory of the file with the parameter tempFilePath: res= {tempFilePath:' file path'}

After the download is successful, the temporary file can only be used during the current run of the program. If you need to persist the file, you need to call the method wx.saveFile to actively persist the file. Example code:

Function svaeFile (tempFile,success) {wx.saveFile ({tempFilePath:tempFile, success:function (res) {var svaedFile=res.savedFilePath if (success) {success (svaeFile)})}

Use wx.saveFile to save the temporary file locally and provide it for Mini Program to use the next time it starts. The parameters in it:

TempFilePath needs the path of the saved file

The callback saved successfully by success returns the path to which it was successfully saved. You can use res.savedFilePath to obtain the path to which it is successfully saved.

Callback of fail failure

Callback ended by complete

Settings for timeout

It has been mentioned in WeChat Mini Programs Development: MINA that setting networkTimeout in app.js can set the timeout for four types of network access:

"networkTimeout": {"request": 10000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000}

The timeout set here corresponds to four types of network requests.

After reading the above, have you mastered the methods of http request in WeChat Mini Programs's development? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.