如何在小程序里傳東西

小編給大家分享一下如何在小程序里傳東西，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

怎么在小程序里傳東西？

使用微信小程序的官方接口（上傳下載）

微信小程序普通的信息交互是非常簡單的，通過wx.request接口就可以了。需要注意的一點是，如果是POST請求，必須設置header參數的內容類型content-type為application/x-www-form-urlencoded，否則服務端無法接收小程序POST過來的數據。

代碼示例：

 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
})
}
})

但是，僅僅是簡單的文本數據交互可能還不夠，如果你的小程序需要下載服務端的文件以及小程序用戶上傳本地文件到服務端該怎么辦？這里就需要用到小程序另外兩個接口wx.downloadFile和 wx.uploadFile，在微信小程序中所有官方提供的API接口都是以wx開頭的。

一、下載文件接口wx.downloadFile（object）

下載文件資源到本地，客戶端直接發起一個 HTTP GET 請求，返回文件的本地臨時路徑。

OBJECT參數說明：

小程序下載文件接口

無論是上傳下載還是其他的什么功能，在小程序的后臺都能找到對應的方法接口和解釋文檔，一般都會配有一個對象參數說明的表格，大家只需要按照官方說法調用或傳遞對應的參數即可。例如上面的下載接口參數說明，最左邊是該方法可以傳遞的參數，中間的必填指的是這個參數是否可選，如果非必填，就按需傳遞，不需要利用到的功能可以忽略這個參數。

上面的表格“類型”一欄是什么意思？

string是字符串即由數字、字母、下劃線組成的字符。一般是一個具體的內容，例如小程序下載文件的方法，需要指定下載文件的資源地址（URL），那么URL就是一個字符串內容。

Object是對象的意思，上一篇文章中解釋過什么是對象。對象就是數據的集合，在上一篇文章中舉過一個例子：Lovers:{NiuLangGirl : "織女"}，這是一個Lovers對象，NiuLangGirl的值為織女。那么在小程序下載方法中，可以傳遞一個header對象，用來指定HTTP請求中的Header（具體可以指定那些header，可以百度一下http/header），注意表格參數欄header右邊的提示，這是參數是可選的，所以除有特殊要求，否則是不用傳遞的。

Function是函數，注意這里的函數值得是計算機函數，可理解成是一系列程序的一個子集，一個程序模塊，實現某個單獨的功能。例如在小程序下載文件方法中，請求成功的指定函數是success，該函數的說明是下載成功后以 tempFilePath的形式傳給頁面，res = {tempFilePath: '文件的臨時路徑'}，也就是說文件請求成功后，會返回一個res對象，tempFilePath的值就是文件的臨時路徑。當調用wx.saveVideoToPhotosAlbum接口保存文件到本地時，傳遞臨時路徑給filePath參數就可以把文件保存到用戶的手機里了。

代碼示例：JS文件中編寫程序邏輯

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
})
}
})
}

然后在wxml文件中展示數據

< button type="primary" bindtap="DownLoadFile">下載視頻
< video src="{{resource}}"/>

DownLoadFile是一個臨時設置的一個函數名稱，用來方便調用wx.downloadFile接口。沒有什么含義，一般以字母開頭，怎么好記怎么來。當用戶點擊下載視頻時，就執行了這個函數中的wx.downloadFile方法，將服務端視頻文件下載到本地并將文件的臨時路徑賦值到resource中，通過通過< video>標簽顯示。

所以，小程序的開發并沒有那么神秘，其實是非常簡單的，大家只需要根據微信小程序后臺的官方文檔，就可以根據自己的需求和創意開發出各種好玩的小程序。

二、上傳文件接口wx.uploadFile（object）同樣，在微信小程序后臺可以找到這個接口的示例說明，將本地資源也就是用戶的手機文件上傳到開發者服務器，需要先通過 chooseVideo等接口獲取到一個用戶本地文件的臨時路徑，然后通過wx.uploadFile接口將用戶手機里的文件上傳到指定服務器。從小程序端發起一個 HTTPS POST 請求，需要指定內容類型 content-type 為 multipart/form-data 。

延時光影上傳作品界面

代碼示例：

在js文件中編寫程序邏輯

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文件：

<view class="cview"> < button bindtap="UpVideo">添加作品</ button> </view><br/>

然后在服務端編寫文件接收的代碼就可以保持文件到自己的服務器了。

看完了這篇文章，相信你對“如何在小程序里傳東西”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！