如果你的小程序需要和遠程的服務進行交互,比如訪問你自己的或別人提供的遠程API來操作數(shù)據(jù)(增刪改查),那么你就需要一種和遠程服務器進行通信的機制來完成這樣的功能。 基于瀏覽器的Web開發(fā)中,目前主要有2種主流 ...
如果你的小程序需要和遠程的服務進行交互,比如訪問你自己的或別人提供的遠程API來操作數(shù)據(jù)(增刪改查),那么你就需要一種和遠程服務器進行通信的機制來完成這樣的功能。
基于瀏覽器的Web開發(fā)中,目前主要有2種主流的服務器通信方式:
小程序框架提供了一套自己的API,實現(xiàn)了跟以上2種方式基本等同的服務器訪問方法。由于無論是調(diào)用REST API,還是WebSocket通信,都是基于http協(xié)議的,為了保證安全性,小程序框架規(guī)定在生產(chǎn)環(huán)境下,只能使用安全的http協(xié)議,即HTTPS,這個也是一個大趨勢。而在開發(fā)環(huán)境下,為了方便起見,我們還是可以用普通的http協(xié)議來做開發(fā)調(diào)試的。
小程序框架提供了一個名為wx.request()的方法,用于發(fā)起HTTP請求,不過值得注意,小程序?qū)Σl(fā)請求數(shù)量限制在了5個。
這個wx.request()方法的用法跟我們用jQuery里面的ajax方法十分的相似:
wx.request({
url: 'https://your-domain/test',
method: 'GET',
data: {
param1: 'foo' ,
param2: 'bar'
},
header: {
'Content-Type': 'application/json'
},
success: function(res) {
console.log(res.data)
}
})
借這個機會,我們用node.js來寫一個正真的提供REST API服務的服務器端程序,并用小程序的API來連接測試一下。在這里我選用Sails框架來實現(xiàn)這個REST API Server。
首先我們安裝sails的命令行工具,在你的命令行工具輸入:
npm install -g sails
安裝完成后,建立一個新的項目目錄,比如叫rest-server,然后進入該目錄,執(zhí)行以下命令:
sails new --no-linker --no-frontend
它會在當前的rest-server目錄下,生成一堆代碼。這樣,一個提供REST服務的node.js服務器程序的架子就基本有了。
但是它里面還沒有包含任何可用的REST API,我們需要自行添加。讓我們在api/controllers目錄下新建一個UsersController.js的文件,然后添加如下內(nèi)容:
這個文件會被自動映射成REST API,訪問路徑為/users/list,如果不做任何額外配置,那么這個API可以用任何HTTP Method去訪問,如果我們想要限定它只能以GET方式訪問,那么我們可以去config/routes.js中進行如下配置:
好,一個非常簡單的,可以用GET方式訪問的REST API就完成了,我們來把這個服務器運行起來,在rest-server目錄下,運行命令:
sails lift
成功啟動后,就可以在1337端口進行訪問了。我們可以直接在瀏覽器中輸入網(wǎng)址測試一下我們寫的API:
看上去我們的REST API已經(jīng)在工作了。那好,我們就在小程序中,試著去調(diào)用這個REST API:
如果我們成功獲取到這個API返回的數(shù)組數(shù)據(jù),我們就在小程序界面里將它們顯示出來:
這個是實際的運行效果:
好了,這就是關(guān)于小程序調(diào)用REST API的一個非常簡單的例子,實際的項目中,可能要復雜一些,但是萬變不離其宗。
有些應用場景下,我們會對頁面的實時性有要求,在瀏覽器的Web頁面開發(fā)中,使用WebSocket API去連接一個提供WebSocket服務的服務器端,是目前的主流方案。
在瀏覽器中,我們直接使用WebSocket對象,然后調(diào)用這個對象上的一些方法和監(jiān)聽該對象發(fā)出的一些事件。而微信小程序框架提供的是一系列的函數(shù),不過,兩者在概念上基本是一樣的,所以熟悉WebSocket的朋友不會對其陌生。
在下一篇的文章里,我將繼續(xù)講解如何建立一個基于node.js的WebSocket服務器,并在小程序中使用它。
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務