如何在小程序里傳東西

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

怎么在小程序里傳東西？

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

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

代碼示例：

 wx.request({
url: 'https://api.tianapi.com/meinv/?key={APIKEY}',
method: 'POST',
data:'num=10', //參數(shù)為鍵值對字符串
header: { //設(shè)置參數(shù)內(nèi)容類型為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
})
}
})

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

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

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

OBJECT參數(shù)說明：

小程序下載文件接口

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

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

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

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

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

代碼示例：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文件中展示數(shù)據(jù)

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

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

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

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

延時光影上傳作品界面

代碼示例：

在js文件中編寫程序邏輯

Page({UpVideo:function(){
chooseVideo:function(){
sourceType: ['album'], // 指定文件的來源，album只允許相冊中選擇，camera是相機拍攝，兩個都允許以逗號相隔。
success: function (res) {
var tempFilePaths = res.tempFilePaths //上面提到的預(yù)覽文件的臨時路徑
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/>

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

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