步驟1：為Arduino設置ESP8266

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

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

步驟2：初學者2：在ESP8266上設置Web服務器

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

#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（）;

}

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

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

步驟3：安裝EmbAJAX

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

下載該庫的ZIP。

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

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

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

第4步：閃爍您的LED-網絡控制

好吧，我保證您可以做得更多除了使用EmbAJAX閃爍LED之外，但這仍然是入門的有用示例。我們將從第3步開始擴展示例。 （以下清單直接取自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）;

}

}

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

接下來，我們在Web之外還定義了“輸出驅動器”服務器實例。不用擔心這一行，基本上，您只是在告訴EmbAJAX庫在哪里發送和接收數據。

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

handlePage（）函數現在稍微復雜一點：它現在區分“ GET”請求（正常頁面加載），和“ POST”請求（用于傳輸AJAX數據）。幸運的是，我們不必在這里填寫任何復雜的內容。您需要擔心的一點是，當客戶端發出更改信號時，將提供要調用的函數的名稱（updateUI（），如下所述）。

與我們的靜態Web服務器示例相比， setup（）實際上是不變的。唯一的補充是我們設置了LED引腳的輸出模式。每當在Web客戶端中更改控件之一時，就會調用

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

類似地，在循環內，控件的外觀就像本地對象一樣。您可以查詢它們的當前狀態并對此采取行動（請注意，這些操作非常快；它們實際上并不異步，因此不涉及每個呼叫的網絡請求）。

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

第5步：從此處出發

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

作為輸入示例的另一件事，我將指出，右側顯示的值是從服務器設置的 的。重點是要演示一個完整的循環，從

控件在客戶端更改

更改傳播到服務器并在服務器中處理

更新狀態給客戶

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