用ESP8266-NodeMCU开发板显示一下我的QQ头像

诶，说好的自己写 esp8266 的开发板固件的我回来了。
20 年说好的，今天回来还愿了 ESP8266 串口 WiFi 模块 - WiFi 杀手

今天我们把 OLED 显示屏也接上，我此次买的是 4 脚的 OLED (128*64)，不支持彩色显示的。

NodeMCU 开发板#

NodeMCU 是一个开源的 IoT 物联网硬件开发板，由于它支持 WIFI 功能且使用方法十分类似 Arduino 开发板，所以近些年获得了越来越多来自全世界的创客朋友们的青睐。NodeMCU 尺寸与 Arduino Nano 类似。它并不是 Arduino 团队开发的，但是我们也可以使用 Arduino IDE 对它进行开发。

作为万物互联的 IoT 基础，首先物联网控制板的成本不能过高。高昂的物联网控制元件不利于项目成本控制也不利于广大创客爱好者学习和使用它。在这一点上，NodeMCU 比树莓派以及 Arduino 家族的 IoT 平台等更具优势。

细心的朋友可能已经发现了，这会我开发板叫做了 ESP8266-NodeMCU。然而在其它的网站或资料中，有时是用 ESP8266 有时是用 NodeMCU。那么 ESP8266 和 NodeMCU 之间是什么关系呢？

ESP8266 是一块芯片（被铁壳子保住的方型的东西），而 NodeMCU 则是以 ESP8266 芯片为核心的开发板，如下图所示。

要想对 ESP8266 芯片来进行实验操作是很困难的，因为我们很难将小小一枚芯片上的引脚与我们的电脑连接起来然后再进行上传程序等操作。于是便诞生了围绕 ESP8266 芯片的各种开发板。NodeMCU 就是这些开发板中的一员。

NodeMCU 开发板上的两排插针与 ESP8266 芯片的引脚相连。有了开发板上的两排插针，我们就可以很轻松的使用杜邦线将芯片的引脚接到实验电路中。NodeMCU 开发板上还配有 USB 接口以及电压转换电路。这些为我们提供了很大的便利。我们只要用一根 USB 数据线就可以轻松的实现为 ESP8266 供电以及上传程序的操作。当然，NodeMCU 开发板上的电路功能还不止这些，我就不再继续延伸下去了

驱动的安装#

虽然之前已经讲过开发板的驱动安装了，但是不够详细。

目前市面上的 ESP8266 驱动有多种，即使是同一块 NodeMcu 的开发板驱动也可能是不一样的。目前主流的是 CH340 和 CP210X 的驱动

驱动的下载请直接去芯片的制造商的官网下载即可
CP210X：https://cn.silabs.com/developers/usb-to-uart-bridge-vcp-drivers
CH340C：https://www.wch.cn/downloads/CH341SER_EXE.html

下载适合自己平台的驱动安装程序
需要看清楚自己的串口芯片型号是否在驱动程度的支持范围内

如何查看自己的开发板需要什么驱动#

直接看，下图中竖着的长方形黑条，那个就是 USB 转串口芯片。上面会写明芯片的型号名称
问你买的商家

显示屏的焊接#

不要焊接错了，不然会烧坏芯片的
OLED 接线：

GND - GND
VCC - VCC
SCL - GPIO5(D1)
SDA - GPIO4(D2)

洛铁加热中

下面就是焊接好的，注意接线，不一定是按我这个顺序的，要看名称

Arduino IDE 的安装#

下载 arduino IDE
https://www.arduino.cc/en/software
安装
安装还要我教？
配置
点击工具 - 开发板 - 开发板管理器，在设置中写上开发板地址：http://arduino.esp8266.com/stable/package_esp8266com_index.json
之后就会自动下载相应的支持库文件了，期间需要保证网络的科学性
选择开发板
NodeMCU1.0(ESP-12EModule)
选择端口
在计算机的设备管理器中找到你的开发板的 COM 口

Arduino 代码#

