ESP8266 html 页面代码集成到.ino文件中

Question

我使用的是 ESP8266，这是程序的 HTML 部分。我是从网上复制粘贴过来的，想改文件的HTML页。我可以添加什么格式的 html 代码？谢谢！（我试图放入一个文本输入字段，但我想稍后放入许多 HTML 个元素）。

const String HtmlHtml = "<html><head>" 
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /></head>";`
const String HtmlHtmlClose = "</html>";
const String HtmlTitle = "<h1>Arduino-er: ESP8266 AP WebServer exercise</h1><br/>\n";
const String HtmlLedStateLow = "<big>LED is now <b>ON</b></big><br/>\n";
const String HtmlLedStateHigh = "<big>LED is now <b>OFF</b></big><br/>\n";
const String HtmlButtons = 
"<a href=\"LEDOn\"><button style=\"display: block; width: 100%;\">ON</button></a><br/>" 
"<a href=\"LEDOff\"><button style=\"display: block; width: 100%;\">OFF</button></a><br/>";

Answer 1

我假设您稍后会有一部分将您的变量组合起来并制作一个大的用于显示 html。你可以这样做。

-打开您的编辑器和 copy/paste 来自您的 post

的代码

-随意编辑

-删除您 post 编写的代码中的变量并替换为一个，示例

  const String wholePage = "INSERT YOUR HTML";

-而且比在使用新的 where is whole HTML 代码

之前添加变量的行

希望对您有所帮助！ :)

Answer 2

您可以从 SPIFFS 流式传输 HTML 文件。这是一个 example :

您需要获取 streamFile() 函数，如下所示：

  String contentType = "text/html";
  if(SPIFFS.exists(path)){
    File file = SPIFFS.open(path, "r");
    size_t sent = server.streamFile(file, contentType);
    file.close();
    return true;
  }

Answer 3

您可能需要考虑清理它以使用未转义的多行语法：

void handleAbout() {
    const char* message = R"foo(
    <!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
     <link rel=stylesheet type=text/css href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' />
    </head><body class=container>
    <h1>testing</h1>
    <main>
     <h3>Status</h3>
      <ul>
      <li>Mode: <b>[[MODE]]</b>
       <li><a href=/reset >reboot device</a>
      </ul>
    </main>
    </body>
    </html>
    )foo";

    String message2= String(message);
    // templating replaces string-concat functionality:
    message2.replace("[[MODE]]", String(inputMode));
    // prove it's a usable String to the esp:
    server.send(200, "text/html", message2);
} // end about section handler

您还可以使用任何在线文本到 json 编码器从任意文本生成 C 语言友好的转义字符串文字。例如：my slim's "JSON.stringify" 引擎转换...

ESP8266 html 页面代码集成到.ino文件中

ESP8266 html page code integrated into .ino file

html

c

esp8266

arduino-ide

arduino-esp8266