ESP32嵌入网页的3种方法_esp32 网页

作者：Gausst松鼠会 | 2024-04-23 00:05:07

踩

esp32 网页

ESP32嵌入网页的3种方法，

第一种是不压缩直接以.h文件形式（现在用的），优点是可以sprintf动态替换，缺点是没有压缩比较占空间；

第二种是先压缩直接以.gz文件形式，在用filetoarray 工具生成数组和文件长度宏定义，生成.h文件，直接包含C语音的头文件。

第三种也是先压缩直接以.gz文件形式，使用 ESP32 构建系统中的嵌入二进制数据的方式，将其添加到 Flash 中的 .rodata 部分。包含了数组和文件起始和结束变量。

第二和三种详细请看

ESP32 开发笔记（十一）使用 ESP32 做为 WebServer_InfiniteYuan-CSDN博客_esp32 webserver

第一种，比如page_password.h

#define PAGE_MAIN "<html>\

<head></head>\

<style>\

body {\

font-family: apercu-pro, -apple-system, system-ui, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;\

padding: 1em;\

line-height: 2em;\

font-weight: 100;\

</style>\

<body>\

<div id='config'>\

<h1 style='text-align:center'>V2Brain IOT1LG1C LoRa Gateway</h1>\

<script>\

function myrefresh()\

window.location.reload();\

setTimeout('myrefresh()',10000);\

</script>\

<ul>\

<li><a href='/'>Home</a></li>\

<li><a href='/password'>Password</a></li>\

<li><a href='/wifi'>WIFI</a></li>\

<li><a href='/ethernet'>Ethernet</span></a></li>\

<li><a href='/lora'>LoRa</a></li>\

<li><a href='/bluetoolth'>BlueToolth</a></li>\

<li><a href='/HttpOTAWeb'>HttpOTA</a></li>\

</ul>\

<p>This is %s page</p>\

</div>\

</body>\

</html>\

实际发送时

const char *page_template;

page_template= PAGE_MAIN;

sprintf(http_buf, page_template,”Main”);

httpd_resp_send(req, (const char *)http_buf, strlen(http_buf));

补充：

对于第二种和第三种，动态网页的实现可以借助fetch和XMLHttpRequest 。

详细可以参考，如下博文

fetch和XMLHttpRequest讲解_思诚^_^-CSDN博客_fetch和xmlhttprequest

fetch与ajax（XMLHttpRequest）相比 - 编程之家

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/471162