有时候我觉得我逼逼叨叨说一大堆还不如直接上代码来的直接，我觉得你肯定也是想直接看代码的而不是听我说一堆废话
我也尽可能在代码中注释了 (编写 arduino 代码请遵循 C/C++ 语言规范)

下列的例子中，连接 WiFi 使用的是 <WiFiManager.h> 库，首次连接需要使用手机连接 ESP8266 发送出来的 WiFi 先进行配网操作。写出屏幕使用的是 < U8g2lib.h > 库，支持中文直接写出

这是一个简单的连接 WiFi 和屏幕显示图片的示例

#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <ESP8266WiFi.h>
#include <NTPClient.h>
#include <WiFiManager.h>
#include <U8g2lib.h>

#define SDA 4  // SDA引脚，默认gpio4(D2)
#define SCL 5  // SCL引脚，默认gpio5(D1)

Adafruit_SSD1306 oled(128, 64, &Wire,-1);   //OLED 屏幕实例化
WiFiUDP ntpUDP;

NTPClient timeClient(ntpUDP,"pool.ntp.org", 8*3600, 60000);

U8G2_SSD1306_128X64_NONAME_F_SW_I2C u8g2(U8G2_R0, /*clock=*/SCL, /*data=*/SDA, /*reset=*/U8X8_PIN_NONE);           // 选择显示屏幕

// 只执行一次
void setup() {

  u8g2.begin();            // 初始化
  u8g2.enableUTF8Print();  // UTF8允许
  u8g2.setFont(u8g2_font_wqy12_t_gb2312b); //字体大小   u8g2_font_wqy15_t_gb2312b  
  
  // 初始化屏幕
  OLED_Init();
  
  OLED_Showchin(1,13,"正在连接WiFi....",0);
  WiFiManager wifiManager;
  wifiManager.autoConnect("ESP8266");

  OLED_Showchin(1,27,"WiFi连接成功！",0);
  OLED_Showchin(1,41,"名称： " + WiFi.SSID(),0);
  OLED_Showchin(1,55,"IP: " + WiFi.localIP().toString(),1);

  // 获取时间
  timeClient.begin();
  u8g2.setFont(u8g2_font_wqy15_t_gb2312b); //字体大小   u8g2_font_wqy15_t_gb2312b  
  
  OLED_Showchin(1,13,"宁小建",0);
  OLED_Showchin(1,27,"hhhhhhhhhhhh",0);
  OLED_Showchin(1,55,"大傻逼哈哈哈",1);


  timeClient.update();
  OLED_Showchin(1,20,"当前北京时间: ",0);
  OLED_Showchin(1,41,timeClient.getFormattedTime(),1);
  delay(1000);
  OLED_img();
}

// 重复执行程序
void loop() {
  // 更新时间
  // timeClient.update();
  // OLED_Showchin(1,27,"当前北京时间: ",0);
  // OLED_Showchin(1,41,timeClient.getFormattedTime(),0);
}

// 打印输出到屏幕（支持中文）
void OLED_Showchin(uint8_t x, uint8_t y, String string, uint8_t boot) {
  u8g2.setCursor(x, y);  //设置显示坐标
  u8g2.print(string);  // 指定缓存区需要打印的字符串
  u8g2.sendBuffer();          // 将定位信息发送到缓冲区
  if(boot == 1){
    delay(1000);
    u8g2.clearBuffer();     // 清除缓存，其实初始化里有清除，循环时一定要加上
  }
}

// 屏幕初始化
void OLED_Init() {
  oled.begin(SSD1306_SWITCHCAPVCC, 0x3C);     //"SSD1306_SWITCHCAPVCC"表示显示器为OLED ,"0x3C"为OLED屏幕默认通信地址
  oled.setTextColor(WHITE);//开像素点发光
  oled.clearDisplay();//清屏
}

// 输出屏幕
void OLED_ShowString(uint8_t x, uint8_t y, uint8_t font_size, String string) {
  oled.setTextSize(font_size);    //设置字体尺寸 (>=1)
  oled.setCursor(x, y);           //设置显示坐标
  oled.println(string);           //显示内容
  oled.display();                 //开启显示
}

