arduino / VScode+platformIO搭建esp32/esp8266编译环境(一篇足矣)

arduino/VScode+platformIO 搭建esp32/esp8266开发环境(一篇足矣)

前言：入门开源硬件开发，在搭建编译环境的时候碰了一脸灰，特意写下此博客，以供参考！结尾还有micropython+esp32/esp8266环境搭建的入口，千万不要错过哦~

arduino esp32/esp8266环境

下载软件

arduino v1.8.15: 【官网入口】【 微云入口】
esp32/esp8266离线安装库: 【下载入口】 密码:666
esp32库文档: 【github入口】
esp8266库文档: 【github入口】

说明: arduino本身是不支持esp32/esp8266开发的, 需要额外安装库文件

安装软件

1. 安装arduino
2. 打开arduino->文件->首选项，在附加开发版管理器网址输入框中，填入以下网址:
   esp32: https://www.arduino.cn/package_esp32_dev_index.json
   esp8266: https://www.arduino.cn/package_esp8266com_index.json
3. 保存退出arduino，打开esp32/esp8266离线安装库文件，双击安装即可

说明: 软件安装基本都是傻瓜式安装，在这里不过多赘述

软件设置

esp8266开发版:

说明：在淘宝上买到的带下载功能的开发版, 选择这两种开发版即可

串口频率：115200

时钟频率：80MHZ（图是错的哈）

esp32开发版:

说明：在淘宝上买到的带下载功能的开发版, 选择DOIT ESP32 DEVKIT即可

串口频率：115200

时钟频率：80MHZ（图是错的哈）

扩展库

arduino社区有很多优秀的扩展库可供使用, 因此很多硬件的驱动库不需要直接写，直接下载使用即可

路径: 项目->加载库->管理库

由于arduino服务器在外国，所以有时会出现加载失败原因，不要怀疑自己网络原因哈

示例

下载到的库一般都会有许多示例可供参考，这里以oled驱动库为例

路径: 文件->示例->ESP8266 and ESP32 OLED driver-> SSD1306SimpleDemo

示例上一般都会有详细注释，可以很方便的入门使用
库文件保存路径：C:\Users\{youname}\Documents\Arduino\libraries

编译与上传

一般都要先编译试错，然后再上传
注：上传有时会出现错误或卡顿现象，可以通过以下方式排错

1. 在右下角检查接口是否正确连接

   

2. 上传的时候按住板子上的FLASH(esp8266)或BOOT(esp32)键

3. 检查程序是否出错

VScode+PlatformIO esp8266/esp32环境

说明：arduino好是好，就是编程的时候没有智能提示，对于我这种三板斧的人来说无疑是致命的。于是自然而然的就在网上找到了vscode+platformIO组合，vscode是微软优秀的开发者工具，而platformIO是优秀的嵌入式开发平台，支持arduino，stm32，esp序列，C51等单片机的编译和烧录，二者结合简直就是如虎添翼。

软件下载

vscode下载: 【官网入口】【蓝筹云入口】

PlatformIO官网文档: 【官网入口】

PlatformIO插件安装: 点击左侧栏的扩展 -> 搜索platformIO -> 安装第一个插件

由于是通过C/C++进行编译的，所以为避免出错，vscode最好先搭建好C/C++编译环境
安装如下插件：

1. C/C++

2. C/C++ Clang Command Adapter

3. C/C++ Snippets

4. C++ Intellisense

工程创建

插件安装好后会在左侧栏自动生成一个蜜蜂图标，点击进入平台主页(或选择点击左下角的小房子)

主页说明：

1. 安装esp32/esp8266固件

点击Platforms -> Embedded -> 输入框搜索espressif8266/espressif32 -> 选择对应的固件安装
注：首次安装会很慢，快着几秒钟，慢着几个钟，耐心等待即可，第一次之后就会变快了，或者自行百度找办法

2. 创建hello_word工程

点击home -> new project

工程名：自行命名

板子类型：esp8266选择NodeMCU1.0(ESP-12E Modoule)/esp32选择DOIT ESP32 DEVKIT V1

