步驟1：為Arduino設(shè)置ESP8266

有很多使用ESP8266的方法，包括使用它作為簡單的WiFi調(diào)制解調(diào)器，連接到Arduino或在其上運(yùn)行腳本語言（“ Lua”）。在此指導(dǎo)中，我們將使用帶有Arduino核心的ESP8266來代替。本質(zhì)上，這意味著一旦設(shè)置好，您就可以從常規(guī)Arduino IDE編程ESP8266。這有很多優(yōu)點(diǎn)：它提供了很好的性能，有大量的用戶，您會(huì)發(fā)現(xiàn)大量的代碼示例以及用于各種硬件的庫。..但是，坦白地說，設(shè)置起來可能有點(diǎn)復(fù)雜

幸運(yùn)的是，其他人已經(jīng)就如何做到這一點(diǎn)撰寫了出色的說明。例如。此指令或此指令（使用另一種編程技術(shù)）。如果這一切看起來有些嚇人，您可以使用帶有USB連接器的開發(fā)板（例如Wemos D1），使進(jìn)入ESP8266的世界變得容易得多（但成本略高）。例如，此處給出了非常詳盡的說明（也適用于許多類似的板）。

步驟2：初學(xué)者2：在ESP8266上設(shè)置Web服務(wù)器

現(xiàn)在您的ESP8266已設(shè)置為與Arduino環(huán)境一起使用，我們可以開始編程了。為了確保我們在教科書的同一頁上，我們將首先設(shè)置一個(gè)簡單的Web服務(wù)器，以靜態(tài)消息向我們打招呼。以下是您所需的全部代碼：

#include

#include

// create a web server on port 80 （HTTP）

ESP8266WebServer server（80）;

// this function is called for each HTTP request

void handlePage（） {

server.send（200， “text/plain”， “Hello world！”）;

}

void setup（） {

// Example WIFI setup as an access point. Change this to whatever suits you， best.

WiFi.mode（WIFI_AP）;

WiFi.softAPConfig （IPAddress （192，168，4，1）， IPAddress （0，0，0，0）， IPAddress （255，255，255，0））;

WiFi.softAP（“EmbAJAXTest”， “12345678”）;

// register the page handler and start the server

server.on（“/”， handlePage）;

server.begin（）;

}

void loop（） {

// inside loop（）， add this line to check for and handle incoming connections

server.handleClient（）;

}

草圖非常簡單，幾乎不需要解釋內(nèi)嵌注釋。我想指出的一件事是，在本示例（及以下示例）中，我們將ESP8266設(shè)置為無線接入點(diǎn)。這提供了一個(gè)非常簡單但有效的安全機(jī)制：只有范圍，和范圍內(nèi)的客戶端才能知道會(huì)話密碼。

好，因此請將草繪上載到ESP8266。接下來，在您的PC上，啟動(dòng)WiFi連接管理器，掃描名為“ EmbAJAXTest”的網(wǎng)絡(luò)，然后連接（密碼為“ 12345678”，如草圖中所配置）。現(xiàn)在啟動(dòng)網(wǎng)絡(luò)瀏覽器，然后在位置欄中輸入“ http://192.168.4.1”。應(yīng)該會(huì)收到消息“ Hello world！”。

步驟3：安裝EmbAJAX

一切正常，所以遠(yuǎn)？大！下一步將很容易。首先，我們必須安裝EmbAJAX庫。和往常一樣，有許多方法可以完成此操作，但這是一種方法：

下載該庫的ZIP。

在Arduino IDE中，選擇“ Sketch-》 Include Library-》 Add .ZIP Library”，然后選擇下載的ZIP。

為了很好地采取措施，請重新啟動(dòng)Arduino（雖然可能不需要）

要正確驗(yàn)證EmbAJAX已安裝，請檢查“文件-》”下是否列出了任何內(nèi)容。示例-》 EmbAJAX”。

第4步：閃爍您的LED-網(wǎng)絡(luò)控制

好吧，我保證您可以做得更多除了使用EmbAJAX閃爍LED之外，但這仍然是入門的有用示例。我們將從第3步開始擴(kuò)展示例。 （以下清單直接取自EmbAJAX庫附帶的“ Blink”示例：“ File-》 Examples-》 EmbAJAX-》 Blink”）。

#include

#include

#include

#define LEDPIN LED_BUILTIN

// Set up web server， and register it with EmbAJAX

ESP8266WebServer server（80）;

EmbAJAXOutputDriverESP8266 driver（&server）;

// Define the main elements of interest as variables， so we can access to them later in our sketch.

const char* modes［］ = {“On”， “Blink”， “Off”};

EmbAJAXRadioGroup《3》 mode（“mode”， modes）;

EmbAJAXSlider blinkfreq（“blfreq”， 0， 1000， 100）; // slider， from 0 to 500， initial value 400

// Define a page （named “page”） with our elements of interest， above， interspersed by some uninteresting

// static HTML. Note： MAKE_EmbAJAXPage is just a convenience macro around the EmbAJAXPage###》-class.

MAKE_EmbAJAXPage（page， “EmbAJAX example - Blink”， “”，

new EmbAJAXStatic（“

Control the builtin LED

Set the LED to： ”），

&mode，

new EmbAJAXStatic（“

Blink frequency： SLOW”），

&blinkfreq，

new EmbAJAXStatic（“FAST

”）

）

void handlePage（） {

if（server.method（） == HTTP_POST） { // AJAX request

page.handleRequest（updateUI）;

} else { // Page load

page.print（）;

}

}

