小程序模板網(wǎng)

一斤代碼深入理解系列《三》:微信小程序和服務器通信

發(fā)布時間:2018-03-24 15:25 所屬欄目:小程序開發(fā)教程

如果你的小程序需要和遠程的服務進行交互,比如訪問你自己的或別人提供的遠程API來操作數(shù)據(jù)(增刪改查),那么你就需要一種和遠程服務器進行通信的機制來完成這樣的功能。 基于瀏覽器的Web開發(fā)中,目前主要有2種主流 ...

 
 
 

如果你的小程序需要和遠程的服務進行交互,比如訪問你自己的或別人提供的遠程API來操作數(shù)據(jù)(增刪改查),那么你就需要一種和遠程服務器進行通信的機制來完成這樣的功能。

基于瀏覽器的Web開發(fā)中,目前主要有2種主流的服務器通信方式:

  1. 通過Ajax發(fā)起HTTP請求訪問REST API
  2. 通過WebSocket進行實時通信

小程序框架提供了一套自己的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)試的。

HTTP請求

小程序框架提供了一個名為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的一個非常簡單的例子,實際的項目中,可能要復雜一些,但是萬變不離其宗。

WebSocket

有些應用場景下,我們會對頁面的實時性有要求,在瀏覽器的Web頁面開發(fā)中,使用WebSocket API去連接一個提供WebSocket服務的服務器端,是目前的主流方案。

在瀏覽器中,我們直接使用WebSocket對象,然后調(diào)用這個對象上的一些方法和監(jiān)聽該對象發(fā)出的一些事件。而微信小程序框架提供的是一系列的函數(shù),不過,兩者在概念上基本是一樣的,所以熟悉WebSocket的朋友不會對其陌生。

在下一篇的文章里,我將繼續(xù)講解如何建立一個基于node.js的WebSocket服務器,并在小程序中使用它。



本文地址:http://22321a.com/wxmini/doc/course/22854.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