框架：选择arduino即可

注：首次创建会非非非常的慢

工程目录说明

目录	说明
.pio	工程编译产生产物
.vscode	vscode配置文件
include	工程中所用到的头文件
lib	自己编写的库文件
src	自己编写的C/C++文件
test	工程测试文件(一般用不到)
.gitignore	git仓库忽略文件,用于版本控制
platformio.ini	项目配置文件(配置项可查官方文档【load】)

串口频率设置: monitor_speed = 115200（放在platformio.ini文件中即可）

嵌入式开发的hello_world-点亮第一盏灯

在./src/main.cpp中输入如下代码

#include 

void setup() {
  // put your setup code here, to run once:
  Serial.begin(115200); //初识化串口波特率
  pinMode(2, OUTPUT); //设置GOIP2引脚为输出模式
  digitalWrite(2, LOW); //设置GOIP2引脚为低电平
}

void loop() { 
  // put your main code here, to run repeatedly:
  digitalWrite(2, HIGH); //设置GOIP2引脚为高电平
  Serial.println("LED: ON");  //串口台中输入
  delay(500); //延迟500ms
  digitalWrite(2, LOW); //设置GOIP2引脚为低电平
  Serial.println("LED: OFF");
  delay(500);
}

注：源文件一般都含有setup和loop函数, setup函数用于初识化配置，像引脚的输入输出配置，外部中断等，loop函数就是一个循环体，是单片机持续执行的地方

先编译再上传（左下角）

编译通过

上传成功

控制台输出

编译通过但上传失败:

1. 查看接口是否正确连接
2. 查看串口频率设置正确
3. 上传的时候按住BOOT/FLASH键
   以上都不行可以尝试拔掉重连

2引脚连接的是板子上的led灯，实验现象就是LED一闪一闪亮晶晶

导入第三方库

同arduino，platformIO同样有许多第三方库文件，其路径home->libraries->搜索框搜索

这里以ESP8266 and ESP32 OLED driver for SSD1306 displays库为例

注：用到oled显示屏 I2C版，可以去淘宝买一块，没有的话下面的内容可以不用看了

配置说明：一般来说导入工程的同时也会自行设置配置文件，但难免有出错或者自己想设置库文件版本的时候

第三方库的使用

1. 选择库中的一个案例（路径：./.pio/libdeps/example/SSD1306SimpleDemo）

2. 修改案例(讲解如下)

#include          // Only needed for Arduino 1.6.5 and earlier
#include "SSD1306Wire.h"        // legacy: #include "SSD1306.h"

// Optionally include custom images
#include "images.h"   //图像十六进制头文件


// 初识化显示屏：vcc->3.3V/5V GND-地 SDA：数据信号->D22 SCL: 时钟信号->D33 
SSD1306Wire display(0x3c, 22, 23);   // ADDRESS, SDA, SCL  -  SDA and SCL usually populate automatically based on your board's pins_arduino.h


#define DEMO_DURATION 3000    //页面切换时间：3s
typedef void (*Demo)(void);   //定义页面列表

int demoMode = 0; 
int counter = 1;  //进度条计数

void setup() {
  Serial.begin(115200); //串口波特率115200
  Serial.println();
  Serial.println();


  // Initialising the UI will init the display too.
  display.init();   //初识化oled

  display.flipScreenVertically(); //作用，翻转屏幕
  display.setFont(ArialMT_Plain_10);  //设置字体, 字体文件路径：./.pio/libdeps/src/OLEDisplayFonts.h

}

// 编写不同字体案例
void drawFontFaceDemo() {
    //通过下面网站可创建一个自己喜欢的字体，复制到./.pio/libdeps/src/OLEDisplayFonts.h文件中
    //通过display.setFont()函数设置自己喜欢的字体
    // create more fonts at http://oleddisplay.squix.ch/
    //display.setTextAlignment() 设置字体对齐方式
    display.setTextAlignment(TEXT_ALIGN_LEFT); 
    display.setFont(ArialMT_Plain_10);
    display.drawString(0, 0, "Hello world");
    display.setFont(ArialMT_Plain_16);
    display.drawString(0, 10, "Hello world");
    display.setFont(ArialMT_Plain_24);
    display.drawString(0, 26, "Hello world");
}

