别再为ESP32手撸前端了！这个神库，让你用最简单、最“Arduino”方式，创建一个功能强大、颜值在线的Web UI。

作者

 

想给自己的ESP32小项目配个手机APP或者网页，让它看起来高大上一点，结果一头扎进HTML、CSS、JavaScript的汪洋大海，什么异步请求、前端框架、响应式布局……学得头发都快掉了，项目还没个影。要么就是用那些现成的APP，丑得要死，还一堆限制。

这感觉，我懂。太懂了。

想当年我也是这么过来的，直到我发现了 ESPUI 这个神兵利器。今天，我就掏心窝子跟大伙儿聊聊这玩意儿，它怎么就能把我们从前端的苦海里解救出来。

这玩意儿到底是啥？

说白了，ESPUI就是一个专门给ESP8266和ESP32用的Arduino库。你完全不需要懂网页开发那套复杂的东西。你只需要会写几行C++代码，就像你控制一个LED灯一样简单，就能“凭空”变出一个网页控制界面。

最牛的是，这个网页界面是通过WebSocket和你的ESP芯片实时通讯的。啥意思呢? 就是说，你在手机上按下一个按钮，ESP能立刻收到指令；ESP上的传感器数据变了，网页上的数值也能马上刷新。


上手有多简单？先看疗效

废话不多说，咱们直接上代码，看看创建一个最简单的按钮有多容易。

#include <ESPUI.h>

// 按钮被按下或松开时，这个函数就会被调用
void buttonCallback(Control *sender, int type) {
// 判断事件类型
switch (type) {
    case B_DOWN: // 按钮被按下
      Serial.println("按钮按下了！");
      break;
    case B_UP: // 按钮被松开
      Serial.println("按钮松开了！");
      break;
  }
}

void setup() {
  Serial.begin(115200);

// 初始化WiFi（这里以AP模式为例，让ESP自己创建个热点）
  WiFi.softAP("MyCoolProject", "12345678");

// 初始化ESPUI，并给你的网页起个标题
  ESPUI.begin("我的牛逼项目");

// 就这一行！添加一个按钮，标题是“点我”，并绑定上面的回调函数
  ESPUI.button("点我", &buttonCallback); 
}

void loop() {
// loop里啥也不用干，ESPUI在后台自己玩
}

看到了吗？核心代码就ESPUI.button()那一行！你把这段代码烧录进你的ESP32或8266，然后手机连上它创建的那个叫“MyCoolProject”的WiFi，打开浏览器访问默认的IP地址（通常是192.168.4.1），一个漂亮的按钮就出现在你眼前了。你点一下，串口就会打印出信息。

是不是简单到有点过分了？

它能变出多少花样？

你可能觉得，一个按钮有啥了不起的。别急，ESPUI的“军火库”里可不止这点东西。它几乎涵盖了我们日常DIY需要的所有控件。我给你整理了个表，让你看得更明白：

控件类型

我给你说人话
Label (标签)

就是个“显示屏”，你想让它显示啥文字、啥数值，一行代码就更新了。比如实时显示温度、湿度。
Button (按钮)

最基础的，点一下就干活。可以区分“按下”和“松开”两个动作。
Switch (开关)

像电灯开关一样，有“开”和“关”两种状态，而且在所有连接的设备上同步状态。
Slider (滑块)

调个光、控个速，拖一下就行。比如用它来控制LED的亮度和风扇的转速，丝滑得很。
Number Input (数字输入)

需要用户输入一个精确的数字？用它。比如设置一个定时器的分钟数。
Text Input (文本输入)

让用户输入一段文字，比如给设备改个名、设置个WiFi密码啥的。
Pad (方向盘)

玩过手柄吧？就那十字键，还带中间键。控制小车、云台简直是绝配。
Select (下拉选择)

提供几个固定的选项让用户选，比如“模式一”、“模式二”、“模式三”。
Graph (图表)

这个功能还比较试验性，但已经能用了！可以把传感器数据实时绘制成曲线图，逼格瞬间拉满。
还有更多…

还有像分隔符、颜色选择器、日期时间输入等等，花样多得很！

有了这些“积木”，你就可以像搭乐高一样，自由组合出你想要的任何控制界面。

进阶玩法，让你与众不同

当你熟悉了基本操作，ESPUI还提供了一些骚操作，让你的UI更上一层楼。

  1. 1. Tab (选项卡)：如果你的控件太多，一个页面放不下，可以用Tab把它们分门别类，就像浏览器标签页一样，界面瞬间清爽。

  2. 2. 动态隐藏/显示：某些控件可以在特定条件下才显示出来。比如，只有当“高级模式”开关打开时，才显示那些复杂的设置选项。ESPUI.updateVisibility()函数帮你搞定。

  3. 3. 自定义样式 (Inline Styles)：觉得默认颜色不好看？想骚气一点？没问题！你可以用CSS代码直接修改任何一个控件的颜色、边框、背景……把它搞成彩虹色都行。ESPUI.setPanelStyle()，请开始你的表演。

  4. 4. 控件分组：想把几个相关的按钮或者滑块放在同一个“面板”里？可以！这样布局更紧凑，逻辑也更清晰。

最后唠叨几句

说实话，ESPUI不是万能的。如果你想做一个像商业APP那样极其复杂、华丽的界面，那可能还是得老老实实学前端。但对于我们绝大多数的DIY项目、原型验证、智能家居小玩意儿来说，ESPUI简直就是量身定做的神器。

它最大的价值在于，把我们从繁琐、不熟悉的前端开发中解放出来，让我们能百分之百地专注于硬件和核心功能的实现。这才是我们作为Maker和嵌入式玩家的乐趣所在，对吧？

这玩意儿在GitHub上是开源的，背后有一群大佬在不断完善。安装也非常简单，用PlatformIO或者Arduino IDE的库管理器，一搜一装，齐活儿。

项目地址： https://github.com/s00500/ESPUI

视频演示如下：

 

发表评论