// 绘画
void OLED_img() {
  //  图片数据
    const unsigned char gImage_1[518] = { 0X00,0X01,0X40,0X00,0X40,0X00,
  0X00,0X40,0X00,0X00,0X00,0X3E,0XF0,0X00,0X00,0X80,0X00,0X00,0X00,0X1F,0XE0,0X00,
  0X00,0X00,0X00,0X00,0X00,0X06,0XB0,0X00,0X01,0X00,0X00,0X00,0X00,0X03,0XF8,0X00,
  0X00,0X00,0X00,0X00,0X00,0X03,0XFC,0X00,0X00,0X00,0X00,0X00,0X00,0X03,0XDC,0X00,
  0X04,0X00,0X00,0X00,0X00,0X01,0XC0,0X00,0X0E,0X00,0X00,0X00,0X00,0X00,0X80,0X00,
  0X06,0X00,0X00,0X00,0X00,0X00,0X00,0X00,0X01,0X00,0X00,0X00,0X10,0X00,0X00,0X00,
  0X08,0X00,0X00,0X00,0X0E,0X00,0X00,0X00,0X08,0X00,0X00,0X00,0X8F,0X00,0X00,0X00,
  0X00,0X00,0X02,0X02,0X47,0X00,0X00,0X00,0X00,0X00,0X01,0X10,0X63,0X80,0X00,0X00,
  0X00,0X00,0X01,0XC9,0X73,0XC0,0X00,0X00,0X00,0X00,0X00,0XE4,0X79,0XE0,0X00,0X00,
  0X00,0X02,0X00,0XFA,0XF9,0XE0,0X00,0X00,0X10,0X02,0X00,0X7D,0X8C,0XF0,0X00,0X00,
  0X10,0X03,0X01,0X7E,0X90,0XF1,0X80,0X00,0X10,0X01,0X20,0XFD,0X1C,0X7B,0XE0,0X00,
  0X00,0X01,0XA0,0X7D,0X03,0X7B,0X20,0X00,0X10,0X01,0XD8,0XFF,0X8B,0X7E,0X30,0X00,
  0X00,0X01,0XFC,0X7F,0X83,0XB6,0X10,0X00,0X00,0X00,0XF7,0XFF,0XC7,0XBE,0X10,0X00,
  0X00,0X01,0X8F,0XFF,0XE3,0XF6,0X10,0X00,0X01,0X01,0X4F,0XFF,0XFF,0XFF,0X10,0X00,
  0X00,0X01,0XCF,0XFF,0XFF,0XDF,0X10,0X00,0X00,0X01,0XC3,0XFF,0XFF,0XDF,0X70,0X00,
  0X01,0X03,0XE3,0XFF,0XFF,0XDF,0XE0,0X00,0X04,0X01,0XE7,0XFF,0XFF,0XDF,0XE4,0X00,
  0X07,0X00,0XFB,0XFF,0XFF,0XDF,0XC0,0X00,0X07,0X00,0XFB,0XFF,0XFF,0XFE,0X00,0X00,
  0X13,0X00,0X7F,0XFF,0XFF,0XFC,0X00,0X00,0X01,0X20,0X3F,0XFF,0XFF,0XFC,0X00,0X00,
  0X00,0X00,0X3F,0XFF,0XFF,0XF8,0X00,0X0B,0X00,0X00,0X1F,0XFE,0X0F,0XF8,0X00,0X1F,
  0X00,0X00,0X1F,0XF8,0X6F,0XF0,0X00,0XFF,0X00,0X00,0X1F,0XE1,0XFF,0XF0,0X05,0XFF,
  0X00,0X00,0X0F,0XF3,0XFF,0XE0,0X03,0XFF,0X00,0X40,0X0F,0XF7,0XFF,0XC0,0X07,0XFF,
  0X00,0X00,0X07,0XFF,0XFF,0X80,0X07,0XFF,0X08,0X00,0X07,0XFF,0XFF,0X00,0X0F,0XFF,
  0X00,0X00,0X23,0XFF,0XFE,0X00,0X0F,0XFF,0X00,0X08,0X60,0XFF,0XFE,0X00,0X0F,0XFF,
  0X00,0X40,0X20,0X3F,0XFE,0X00,0X1F,0XFF,0X00,0X00,0X10,0X0B,0XFF,0X80,0X1F,0XFF,
  0X00,0X00,0X40,0X00,0X3F,0X00,0X1F,0XFF,0X00,0X00,0X10,0X00,0X3F,0X00,0X1F,0XFF,
  0X20,0X00,0X02,0X00,0X3F,0X00,0X3F,0XFF,0X00,0X00,0X00,0X00,0X7F,0X80,0X3F,0XFF,
  0X00,0X00,0X00,0X10,0X7F,0X80,0X7F,0XFF,0X00,0X00,0X00,0X80,0X7F,0X80,0X7F,0XFF,
  0X10,0X00,0X00,0X00,0X7F,0X80,0XFF,0XFF,0X30,0X00,0X00,0X00,0X7F,0X80,0XFF,0XFF,
  0X10,0X10,0X00,0X00,0X7F,0XC1,0XFF,0XFF,0X00,0X00,0X00,0X00,0X7F,0XF3,0XFF,0XFF,
  0X00,0X00,0X01,0X00,0X3F,0XFF,0XFF,0XFF,0X00,0X00,0X00,0X04,0X3F,0XFF,0XFF,0XFF,
  0X00,0X00,0X00,0X00,0X3F,0XFF,0XFF,0XFF,0X00,0X00,0X10,0X80,0X1F,0XFF,0XFF,0XFF,
  0X01,0X00,0X00,0X05,0X1F,0XFF,0XFF,0XFB,0X00,0X00,0X00,0X00,0X1F,0XF7,0XFF,0XFC,
  0X00,0X00,0X00,0X00,0X1F,0XFB,0XFF,0XFF,0X00,0X00,0X40,0X00,0X19,0XFF,0XFF,0XFF,
  };

  oled.clearDisplay();
  oled.drawBitmap(3, 1, gImage_1, 64, 64, WHITE);
  oled.display();
}