void setup（） {

// Example WIFI setup as an access point. Change this to whatever suits you， best.

WiFi.mode（WIFI_AP）;

WiFi.softAPConfig （IPAddress （192，168，4，1）， IPAddress （0，0，0，0）， IPAddress （255，255，255，0））;

WiFi.softAP（“EmbAJAXTest”， “12345678”）;

// Tell the server to serve our EmbAJAX test page on root

server.on（“/”， handlePage）;

server.begin（）;

pinMode（LEDPIN， OUTPUT）;

}

void updateUI（） {

// Enabled / disable the slider. Note that you could simply do this inside the loop. However，

// placing it here makes the client UI more responsive （try it）。

blinkfreq.setEnabled（mode.selectedOption（） == 1）;

}

void loop（） {

// handle network

server.handleClient（）;

// And these lines are all you have to write for the logic： Access the elements as if they were plain

// local controls

if （mode.selectedOption（） == 1） { // blink

digitalWrite（LEDPIN， （millis（） / （1100 - blinkfreq.intValue（））） % 2）;

} else { // on or off

digitalWrite（LEDPIN， mode.selectedOption（） ！= 0）;

}

}

好，此清單更長一點(diǎn)，但是您會(huì)發(fā)現(xiàn)它幾乎沒有害處。從頂部開始，我們現(xiàn)在將EmbAJAX libraray添加到了草圖中（顯然）。接下來，我們定義該引腳以使LED閃爍。令人驚訝的是，這是更復(fù)雜的方面之一，因?yàn)镋SP板在其板載LED的連接位置上存在巨大差異。如果所有其他方法均失敗，則可能需要調(diào)整此定義，以將外部LED（帶有電阻?。┻B接到GPIO引腳之一。

接下來，我們在Web之外還定義了“輸出驅(qū)動(dòng)器”服務(wù)器實(shí)例。不用擔(dān)心這一行，基本上，您只是在告訴EmbAJAX庫在哪里發(fā)送和接收數(shù)據(jù)。

以下幾行更加有趣：我們定義了一些EmbAJAX元素，重要的是一組單選按鈕，以及一個(gè)滑塊。然后將它們添加到網(wǎng)頁（MAKE_EmbAJAXPage）。除了收音機(jī)和滑塊之外，它還包含一些靜態(tài)元素。嘗試添加自己的。乍一看可能很復(fù)雜，但實(shí)際上非常簡單。

handlePage（）函數(shù)現(xiàn)在稍微復(fù)雜一點(diǎn)：它現(xiàn)在區(qū)分“ GET”請求（正常頁面加載），和“ POST”請求（用于傳輸AJAX數(shù)據(jù)）。幸運(yùn)的是，我們不必在這里填寫任何復(fù)雜的內(nèi)容。您需要擔(dān)心的一點(diǎn)是，當(dāng)客戶端發(fā)出更改信號時(shí)，將提供要調(diào)用的函數(shù)的名稱（updateUI（），如下所述）。

與我們的靜態(tài)Web服務(wù)器示例相比， setup（）實(shí)際上是不變的。唯一的補(bǔ)充是我們設(shè)置了LED引腳的輸出模式。每當(dāng)在Web客戶端中更改控件之一時(shí)，就會(huì)調(diào)用

updateUI（）。當(dāng)且僅當(dāng)在單選按鈕組中選擇了“閃爍”選項(xiàng)時(shí)，我們才能使用此功能將滑塊元素設(shè)置為啟用。這實(shí)際上是我希望您會(huì)認(rèn)為“整潔”的第一點(diǎn)：請注意，您將控件當(dāng)作普通的本地對象來處理。您不必?fù)?dān)心發(fā)送或接收任何數(shù)據(jù)。所有這些都是由庫處理的。

類似地，在循環(huán)內(nèi)，控件的外觀就像本地對象一樣。您可以查詢它們的當(dāng)前狀態(tài)并對此采取行動(dòng)（請注意，這些操作非?？欤凰鼈儗?shí)際上并不異步，因此不涉及每個(gè)呼叫的網(wǎng)絡(luò)請求）。

理論上足夠了！上載草圖，然后在瀏覽器中重新加載“ http://192.168.4.1”。 （ESP8266重啟后，您不一定要重新連接到“ EmbAJAXTest” WiFi網(wǎng)絡(luò)；這取決于您的系統(tǒng)和設(shè)置。）您應(yīng)該看到一個(gè)無線電組和一個(gè)滑塊。開始播放！

第5步：從此處出發(fā)

單選按鈕和滑塊并不多，但是當(dāng)然，EmbAJAX不僅具有更多元素。上面是瀏覽“輸入”示例的屏幕截圖（“文件-》示例-》 EmbAJAX-》輸入”）。這顯示了EmbAJAX中當(dāng)前可用的控件。 您知道在您的項(xiàng)目中將這些內(nèi)容用于什么，所以我將不提供任何其他示例，而只是將您引向EmbAJAX API文檔。請注意，您還可以添加自定義CSS進(jìn)行樣式設(shè)置。

作為輸入示例的另一件事，我將指出，右側(cè)顯示的值是從服務(wù)器設(shè)置的 的。重點(diǎn)是要演示一個(gè)完整的循環(huán)，從

控件在客戶端更改

更改傳播到服務(wù)器并在服務(wù)器中處理

更新狀態(tài)給客戶

如果您沒有發(fā)現(xiàn)令人興奮的地方-好的，我會(huì)原諒您缺乏熱情。這正是EmbAJAX庫的全部意義：它使您免于幕后工作的所有無聊工作，并且您最終可以完全不用擔(dān)心要在項(xiàng)目中顯示的 控件和顯示內(nèi)容，而比如何。所以-開發(fā)愉快！
責(zé)任編輯：wv