怎麼在小程式裡傳東西

怎麼在小程式傳東西？

使用微信小程式的官方介面（上傳下載）

#微信小程式普通的資訊互動是非常簡單的，透過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中，透過標籤顯示。

所以，小程式的開發並沒有那麼神秘，其實是非常簡單的，大家只需要根據微信小程式後台的官方文檔，就可以根據自己的需求和創意開發出各種好玩的小程式.

二、上傳檔案介面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/>

然後在服務端編寫檔案接收的程式碼就可以保持檔案到自己的伺服器了。

以上是怎麼在小程式裡傳東西的詳細內容。更多資訊請關注PHP中文網其他相關文章！