1. 项目背景与核心功能想象一下这样的场景冬天窝在被窝里发现客厅灯没关摸黑找开关太痛苦出差在外突然想起家里走廊灯没关又不想麻烦邻居帮忙。这时候如果有个能用手机远程控制的智能灯问题就迎刃而解了。这就是我们要做的基于ESP32和微信小程序的智能灯控系统。这个项目的核心功能其实很简单通过微信小程序发送指令控制ESP32开发板上的LED灯亮灭。但别小看这个开灯关灯的操作背后可是完整的物联网技术栈在支撑。我去年给自家卧室改造这个系统时实测响应速度能控制在0.5秒内比某些商业产品还快。整个系统涉及三个关键部分负责硬件交互的ESP32开发板成本不到30元、处理业务逻辑的云端服务器可以用腾讯云免费额度、以及用户直接操作的微信小程序无需安装即用即走。这种组合既经济实惠又具备扩展性后期可以轻松添加更多传感器和设备。2. 硬件准备与ESP32开发环境搭建2.1 硬件选购清单先来看看需要准备哪些硬件设备。ESP32开发板建议选择带Wi-Fi模组的版本我用的是ESP32-WROOM-32D某宝上25元包邮。其他配件包括USB数据线建议选Type-C接口的正反插都方便LED灯珠普通5mm直径的就行220欧姆电阻保护LED不被烧坏面包板和杜邦线若干方便 prototyping第一次玩硬件的朋友可能会担心电路连接问题。其实特别简单把LED长脚正极通过电阻接ESP32的GPIO2引脚短脚直接接地GND。我刚开始也怕接错后来发现就算接反了最多LED不亮不会损坏设备。2.2 开发环境配置软件方面需要安装Arduino IDE和必要的库文件。这里有个小技巧先安装VS Code再装PlatformIO插件比直接用Arduino IDE更强大。具体步骤下载安装VS Code完全免费在扩展商店搜索安装PlatformIO IDE新建项目时选择ESP32开发板我用的板子是Espressif ESP32 Dev Module安装过程中最常遇到的问题是驱动识别失败。这时候需要手动安装CP210x USB驱动芯片厂商官网有下载。记得安装后重启电脑否则开发板还是显示未知设备。3. ESP32固件开发实战3.1 基础Wi-Fi连接功能先来写个最简单的Wi-Fi连接程序。ESP32的Wi-Fi库已经封装得很好20行代码就能搞定#include WiFi.h const char* ssid 你家Wi-Fi名称; const char* password Wi-Fi密码; void setup() { Serial.begin(115200); WiFi.begin(ssid, password); while (WiFi.status() ! WL_CONNECTED) { delay(500); Serial.print(.); } Serial.println(连接成功IP地址); Serial.println(WiFi.localIP()); } void loop() {}上传代码后打开串口监视器波特率设115200看到IP地址输出就说明联网成功了。这里有个坑要注意2.4GHz和5GHz双频路由器建议关闭5GHz频段ESP32对某些5GHz信号支持不太好。3.2 实现MQTT通信协议物联网设备最常用的通信协议是MQTT比HTTP更省电高效。我们需要在ESP32上安装PubSubClient库#include PubSubClient.h WiFiClient espClient; PubSubClient client(espClient); void callback(char* topic, byte* payload, unsigned int length) { // 收到消息时的处理逻辑 if ((char)payload[0] 1) { digitalWrite(2, HIGH); // 开灯 } else { digitalWrite(2, LOW); // 关灯 } } void reconnect() { while (!client.connected()) { if (client.connect(ESP32Client)) { client.subscribe(home/bedroom/light); } else { delay(5000); } } } void setup() { // ...WiFi连接代码... client.setServer(mqtt服务器地址, 1883); client.setCallback(callback); pinMode(2, OUTPUT); } void loop() { if (!client.connected()) reconnect(); client.loop(); }实测发现MQTT的QoS设置很重要。家用场景设为QoS1就够了既保证消息必达又不会太耗电。我试过QoS2ESP32的内存差点不够用。4. 云端服务搭建与API设计4.1 选择云服务器方案个人开发者首选腾讯云或阿里云的轻量应用服务器新用户首年不到100元。如果只是demo演示可以用免费的云开发服务微信云开发自带数据库和云函数LeanCloud每月有一定免费额度BaaS服务如Supabase我用的是腾讯云的SCF云函数API网关组合每月前100万次请求免费。创建HTTP触发器时记得开启CORS支持否则小程序会报跨域错误。4.2 设计RESTful API灯光控制其实只需要两个基础接口GET /api/light/status 查询当前状态POST /api/light/switch 控制开关用Node.js写个简单的云函数示例const tcb require(tcb-admin-node); exports.main async (event) { const { method, path } event; if (path /api/light/status method GET) { // 从数据库查询状态 return { code: 0, data: { status: 1 } }; } if (path /api/light/switch method POST) { const { status } event.body; // 更新数据库并下发MQTT指令 return { code: 0, message: 操作成功 }; } return { code: 404, message: 接口不存在 }; };调试API时推荐用Postman先测试比直接对接小程序效率高很多。记得给接口添加鉴权逻辑我吃过没加权限控制的亏被邻居误操作开了整晚的灯。5. 微信小程序开发详解5.1 小程序基础框架搭建微信开发者工具新建项目时建议选择不使用云服务后面可以随时加。项目结构保持简洁pages/light 灯光控制页pages/logs 调试日志页app.js 全局逻辑app.json 页面配置重点看app.json的配置{ pages: [ pages/light/light, pages/logs/logs ], window: { navigationBarTitleText: 智能灯控 } }有个细节要注意小程序页面路径最多只能有三级像pages/home/light/control这样的四级路径会报错。我第一次就栽在这个限制上。5.2 实现控制界面与交互逻辑灯光控制页的WXML很简单view classcontainer switch checked{{lightStatus}} bindchangeswitchChange/ text当前状态{{lightStatus ? 开启 : 关闭}}/text /view对应的JS逻辑Page({ data: { lightStatus: false }, onLoad() { this.getLightStatus(); }, getLightStatus() { wx.request({ url: https://你的域名/api/light/status, success: (res) { this.setData({ lightStatus: res.data.status }); } }); }, switchChange(e) { wx.request({ url: https://你的域名/api/light/switch, method: POST, data: { status: e.detail.value ? 1 : 0 }, success: () { wx.showToast({ title: 操作成功 }); } }); } });小程序有个坑真机调试时域名必须备案且配置了HTTPS。开发阶段可以先勾选不校验合法域名但上线前一定要配置好。