首先我們需要一塊帶有螢幕的esp866板子，如下圖。有屏了，我們才能在上面玩我們做的東西

一、流程

1. ESP從flash中讀取wifi資訊。
2. 讀取成功，跳轉到步驟9
3. 讀取失敗，跳轉到步驟4
4. ESP8266建立帶有預設密碼的熱點，並建立一個websocket伺服器
5. 將熱點名稱、密碼、ip和埠生成二維碼，顯示在螢幕上
6. 通過手機APP掃描螢幕上的二維碼，根據二維碼的資訊，連線wifi熱點
7. wifi熱點連線成功後，連上websocket伺服器並將可用的wifi資訊傳遞給esp8266
8. esp8266成功獲取到資訊後，斷開熱點。
9. 連線真實的wifi
10. 連線wifi失敗，返回到步驟1，
11. 連線wifi成功，將wifi資訊儲存到flash中。跳轉到步驟12
12. 做自己想做的事情了

二、所需的庫

    將下載的庫，拷貝到arduino的庫目錄下面(xxx/Arduino/library)。你也可以通過arduino庫管理進行下載，這樣可以不用另外拷貝

三、實現程式碼

• ESP從flash中讀取wifi資訊。這裡我們通過EEPROM庫來從flash讀取

    #define EEPROM_HEAD_LEN 6   //頭長度，這裡需要定義下，如果不定義。無法判斷當前讀取的是不是你儲存的配置
    #define EEPROM_SSID_LEN 32   //wifi ssid
    #define EEPROM_PWD_LEN 32   //wifi pwd
    #define EEPROM_URL_LEN 64   //伺服器ip地址或域名
    #define EEPROM_PORT_LEN 4   //埠
    #define EEPROM_PATH_LEN 12  //伺服器websocket路徑

   #define EEPROM_SIZE (EEPROM_HEAD_LEN+EEPROM_SSID_LEN+EEPROM_PWD_LEN+EEPROM_URL_LEN+EEPRO    M_PORT_LEN+EEPROM_PATH_LEN)

    const char *eeprom_head = "ssid";

    struct ConfigInfo{
        char head[EEPROM_HEAD_LEN];
        char sta_ssid[EEPROM_SSID_LEN];
        char sta_pwd[EEPROM_PWD_LEN];
        char url[EEPROM_URL_LEN];
        int port;
        char path[EEPROM_PATH_LEN];
    };

    boolean readConfig() 
    {
      char tmp[EEPROM_SIZE]={0};
      stepId = IOT_STEP_STA_ING;
      Serial.println("Reading EEPROM...");
      EEPROM.begin(EEPROM_SIZE);
      memset(&config,0,EEPROM_SIZE);
  
      for (int i = 0; i < EEPROM_HEAD_LEN; i++)
      {
          tmp[i] = char(EEPROM.read(i));
      }

      if(strncmp(eeprom_head,tmp,strlen(eeprom_head))==0)
      {
        for(int i=EEPROM_HEAD_LEN;i<EEPROM_SIZE;i++)
        {
            tmp[i] = char(EEPROM.read(i));
        }

        memcpy(&config,tmp,EEPROM_SIZE);
        drawText("succ to read config!");
        return true;
      }
      else 
      {
        Serial.println("Config not found.");
        drawText("fail to read config");
        return false;
      }

    }

• 將資料儲存到flash中

    void writeConfig(ConfigInfo info)
    {
        char tmp[EEPROM_SIZE]={0};
        memcpy(tmp,&info,EEPROM_SIZE);
    
        for(int i=0;i<EEPROM_SIZE;i++)
        {
          EEPROM.write(i, tmp[i]);
        }
    
        EEPROM.commit();
    }

• 建立AP熱點

    const char *ssid_head = "maxi";
    const char *password = "12345678";

    WiFi.mode(WIFI_AP);
    WiFi.macAddress(mac);
    sprintf(ssid,"%s%02x%02x%02x%02x%02x%02x",ssid_head,mac[0],mac[1],mac[2],mac[3],mac[4],mac[5]);
    WiFi.softAPConfig(ap_ip, ap_ip, ap_netmask); // configure ip address for softAP 

    WiFi.softAP(ssid,password);

• 建立websocket伺服器

    WebSocketsServer webServer = WebSocketsServer(WEBSOCKET_PORT);

    webServer.begin();
    webServer.onEvent(webSocketEvent_config);

• 生成二維碼

#ifdef OLED_QRCODE
  sprintf(buf,"{\"ssid\":\"%s\",""\"pw\":\"%s\",\"ip\":\"%s\",\"port\":\"%d\"}",ssid,password,ap_ip.toString().c_str(),WEBSOCKET_PORT);
  String str(buf);
  display.clear();
  qrcode.init();
  qrcode.create(str);
  display.display();

#endif

四、總結

    思想知道了，這個專案實現起來，還是很簡單的。由於專案中內容比較多，這裡就不提取程式碼了。如果有需要，可以共同討論