Arduino Uno WiFi 网页服务器：通过浏览器控制 LED 开关

组件与物料

电路连接

使用板载 LED (D13) 或外接 LED：阳极串联 220Ω 电阻接 D13，阴极接 GND。

项目介绍

演示如何利用 Arduino UNO WiFi 内置网页服务器功能，通过浏览器控制 LED 开关。

代码结构

• setup()：初始化 D13 为输出，启动 WiFi，打印服务器就绪信息
• loop()：轮询 WiFi 客户端连接，调用 process() 解析请求
• process()：读取 URL 路径第一段，分发到 WebServer() 或 digitalCommand()
• WebServer()：返回 HTML 页面，包含两个按钮 (ON/OFF)，点击跳转至 /arduino/digital/13/1 或 /arduino/digital/13/0
• digitalCommand()：解析引脚号与数值，执行 digitalWrite()，返回纯文本状态

访问方式

浏览器输入：https://<IP>/arduino/webserver/ 或 https://<hostname>.local/arduino/webserver/

页面显示两个按钮，点击即可控制 D13 LED。同时也可通过 Arduino Web Panel 面板操作。

完整代码

#include <Wire.h>
#include <ArduinoWiFi.h>

void setup() {
  pinMode(13, OUTPUT);
  Wifi.begin();
  Wifi.println("WebServer Server is up");
}

void loop() {
  while (Wifi.available()) {
    process(Wifi);
  }
  delay(50);
}

void process(WifiData client) {
  String command = client.readStringUntil('/');
  if (command == "webserver") WebServer(client);
  if (command == "digital") digitalCommand(client);
}

void WebServer(WifiData client) {
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println();
  client.println("");
  client.println("Click<input type=button onClick=\"var w=window.open('/arduino/digital/13/1','_parent');w.close();\" value='ON'>pin13 ON<br>");
  client.println("Click<input type=button onClick=\"var w=window.open('/arduino/digital/13/0','_parent');w.close();\" value='OFF'>pin13 OFF<br>");
  client.println("");
  client.print(DELIMITER);
}

void digitalCommand(WifiData client) {
  int pin = client.parseInt();
  if (client.read() == '/') {
    int value = client.parseInt();
    digitalWrite(pin, value);
  }
  client.println("Status: 200 OK");
  client.print(F("Pin D")); client.print(pin);
  client.print(F(" set to ")); client.print(value);
  client.print(EOL);
}

原理图

简单接线图：D13 → 220Ω → LED阳极，LED阴极 → GND。