在AI大模型技术浪潮的推动下，编程正从专业领域走向大众化。以ESP32和Arduino为代表的开源硬件平台，正在系统性降低创客的电子开发门槛，让创意落地变得前所未有的简单。随着AI编程工具与开源硬件的深度融合，电子创作正经历从"技术驱动"到"创意驱动"的转变。这种变革不仅催生了更多教育科技产品，更预示着智能硬件开发将迎来全民化时代，让每个普通人都能成为改变世界的创客。

ESP32C3SuperMini是一款基于 Espressif ESP32-C3 WiFi/蓝牙双模芯片的 IoT 迷你开发板。ESP32-C3 是一款32 位 RISC-V CPU，包含FPU（浮点单元），支持IEEE 802.11 b/g/n WiFi和蓝牙 5 (LE)协议。该板附带外部天线，可增强无线应用的信号强度。有11个可用作PWM引脚的数字I/O和4个可用作ADC引脚的模拟I/O。它支持UART、I2C 和 SPI等四种串行接口。

ESP32C3SuperMini定位为高性能、低功耗、高性价比的物联网迷你开发板，适用于低功耗物联网应用和无线可穿戴应用。

一、快速开始

（1）硬件环境：

  • 1 个ESP32C3SuperMini
  • 1 台电脑
  • 1 根 USB Type-C数据线

（2）软件环境：

Arduino IDE下载安装

到arduino官方网站下载，你电脑操作系统对应的Arduino IDE版本。

https://www.arduino.cc/en/software/

查找esp32，选esp32 by Espressif Systems，2.0.17-cn版本（3.x.x版本安装下载失败）：

2、设置开发板型号与端口

选择设置好对应的开发板型号：

设置开发板下载与通信串口：

首先在windows系统中查找对应的设备串口号，例如下图中显示的COM14。

注：如果开发板通过type-c数据线接入PC，系统没有显示串口设备，是数据线问题或板子问题；显示异常设备是串口驱动没有安装。

在文件 > 工具，选中对应的开发板及端口。

到这一步软硬件环境就准备好，下面就进行编程开发。

二、编程与下载运行

（1）控制LED灯

菜单中打开文件 > 新建项目。

步骤1.将以下代码复制到Arduino IDE的新建项目区。

// 设置LED使用的GPIO引脚
int led = 8;

void setup() {
    // 初始化GPIO为输出模式
    pinMode(led, OUTPUT);
}

void loop() {
    digitalWrite(led, HIGH);   // turn the LED off
    delay(1000);               //延时1000ms
    digitalWrite(led, LOW);    // turn the LED on
    delay(1000);               //延时1000ms
}

保存项目，选择工具栏上右箭头图标"-->"编译并上传项目。

上传后，您将看到板子上的LED 闪烁，每次闪烁之间有 1 秒的延迟。

（2）web控制LED灯

#include <WiFi.h>
const char* ssid     = "wifi";  // 设置wifi名称
const char* password = "1234";  // 设置wifi密码

WiFiServer server(80); //wifi服务器对象初始化
void setup()
{
    Serial.begin(115200);
    pinMode(8, OUTPUT);      
    delay(10);
    Serial.println();
    Serial.print("Connecting to ");
    Serial.println(ssid);

    WiFi.begin(ssid, password);

    while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
    }
    Serial.println("");
    Serial.println("WiFi connected.");
    Serial.println("IP address: ");
    Serial.println(WiFi.localIP());  
    server.begin();
}

void loop(){
 WiFiClient client = server.available();   //

  if (client) {                            
    Serial.println("New Client.");          
    String currentLine = "";                
    while (client.connected()) {            
      if (client.available()) {            
        char c = client.read();            
        Serial.write(c);                   
        if (c == '\n') {                  
          if (currentLine.length() == 0) {
            client.println("HTTP/1.1 200 OK");       
            client.println("Content-Type: text/html; charset=utf-8");
            client.println();
            client.print("<div style='text-align: center; font-size: 20px; margin-top: 50px;'>"); 
            client.print("Click <a href=\"/L\">打开LED</a><br><br>"); 
            client.print("Click <a href=\"/H\">关闭LED</a>");
            client.print("</div>"); 
            client.println();
            break;
          } else {   
            currentLine = "";
          }
        } else if (c != '\r') { 
          currentLine += c;      
        }

        if (currentLine.endsWith("GET /H")) {
          digitalWrite(8, HIGH); 
        }           
        if (currentLine.endsWith("GET /L")) {
          digitalWrite(8, LOW);                
        }
      }
    }
    client.stop();
    Serial.println("Client Disconnected.");
  }
}

注：有时网络连接异常时需要按一下boot键

浏览器中输出串口显示的开发板IP，出现下述页面就可控制板上的LED灯。

三、实现原理分析

（1）实现原理

1、代码整体功能

代码实现了两个核心功能：

  1. ESP32 作为 WiFi 客户端，连接到指定名称和密码的路由器，获取局域网 IP 地址；
  2. 在 ESP32 上启动一个基于 TCP 80 端口的简易 Web 服务器，当电脑 / 手机浏览器访问该 IP 时，会显示两个超链接：点击 /H 打开引脚 8 的 LED，点击 /L 关闭引脚 8 的 LED。

2、Web 服务原理

Web 服务基于 HTTP 协议 + TCP 80 端口 实现，核心是 “请求 - 响应” 模型：

  1. ESP32 启动 TCP 服务器监听 80 端口（HTTP 协议默认端口）；
  2. 浏览器（客户端）向 ESP32 的 IP:80 发送 HTTP 请求（如 GET /L、GET /H）；
  3. ESP32 解析请求内容，根据请求数据（/H//L）执行对应操作（返回网页 / 控制 LED）；
  4. ESP32 向浏览器返回 HTTP 响应（状态码、网页内容），完成一次交互后关闭连接。