2. 这是一个发起 HTTP 请求，然后在屏幕显示近四天的天气信息

#include <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>
#include <WiFiManager.h> // 引入 WiFiManager 库
#include <ArduinoJson.h> // 引入 ArduinoJson 库
#include <U8g2lib.h> // 引入 U8g2 库

#define SDA 4  // SDA引脚，默认gpio4(D2)
#define SCL 5  // SCL引脚，默认gpio5(D1)

// 选择显示屏幕
U8G2_SSD1306_128X64_NONAME_F_SW_I2C u8g2(U8G2_R0, /*clock=*/SCL, /*data=*/SDA, /*reset=*/U8X8_PIN_NONE);


// 要请求的 URL
const char* url = "http://t.weather.itboy.net/api/weather/city/101230308";

// Wi-Fi 自动连接
void connectToWiFi() {
  WiFiManager wifiManager;
  wifiManager.autoConnect("ESP8266"); // 自动连接到已保存的 Wi-Fi 网络，或设置一个指定名称的接入点
  if (WiFi.status() == WL_CONNECTED) {
    Serial.println("已连接到 Wi-Fi");
  } else {
    Serial.println("未连接到 Wi-Fi");
  }
}

// 发起 HTTP GET 请求并返回响应
String httpRequest(const char* url) {
  WiFiClient client;
  HTTPClient http;
  http.begin(client, url); // 使用 WiFiClient 和 URL

  int httpCode = http.GET(); // 发起请求
  String payload;

  if (httpCode > 0) {
    Serial.printf("HTTP GET 请求已发送，响应码: %d\n", httpCode);
    if (httpCode == HTTP_CODE_OK) {
      payload = http.getString(); // 获取响应内容
      Serial.println("响应内容:");
      Serial.println(payload); // 打印响应内容
    }
  } else {
    Serial.printf("HTTP GET 请求失败，错误: %s\n", http.errorToString(httpCode).c_str());
  }

  http.end(); // 关闭连接
  return payload;
}