// 编写自动换行案例
void drawTextFlowDemo() {
    display.setFont(ArialMT_Plain_10);
    display.setTextAlignment(TEXT_ALIGN_LEFT);
    display.drawStringMaxWidth(0, 0, 128,
      "Lorem ipsum\n dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore." );
}

// 编写字体不同对齐方式案例
void drawTextAlignmentDemo() {
    // Text alignment demo
  display.setFont(ArialMT_Plain_10);

  // The coordinates define the left starting point of the text
  display.setTextAlignment(TEXT_ALIGN_LEFT);
  display.drawString(0, 10, "Left aligned (0,10)");

  // The coordinates define the center of the text
  display.setTextAlignment(TEXT_ALIGN_CENTER);
  display.drawString(64, 22, "Center aligned (64,22)");

  // The coordinates define the right end of the text
  display.setTextAlignment(TEXT_ALIGN_RIGHT);
  display.drawString(128, 33, "Right aligned (128,33)");
}

// 编写填充，直线，斜线等图案案例
void drawRectDemo() {
      // Draw a pixel at given position
    for (int i = 0; i < 10; i++) {
      display.setPixel(i, i);
      display.setPixel(10 - i, i);
    }
    display.drawRect(12, 12, 20, 20);

    // Fill the rectangle
    display.fillRect(14, 14, 17, 17);
    
    // Draw a line horizontally
    display.drawHorizontalLine(0, 40, 20);
    
    // Draw a line horizontally
    display.drawVerticalLine(40, 0, 20);
}

// 画圆案例
void drawCircleDemo() {
  for (int i=1; i < 8; i++) {
    display.setColor(WHITE);
    display.drawCircle(32, 32, i*3);
    if (i % 2 == 0) {
      display.setColor(BLACK);
    }
    display.fillCircle(96, 32, 32 - i* 3);
  }
}

// 画进度条案例
void drawProgressBarDemo() {
  int progress = (counter / 5) % 100;
  // draw the progress bar
  display.drawProgressBar(0, 32, 120, 10, progress);

  // draw the percentage as String
  display.setTextAlignment(TEXT_ALIGN_CENTER);
  display.drawString(64, 15, String(progress) + "%");
}

// 画xbm图片案例
void drawImageDemo() {
    // see http://blog.squix.org/2015/05/esp8266-nodemcu-how-to-create-xbm.html
    // on how to create xbm files
    display.drawXbm(34, 14, WiFi_Logo_width, WiFi_Logo_height, WiFi_Logo_bits);
}

Demo demos[] = {drawFontFaceDemo, drawTextFlowDemo, drawTextAlignmentDemo, drawRectDemo, drawCircleDemo, drawProgressBarDemo, drawImageDemo};
int demoLength = (sizeof(demos) / sizeof(Demo));
long timeSinceLastModeSwitch = 0;

void loop() {
  // 清屏
  display.clear();
  // 调用案例函数
  demos[demoMode]();

  display.setTextAlignment(TEXT_ALIGN_RIGHT);
  display.drawString(10, 128, String(millis()));
  // 将缓冲区写入显示
  display.display();

  // 用于计时，切换页面
  if (millis() - timeSinceLastModeSwitch > DEMO_DURATION) {
    demoMode = (demoMode + 1)  % demoLength;
    timeSinceLastModeSwitch = millis();
  }
  counter++;
  delay(10);
}

3. 编译上传（这里不再演示）

4. 接线说明（这里以esp32为例，esp8266的没有22，23引脚，需要自行更改）

引脚	接线
VCC	3.3/5V(具体看自己显示屏)
GND	地
SDA	22
SCL	23

5. 效果展示

当然嵌入式开发不止可以用C/C++，还能用python进行程序编写，这就需要用到Micropython。

下一篇博客《Micropython+esp32/esp8266开发环境》【传送门】