【移動(dòng)應(yīng)用開發(fā)技術(shù)】如何在小程序里傳東西

【移動(dòng)應(yīng)用開發(fā)技術(shù)】如何在小程序里傳東西

在下給大家分享一下如何在小程序里傳東西，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！怎么在小程序里傳東西？使用微信小程序的官方接口（上傳下載）微信小程序普通的信息交互是非常簡(jiǎn)單的，通過wx.request接口就可以了。需要注意的一點(diǎn)是，如果是POST請(qǐng)求，必須設(shè)置header參數(shù)的內(nèi)容類型content-type為application/x-www-form-urlencoded，否則服務(wù)端無法接收小程序POST過來的數(shù)據(jù)。代碼示例：

wx.request({

url:

'/meinv/?key={APIKEY}',

method:

'POST',

data:'num=10',

//參數(shù)為鍵值對(duì)字符串

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

})

}

})但是，僅僅是簡(jiǎn)單的文本數(shù)據(jù)交互可能還不夠，如果你的小程序需要下載服務(wù)端的文件以及小程序用戶上傳本地文件到服務(wù)端該怎么辦？這里就需要用到小程序另外兩個(gè)接口wx.downloadFile和wx.uploadFile，在微信小程序中所有官方提供的API接口都是以wx開頭的。一、下載文件接口wx.downloadFile（object）下載文件資源到本地，客戶端直接發(fā)起一個(gè)HTTPGET請(qǐng)求，返回文件的本地臨時(shí)路徑。OBJECT參數(shù)說明：小程序下載文件接口無論是上傳下載還是其他的什么功能，在小程序的后臺(tái)都能找到對(duì)應(yīng)的方法接口和解釋文檔，一般都會(huì)配有一個(gè)對(duì)象參數(shù)說明的表格，大家只需要按照官方說法調(diào)用或傳遞對(duì)應(yīng)的參數(shù)即可。例如上面的下載接口參數(shù)說明，最左邊是該方法可以傳遞的參數(shù)，中間的必填指的是這個(gè)參數(shù)是否可選，如果非必填，就按需傳遞，不需要利用到的功能可以忽略這個(gè)參數(shù)。上面的表格“類型”一欄是什么意思？string是字符串即由數(shù)字、字母、下劃線組成的字符。一般是一個(gè)具體的內(nèi)容，例如小程序下載文件的方法，需要指定下載文件的資源地址（URL），那么URL就是一個(gè)字符串內(nèi)容。Object是對(duì)象的意思，上一篇文章中解釋過什么是對(duì)象。對(duì)象就是數(shù)據(jù)的集合，在上一篇文章中舉過一個(gè)例子：Lovers:{NiuLangGirl:"織女"}，這是一個(gè)Lovers對(duì)象，NiuLangGirl的值為織女。那么在小程序下載方法中，可以傳遞一個(gè)header對(duì)象，用來指定HTTP請(qǐng)求中的Header（具體可以指定那些header，可以百度一下http/header），注意表格參數(shù)欄header右邊的提示，這是參數(shù)是可選的，所以除有特殊要求，否則是不用傳遞的。Function是函數(shù)，注意這里的函數(shù)值得是計(jì)算機(jī)函數(shù)，可理解成是一系列程序的一個(gè)子集，一個(gè)程序模塊，實(shí)現(xiàn)某個(gè)單獨(dú)的功能。例如在小程序下載文件方法中，請(qǐng)求成功的指定函數(shù)是success，該函數(shù)的說明是下載成功后以tempFilePath的形式傳給頁面，res={tempFilePath:'文件的臨時(shí)路徑'}，也就是說文件請(qǐng)求成功后，會(huì)返回一個(gè)res對(duì)象，tempFilePath的值就是文件的臨時(shí)路徑。當(dāng)調(diào)用wx.saveVideoToPhotosAlbum接口保存文件到本地時(shí)，傳遞臨時(shí)路徑給filePath參數(shù)就可以把文件保存到用戶的手機(jī)里了。代碼示例：JS文件中編寫程序邏輯DownLoadFile:

function()

{

var

that

=

this;

wx.downloadFile({

url:

'/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是一個(gè)臨時(shí)設(shè)置的一個(gè)函數(shù)名稱，用來方便調(diào)用wx.downloadFile接口。沒有什么含義，一般以字母開頭，怎么好記怎么來。當(dāng)用戶點(diǎn)擊下載視頻時(shí)，就執(zhí)行了這個(gè)函數(shù)中的wx.downloadFile方法，將服務(wù)端視頻文件下載到本地并將文件的臨時(shí)路徑賦值到resource中，通過通過<video>標(biāo)簽顯示。所以，小程序的開發(fā)并沒有那么神秘，其實(shí)是非常簡(jiǎn)單的，大家只需要根據(jù)微信小程序后臺(tái)的官方文檔，就可以根據(jù)自己的需求和創(chuàng)意開發(fā)出各種好玩的小程序。二、上傳文件接口wx.uploadFile（object）同樣，在微信小程序后臺(tái)可以找到這個(gè)接口的示例說明，將本地資源也就是用戶的手機(jī)文件上傳到開發(fā)者服務(wù)器，需要先通過chooseVideo等接口獲取到一個(gè)用戶本地文件的臨時(shí)路徑，然后通過wx.uploadFile接口將用戶手機(jī)里的文件上傳到指定服務(wù)器。從小程序端發(fā)起一個(gè)HTTPSPOST請(qǐng)求，需要指定內(nèi)容類型content-type為multipart/form-data。延時(shí)光影上傳作品界面代碼示例：在js文件中編寫程序邏輯Page({UpVideo:function(){

chooseVideo:function(){

sourceType:

['album'],

//

指定文件的來源，album只允許相冊(cè)中選擇，camera是相機(jī)拍攝，兩個(gè)都允許以逗號(hào)相隔。

success:

function

(res)

{

var

tempFilePaths

=

res.tempFilePaths

//上面提到的預(yù)覽文件的臨時(shí)路徑

wx.uploadFile({

url:

'/?do=videofile',

//僅為示例，非真實(shí)的接口地址

filePath:

tempFilePaths[0],

name:

'file',

formData:{

'userid':

1

//ID為1的用戶上傳的文件

},

success:

function(res){

var

data

=

res.data

co