// 全局变量存储天气数据
StaticJsonDocument<2048> doc;
int dayIndex = 0;
unsigned long previousMillis = 0;
const long interval = 5000; // 每隔 5 秒切换一次显示

// 解析 JSON 并保存天气信息
bool parseWeather(const String& payload) {
  DeserializationError error = deserializeJson(doc, payload); // 反序列化 JSON

  if (!error) {
    Serial.println("JSON 解析成功!");
    return true;
  } else {
    Serial.print("JSON 解析失败: ");
    Serial.println(error.c_str());
    return false;
  }
}

// 显示天气信息
void displayWeather(int index) {
  if (!doc["data"]["forecast"][index]) return; // 检查 JSON 数据是否存在

  char buffer[128];
  const char* high = doc["data"]["forecast"][index]["high"].as<const char*>();
  const char* low = doc["data"]["forecast"][index]["low"].as<const char*>();
  const char* ymd = doc["data"]["forecast"][index]["ymd"].as<const char*>();
  const char* week = doc["data"]["forecast"][index]["week"].as<const char*>();
  const char* type = doc["data"]["forecast"][index]["type"].as<const char*>();
  const char* notice = doc["data"]["forecast"][index]["notice"].as<const char*>();

  u8g2.clearBuffer();  // 先清空缓冲区

  // 将日期和星期显示在一行中
  snprintf(buffer, sizeof(buffer), "%s %s", ymd, week);
  OLED_Showchin(0, 15, buffer, 2); // 调整文本大小为 1

  // 显示高温和低温在一行中
  snprintf(buffer, sizeof(buffer), "%s %s", high, low);
  OLED_Showchin(0, 35, buffer, 2); // 调整文本大小为 1

  // 显示天气类型
  snprintf(buffer, sizeof(buffer), "%s", type);
  OLED_Showchin(0, 55, buffer, 3); // 调整文本大小为 1

  // 显示提示信息
  // snprintf(buffer, sizeof(buffer), "%s", notice);
  // OLED_Showchin(0, 55, buffer, 1); // 调整文本大小为 1
  
  

  u8g2.sendBuffer(); // 发送缓冲区内容到显示屏
}

// 打印输出到屏幕（支持中文和设置字体大小）
void OLED_Showchin(uint8_t x, uint8_t y, const char* string, uint8_t textSize) {
  u8g2.setCursor(x, y);  // 设置显示坐标
  switch (textSize) {
    case 1:
      u8g2.setFont(u8g2_font_wqy12_t_gb2312b); // 设置最小字体
      break;
    case 2:
      u8g2.setFont(u8g2_font_wqy13_t_gb2312b); // 设置大字体
      break;
    case 3:
      u8g2.setFont(u8g2_font_wqy15_t_gb2312b); // 设置最大字体
      break;
  }
  u8g2.print(string); // 指定缓存区需要打印的字符串
}

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

  u8g2.begin(); // 初始化 U8g2
  u8g2.enableUTF8Print(); // 允许 UTF8

  connectToWiFi(); // 连接 Wi-Fi

  if (WiFi.status() == WL_CONNECTED) {
    String payload = httpRequest(url); // 发起 HTTP 请求
    if (!payload.isEmpty()) {
      if (parseWeather(payload)) { // 解析天气数据
        displayWeather(dayIndex); // 显示初始天气数据
      }
    }
  } else {
    Serial.println("无法连接到 Wi-Fi");
  }
}

void loop() {
  unsigned long currentMillis = millis();

  if (currentMillis - previousMillis >= interval) {
    previousMillis = currentMillis;

    dayIndex = (dayIndex + 1) % 4; // 切换到下一天的数据
    displayWeather(dayIndex); // 显示天气信息
  }

  // 检查WiFi连接状态，如果断开则重新连接
  if (WiFi.status() != WL_CONNECTED) {
    connectToWiFi();
  }
}