How to transfer things in mini program

How to transfer things in the mini program?

Use the official interface of the WeChat applet (upload and download)

Ordinary information interaction in the WeChat applet is very simple, through the wx.request interface That's it. One thing to note is that if it is a POST request, the content-type of the header parameter must be set to application/x-www-form-urlencoded, otherwise the server cannot receive the data POSTed by the mini program.

Code example:

 wx.request({
url: 'https://api.tianapi.com/meinv/?key={APIKEY}',
method: 'POST',
data:'num=10', //参数为键值对字符串
header: { //设置参数内容类型为x-www-form-urlencoded
'content-type':'application/x-www-form-urlencoded',
'Accept': 'application/json'
},
success: function (res) {
console.log(res.data)
that.setData({
items: res.data
})
}
})

However, simple text data interaction may not be enough. If your mini program needs to download files from the server and the mini program user uploads local files to the server, then what to do? Here you need to use the other two interfaces of the mini program, wx.downloadFile and wx.uploadFile. All officially provided API interfaces in the WeChat mini program start with wx.

1. Download file interface wx.downloadFile (object)

Download file resources to the local area. The client directly initiates an HTTP GET request and returns the local temporary path of the file.

OBJECT parameter description:

Mini program download file interface

Whether it is uploading, downloading or other functions, in the mini program The corresponding method interfaces and explanation documents can be found in the background. Generally, there is a table with object parameter descriptions. You only need to call or pass the corresponding parameters according to the official statement. For example, in the download interface parameter description above, the leftmost is the parameters that can be passed by this method. The required in the middle refers to whether this parameter is optional. If it is not required, it will be passed on demand. You can ignore this if you do not need to use the function. parameter.

What does the "Type" column of the table above mean?

string is a string of characters consisting of numbers, letters, and underscores. Generally, it is a specific content. For example, the method of downloading a file in a mini program requires specifying the resource address (URL) of the downloaded file, then the URL is a string content.

Object means object. I explained what an object is in the previous article. An object is a collection of data. I gave an example in the previous article: Lovers:{NiuLangGirl: "Weaver Girl"}. This is a Lovers object, and the value of NiuLangGirl is Weaver Girl. Then in the mini program download method, you can pass a header object to specify the header in the HTTP request (specifically you can specify those headers, you can Baidu http/header), pay attention to the prompt on the right side of the header in the table parameter column, this is the parameter It is optional, so it does not need to be passed unless there are special requirements.

Function is a function. Note that the function here is a computer function, which can be understood as a subset of a series of programs, a program module, and implements a single function. For example, in the mini program download file method, the specified function for successful request is success. The description of this function is that after the download is successful, it is passed to the page in the form of tempFilePath, res = {tempFilePath: 'temporary path of the file'}, that is, the file After the request is successful, a res object will be returned, and the value of tempFilePath is the temporary path of the file. When calling the wx.saveVideoToPhotosAlbum interface to save the file locally, passing the temporary path to the filePath parameter can save the file to the user's mobile phone.

Code example: Write program logic in JS file

DownLoadFile: function() {
var that = this;
wx.downloadFile({
url: 'https://user.tianapi.com/video.mp4',
success: function (res) {
console.log(res.tempFilePath)
that.setData({
resource: res.tempFilePath
})
}
})
}

Then display the data in the wxml file

< button type="primary" bindtap="DownLoadFile">下载视频
< video src="{{resource}}"/>

DownLoadFile is a temporarily set function name for convenient calling wx.downloadFile interface. It doesn't have any meaning. It usually starts with a letter, so it's easy to remember. When the user clicks to download the video, the wx.downloadFile method in this function is executed, the server video file is downloaded locally and the temporary path of the file is assigned to the resource, which is displayed through the tag.

So, the development of mini programs is not that mysterious. In fact, it is very simple. You only need to follow the official documents of the WeChat mini program background to develop various interesting mini programs according to your own needs and creativity. program.

2. Upload file interface wx.uploadFile (object) Similarly, you can find an example of this interface in the WeChat applet background. To upload local resources, that is, the user’s mobile phone files to the developer server, you need to first pass Interfaces such as chooseVideo obtain the temporary path of a user's local file, and then upload the file in the user's mobile phone to the designated server through the wx.uploadFile interface. To initiate an HTTPS POST request from the applet, you need to specify the content-type as multipart/form-data.

Delayed light shadow upload work interface

Code example:

Write program logic in js file

Page({UpVideo:function(){
chooseVideo:function(){
sourceType: ['album'], // 指定文件的来源，album只允许相册中选择，camera是相机拍摄，两个都允许以逗号相隔。
success: function (res) {
var tempFilePaths = res.tempFilePaths //上面提到的预览文件的临时路径
wx.uploadFile({
url: 'https://www.tianapi.com/?do=videofile', //仅为示例，非真实的接口地址 filePath: tempFilePaths[0],
name: 'file',
formData:{
'userid': 1 //ID为1的用户上传的文件
},
success: function(res){
var data = res.data
console.log(res);
}
})
}
})
}
})

wxml file:

 < button bindtap="UpVideo">添加作品 

Then write the file receiving code on the server side to keep the file to your own server.

The above is the detailed content of How to transfer things in mini program. For more information, please follow other related articles on the PHP Chinese website!