3、核心工作流程

  1. WiFi 连网核心：通过 WiFi.begin() 发起连接，WiFi.status() 等待连接成功，WiFi.localIP() 获取访问地址；
  2. Web 服务核心：WiFiServer 监听 80 端口，server.available() 检测客户端连接，通过 client.read() 解析 HTTP 请求路径，client.print() 返回响应内容；
  3. 业务逻辑核心：通过判断请求路径（GET /H/GET /L），调用 digitalWrite() 控制 LED 电平。

（2）关键函数分析

1、WiFi 连网相关

代码 / 函数

作用与使用说明

WiFi.begin(ssid, password)

核心连网函数：传入 WiFi 名称（ssid）和密码（password），触发 ESP32 向指定路由器发起连接请求。⚠️ 注意：调用后不会立即连接成功，需要等待状态确认。

WiFi.status()

检测 WiFi 连接状态的核心函数，返回值是枚举类型，代码中只关注 WL_CONNECTED

（连接成功），其他常见值：- WL_DISCONNECTED

：未连接；- WL_CONNECT_FAILED

：密码错误 / SSID 不存在；- WL_NO_SSID_AVAIL

：未找到指定 WiFi。

WiFi.localIP()

连接成功后，获取 ESP32 在局域网中的 IP 地址（如 192.168.1.100），这是浏览器访问 Web 服务的核心地址，通过串口打印出来供用户查看。

while (WiFi.status() != WL_CONNECTED)

循环等待连网：因为 WiFi 连接需要 1~3 秒，通过 500ms 延时的循环，直到状态变为 “已连接” 才继续执行后续代码（启动 Web 服务器）。

2、Web 服务相关

核心对象与启动函数

代码 / 函数

作用与使用说明

WiFiServer server(80)

创建 TCP 服务器对象，指定监听 80 端口（HTTP 协议默认端口，浏览器访问时无需手动加端口）。

server.begin()

启动 Web 服务器：让 ESP32 开始监听 80 端口的客户端连接请求（如浏览器的访问）。

WiFiClient client = server.available()

检测是否有客户端（浏览器）发起连接请求：- 无请求时返回空，client为 false；- 有请求时返回一个客户端对象，代表与该浏览器的连接，后续通过这个对象读写数据。
客户端交互核心逻辑
if (client) {  // 有客户端连接
    while (client.connected()) {  // 只要客户端未断开连接，就持续处理
        if (client.available()) {   // 检测客户端是否有数据（HTTP 请求）发送过来
            char c = client.read();   // 读取一个字节的请求数据
            // ... 解析数据、处理请求 ...
        }
    }
    client.stop();  // 处理完请求后，关闭与客户端的连接
}

代码 / 函数

作用与使用说明

client.connected()

判断当前客户端是否处于连接状态：如果浏览器还没断开，就继续处理数据；如果断开，结束循环。

client.available()

检测客户端是否有可读取的字节（即浏览器发送的 HTTP 请求内容），返回可读取的字节数，非 0 时表示有数据。

client.read()

读取客户端发送的一个字节数据：HTTP 请求是文本格式（如 GET /H HTTP/1.1），通过逐字节读取来解析请求路径。

client.println()

/client.print()

向客户端（浏览器）发送响应数据：

- println()：发送字符串 + 换行符；

- print()：仅发送字符串；代码中用来返回 HTTP 响应头、网页 HTML 内容。

client.stop()

关闭与客户端的连接：HTTP 是 “短连接”，处理完一次请求后主动关闭连接，释放资源。
HTTP 请求解析逻辑（代码中最核心的业务处理）

浏览器发送的 HTTP 请求示例（点击 /H 时）：

GET /H HTTP/1.1
Host: 192.168.1.100
...（其他请求头）

代码通过逐字节读取拼接成 currentLine，再通过以下逻辑解析：

代码逻辑

作用与使用说明

if (c == '\n')

检测换行符：HTTP 请求的每行内容以 \r\n结尾，\n

代表一行的结束。如果 currentLine为空（连续两个 \n），说明请求头解析完成，开始返回响应。

currentLine += c

(c != '\r')

拼接请求行内容：跳过回车符 \r，将有效字符拼接成 currentLine

，最终得到如 GET /H HTTP/1.1 的字符串。

currentLine.endsWith("GET /H")

解析请求路径：判断请求是否是 “打开 LED”，如果是，执行 digitalWrite(8, HIGH)；同理，endsWith("GET /L")对应关闭 LED。

HTTP 响应头（client.println("HTTP/1.1 200 OK")

）

向浏览器返回响应状态：- HTTP/1.1 200 OK

：表示请求处理成功；- Content-type:text/html

：告诉浏览器返回的是 HTML 格式内容；响应头结束后必须加一个空行（client.println()

），这是 HTTP 协议的要求。

3、硬件控制相关

代码 / 函数

作用与使用说明

pinMode(8, OUTPUT)

将引脚 8 设置为输出模式：ESP32 控制 LED 必须先设置引脚模式为输出。

digitalWrite(8, HIGH/LOW)

控制引脚电平：HIGH 为高电平（LED 亮），LOW 为低电平（LED 灭），对应解析后的 /H//L请求执行。

# 物联网 # 智能硬件
Logo
深圳城市开发者社区

一座年轻的奋斗人之城，一个温馨的开发者之家。在这里，代码改变人生，开发创造未来！

更多推荐

cover

2026必备！专科生毕业论文痛点TOP9 AI论文软件测评

avatar 深圳城市开发者社区
cover

约束的力量：从生物认知到人工智能的跨越

avatar 深圳城市开发者社区
cover

喂饭级提示词公开！帮品牌策划写品牌故事

avatar 深圳城市开发者社区