ESP32玩转ST7789：手把手教你做个会滚动的天气预报站（Arduino框架）
周末的午后，我盯着桌面上那块2.4英寸的ST7789 TFT屏幕出神——这个原本用于树莓派的小玩意儿，能不能让ESP32也"活"起来？特别是当我想把实时天气数据像新闻跑马灯一样滚动展示时，发现网上大多数教程要么只讲驱动初始化，要么单纯演示静态显示。于是，就有了这个将硬件驱动、网络请求和动态显示技术打通的实战项目。不需要昂贵的开发板，用最常见的ESP32 DevKit和20元不到的屏幕，你就能打造一个会"说话"的天气站。
1. 硬件准备与环境搭建
1.1 物料清单与连接指南
先确认你手头有以下硬件（总成本不超过100元）：
- ESP32开发板（推荐ESP32 DevKitC V4）
- ST7789 TFT屏幕（240x320分辨率，SPI接口）
- 杜邦线若干（建议使用彩色线区分功能）
接线时特别注意电源匹配——多数ST7789模块工作电压是3.3V，与ESP32的IO电平完美兼容。具体连接方式如下表：
| ST7789引脚 | ESP32引脚 | 备注 |
|---|---|---|
| VCC | 3.3V | 电源正极 |
| GND | GND | 电源地线 |
| SCL | GPIO18 | SPI时钟线 |
| SDA | GPIO23 | SPI数据线 |
| RES | GPIO4 | 复位信号（可自定义） |
| DC | GPIO2 | 数据/命令选择 |
| CS | GPIO5 | 片选信号（可自定义） |
| BLK | GPIO12 | 背光控制（可自定义） |
提示：如果屏幕出现花屏，首先检查接线是否松动，特别是DC和RESET这两个关键控制线。
1.2 Arduino环境配置
在Arduino IDE中需要完成三个关键步骤：
安装ESP32开发板支持包：
- 文件→首选项→附加开发板管理器网址添加
https://dl.espressif.com/dl/package_esp32_index.json - 工具→开发板→开发板管理器→搜索安装"esp32"
- 文件→首选项→附加开发板管理器网址添加
安装必需库文件：
// 在库管理器中搜索安装以下库 TFT_eSPI // 显示驱动核心库 ArduinoJson // 天气API解析必备 WiFiManager // 配网神器配置TFT_eSPI库： 找到Arduino安装目录下的
libraries/TFT_eSPI/User_Setup.h文件，取消注释以下配置：#define ST7789_DRIVER #define TFT_WIDTH 240 #define TFT_HEIGHT 320 #define TFT_MOSI 23 // 对应ESP32的SDA引脚 #define TFT_SCLK 18 // 对应SCL引脚 #define TFT_CS 5 // 片选引脚 #define TFT_DC 2 // 数据/命令选择 #define TFT_RST 4 // 复位引脚 #define LOAD_GLCD // 启用基本字体
2. 天气数据获取与处理
2.1 选择免费天气API
经过对比测试，推荐使用以下两个免费API服务：
- 和风天气：注册开发者账号后，每小时1000次免费调用
- OpenWeatherMap：免费套餐支持每分钟60次请求
以和风天气为例，获取实时数据需要两步：
- 注册账号并创建项目，获取API Key
- 构造请求URL（替换最后的LOCATION_KEY为城市代码）：
https://devapi.qweather.com/v7/weather/now?location=101010100&key=YOUR_KEY
2.2 JSON数据解析实战
收到API返回的JSON数据后，需要用ArduinoJson库提取关键信息。典型响应格式如下：
{ "now": { "temp": "26", "feelsLike": "28", "text": "多云", "windDir": "东南风", "windScale": "3" } }对应的解析代码示例：
#include <ArduinoJson.h> void parseWeather(String json) { DynamicJsonDocument doc(1024); deserializeJson(doc, json); JsonObject now = doc["now"]; String temperature = now["temp"]; String conditions = now["text"]; String wind = now["windDir"] + now["windScale"] + "级"; // 后续显示处理... }注意：务必在setup()中初始化Serial.begin(115200)以便调试时查看解析结果。
3. 动态滚屏效果实现
3.1 ST7789滚屏寄存器揭秘
ST7789控制器有两个关键寄存器控制滚屏：
- VSCRDEF (0x33)：定义滚动区域
- TFA (Top Fixed Area)：顶部固定区域行数
- VSA (Vertical Scroll Area)：可滚动区域行数
- BFA (Bottom Fixed Area)：底部固定区域行数
- VSCSAD (0x37)：设置滚动起始地址
必须满足TFA + VSA + BFA = 屏幕高度，否则滚屏功能不会生效。在我们的240x320屏幕上，典型配置是：
- TFA = 40 (顶部显示城市名称)
- VSA = 240 (主信息滚动区)
- BFA = 40 (底部显示更新时间)
3.2 代码实现分步拆解
首先在setup()中初始化滚动区域：
tft.writecommand(0x33); // VSCRDEF tft.writedata(0x00); // TFA高位 tft.writedata(40); // TFA低位 tft.writedata(0x00); // VSA高位 tft.writedata(240); // VSA低位 tft.writedata(0x00); // BFA高位 tft.writedata(40); // BFA低位然后创建滚动函数，每调用一次文本下移一行：
void scrollText(String text, uint16_t yPos) { static uint16_t scrollPos = 40; // 从TFA下方开始 tft.fillRect(0, scrollPos, 240, 16, TFT_BLACK); // 清除旧内容 tft.drawString(text, 10, scrollPos, 2); // 2号字体 scrollPos++; if(scrollPos >= 280) scrollPos = 40; // 循环滚动 tft.writecommand(0x37); // VSCSAD tft.writedata(scrollPos >> 8); tft.writedata(scrollPos & 0xFF); }4. 项目集成与优化技巧
4.1 主程序逻辑设计
完整项目需要协调三个关键功能：
- WiFi连接管理（建议使用WiFiManager库实现网页配网）
- 定时获取天气数据（每30分钟请求一次API）
- 平滑的滚屏效果（每500ms更新一次显示位置）
核心循环结构示例：
void loop() { static unsigned long lastWeatherUpdate = 0; static unsigned long lastScrollUpdate = 0; // 每30分钟更新天气 if(millis() - lastWeatherUpdate > 30*60*1000) { fetchWeather(); lastWeatherUpdate = millis(); } // 每500ms滚动一次 if(millis() - lastScrollUpdate > 500) { scrollText(weatherInfo, currentScrollPos); lastScrollUpdate = millis(); } }4.2 视觉优化方案
为了让显示更专业，可以添加这些细节：
- 多行信息交替：温度、湿度、风力分三行滚动
- 图标显示：用16x16像素的小图标表示天气状态
- 平滑动画：采用双缓冲机制避免闪烁
- 颜色主题：根据天气类型切换配色（晴天用蓝黄，雨天用蓝白）
图标绘制示例代码：
void drawWeatherIcon(String condition) { if(condition.indexOf("晴") != -1) { tft.fillCircle(220, 20, 10, TFT_YELLOW); // 太阳 } else if(condition.indexOf("雨") != -1) { for(int i=0; i<3; i++) { tft.drawLine(215+i*5, 15, 220+i*5, 25, TFT_BLUE); // 雨滴 } } }调试时发现一个有趣现象：当WiFi信号弱时，滚屏会出现轻微卡顿。这反而成了一种直观的网络状态指示——看到文字滚动不流畅，就知道该检查网络连接了。最终成品放在书桌上，不仅实用，更是一个展示技术实力的精致摆件。
