ESP8266实现网页交互

 

前言：

物联网LOT（intermet of things）时代，万物互联，wifi芯片是非常重要的，乐鑫的高性价比的ESP8266芯片凭借低功耗低成本高集成度等优势在市场上占有较高的份额，为什么选用这款芯片可以参考之前的调研报告。在之前的资料整理中，涉及到了硬件设计及软件下载开发等多个方面，但是在软件SDK如何开发，程序如何下载等方面学的并不够细致，在一些场景下，需要我们基于官方提供的程序进行二次开发，但是打开程序后，一看，都是什么鬼，完全无法入手，资料那么多，我又该从哪开始看，希望经过本轮的学习，能够快速的对该芯片进行二次开发。

接下来开始我们的学习吧。（整个学习框架可配合思维导图进行查看）

程序开发使用乐鑫官方提供的NONOS-SDK进行开发，并且之前主要开发单片机，所以更习惯使用集成开发环境，接下来也使用安信可提供的IDE进行开发，不过你也可以使用乐鑫提供的liunx开发环境进行开发。

一．环境搭建

工具	版本	说明
ESP8266 IDE	V0.5	集成开发环境，用于程序的开发及编译（安信可提供）
Flash_download_tools	V3.6.5	程序下载工具（乐鑫）
NONOS-SDK	V3.0	SDK开发包（乐鑫）
ESP-12F.pdf		模组原理图及说明
ESP8266调试工具_V2.1	V2.1	调试工具（安信可）

 

安信可资料获取：https://wiki.ai-thinker.com/esp8266

乐鑫资料获取：https://www.espressif.com/zh-hans/support/download/other-tools

 

无论使用乐鑫做的模组还是安信可制作的模组，原理是一样，可能也就是IO口分布不太一样，当我们购买了单模组可以直接通过简单搭建进行测试，也可以直接购买测试板，模组的以下几个引脚需要注意。

一般的测试板都是通过在GPIO0加个按键来实现模式的切换，这里我们使用安信可的ESP-12F进行测试。

 

接下来我们需要安装安信可IDE集成开发环境，软件从安信可官网可以下载，我使用的是的v0.5版本，那它怎么安装怎么使用呢？？？

https://wiki.ai-thinker.com/esp8266 这个网页里都有。

一步步看一下就行了。

 

那我们如何对下载的SDK进行配置，导入及编译呢？？？

 

二．SDK的下载及编译

现在我们从乐鑫官网下载最新的无系统SDK，ESP8266_NONOS_SDK-3.0，进行解压

我们会看到如下文件夹，为了更好的理解，简单说下各个文件夹的作用。

将driver_lib重命名为app(用户程序文件，命名随意)，然后将examples下文件夹复制到app目录下，例：将lOT_Demo（任意实例）文件替换到app文件夹，为了简化结构，删除整个examples文件夹，将ESP8266_NONOS_SDK/third_party/makefile 重命名为 makefile.bak ，以防止编译时报错，接下来，我们启动 ESP_IDE，将项目导入 Eclipse。

https://wiki.ai-thinker.com/ai_ide_use （详细步骤可查看这个网址）

导入后就可以进行编译啦，编译前需要进行保存，否则编译的为未保存之前的文件。

编译前clean project.我们可以看到已经编译出了可以下载的固件。通过这个实例我们可以将程序进行简单的修改，就能成为我们自己的工程。

注：使用ESP8266_NONOS_SDK 2.x的版本是可以正常编译的，由于我使用的3.0版本，直接这个步骤会报错，所以根据3.0版本还需要做一些修改。

打开工程sdk的顶层makefile,找到配置变量SPI_SIZE_MAP，修改为4（32Mbit flash）

以下为编译成功信息。

 

三．将SDK整理成模板

现在将sdk 3.0的程序整理一下之后作为模板进行使用。调整app文件夹文件如下

 

其他文件均删除。User_main.c中剩余user_init,和user_pre_init。

user_init：上层程序的入口函数，给用户提供一个初始化接口。

user_pre_init：配置RF初始化，注册地址信息等。

2.0版本与3.0部分函数有一点区别，2.0不再单独说明。

Esp8266实际上就是一个单片机，在以往的单片机开发中，我们都知道会有main函数作为入口函数然后有死循环，同时还会有定时器等。

例：

int main(void)

{

初始化

While(1)

{

主循环进行处理

}

}

Void xxx_IRQ(void) //中断

{

中断处理

}

ESP8266 SDK编程基于“内核回调”的方式：（功能均在库中实现，对用户不透明）

Void user_init(void)//内核为用户提供的初始化接口函数

{

//IO口，定时器，中断等的初始化

}

*****以下为sdk内部操作***

{

User_init();//用户应用初始化

While(1)

{

//执行内核功能

//执行用户功能 例：用户初始化了一个1s定时，那么这里将进行定时器计时

}

}

回调函数：当满足条件是，内核会调用回调函数

例：user_init中初始化1s定时。

然后直接从void xxx_cb（void）回调函数中做相应的操作就可以了。那么esp8266有几种函数形式呢？？分为四类：应用函数 回调函数 用户任务 中断函数

应用函数说白了就是我们平时封装的函数，主要实现一些功能，被其他函数调用。

回调函数就是初始化后，满足条件会被调用。用户任务，在系统空闲的时候，会调用任务函数，任务函数Non-os中，只支持3个用户任务，优先级2>1>0.中断函数就不解释了。详细的可以查看官方的sdk编程指南，里面有详细的解释。

四．简单的程序编写

模板现在有了，为了更快的使用SDK开发，接下来我们使用模板写一个简单的hello world

串口打印程序吧。参考文档：2c-esp8266_non_os_sdk_api_reference_cn（api说明文档）

1. 添加.h头文件
2. User_init中调用api打印函数

os_printf("SDK version:%s\n",system_get_sdk_version());//打印版本

1. 由于8266默认串口0打印波特率为 74800，所以需要重配置一下，要想重配置就要调用串口驱动中的函数，接下来添加串口驱动。

将sdk->driver_lib下dirver和include 中的文件添加到app下的对应文件夹下。

1. 引用.h文件。
2. 然后下载验证

现象正常，此时第一个程序就验证完成了。

 

其他的驱动操作步骤都是类似的就不一一去操作了。

五．实现网页控制

我们当前的目的是写一个网页，通过控制网页来实现led亮灭的控制。那么该如何实现呢，让我们进行下关键点的梳理。

 

Esp8266相当于作为一个web服务器，当我连接wifi后通过外部设备输入相应的IP，esp8266进行解析，将存储在8266，falsh中的网页读取并显示出来，当我点击网页上的按钮后，8266进行解析，控制灯亮。网页与服务器之间使用Get/POST协议。

 

首先，将ESP8266作为AP模式，创建局域网。使外部设备能够接入ESP8266，

Esp8266建立TCP server，打开相应端口，接收客户端的访问数据，进行相应的应答。

写一个html网页，将网页烧写入FLASH中的user_param区中。

当客户端以指定的格式发送数据给服务器时，发送网页给客户端。

1.8266设置AP模式，建立wifi热点

1. 创建TCP_server,建立帧听
2. 等待clientl连接server，等待接收数据
3. 根据接收的数据，读取flash中的网页，返回给浏览器。
4. 当按下网页上按钮后，进行灯的亮灭控制。
5. Html的制作，下载到flash中相应位置。

注：以手机浏览器为例，其访问的ip地址，过程是怎样的？

我们把8266作为服务器端，手机浏览器作为客户端，一般都是使用get请求，除非指定post提交。请求后，8266肯定要以http协议数据来回复内容的

1.知识扩展

（1）网络结构：

接下来我们说一下网络结构。

学过网络的都知道

OSI模型七层结构：应用层，表示层，会话层，运输层，网络层，数据链路层，物理层。

TCP/IP 协议四层结构:应用层，传输层，网络层，网络接口层。

常用的五层协议：应用层（TFTP,HTTP，FTP,DNS,Telnet），传输层(TCP,UDP)，网络层（IP，ICMP(ping),RIP，OSPF，BGP,IGMP），数据链路层(SLIP,CSLIP,PPP,ARP,RARP,MTU)，物理层。

 

例：小A在小B处买了一本书，小B叫来了快递公司快递员小C，小C检查包装，并在包装上填写好物品名称，收获人，地址等信息，然后将包裹带回了快递公司给了物流处，物流处查看包装信息后是北京的包裹，就将包裹放在飞机上运往北京，北京快递员小D接收到后，检查包裹，查看地址，将包裹配送给小A。

 

小A和小B处在最上层，相当于应用层，依赖快递员小C和小D的服务。小C和小D为传输层，负责对书检查，打包等工作，填入地址等信息。快递公司物流处属于网络层，根据客户信息决定将包裹发到哪里，飞机属于网络接口层，以自己的方式完成物流处递交来的包裹运输。

 

1997年IEEE制定无线局域网的协议标准802.11,系列标准。使用星型拓扑，中心接入点叫做AP。使用802.11系列协议的局域网又称为wifi。

 

（2）GET/POST

 

GET和POST是什么？HTTP协议中的两种发送请求的方法。

HTTP是什么？HTTP是基于TCP/IP的关于数据如何在网中如何通信的协议。

HTTP的底层是TCP/IP。所以GET和POST的底层也是TCP/IP，也就是说，GET/POST都是TCP链接。

（3）html制作

Esp8266设置AP模式，建立热点后，作为tcp_server等待client接入，此时使用手机连入网络，然后打开浏览器，输入192.168.4.1:8266 此时浏览器弹出界面。

输入url使用get机制，操作网页内部按钮使用post机制。

程序内部：

URL的解析，及从flash读取的数据到网页的转化该怎么实现

网页该怎么写？？

打开dreamweaver，新建html网页

新建一个表单，设置为post方法，新建按钮用于提交表单。详细的可以自行学习网页制作相关知识。

我们平时访问百度等，可以通过浏览器抓一下过程，esp8266也要模拟该过程进行网页的提交，我使用火狐自带的抓包工具（F12），一般IE自带的抓包工具也可以。

 

 

 

 

 

 

六．固件下载：

我们要将生成的固件烧写到我们的板卡中，那么怎么下载呢

 

 

 

那么固件的烧写地址是怎么得到，FLASH地址是怎么分配的，详细可查看《安信可ESP8266入门教程》 《程序下载》

(1)NON-FOTA（不支持云端升级）

 

 

 

乐鑫不同版本的SDF可能会改变文件的烧写地址，以控制台输出地址为准。

（2）FOTA（支持云端升级）

 

 

 

 

• 实例演示

实例一：

将web_server工程生成的文件下载到8266中，地址使用编译器提示的地址。

Html的地址放在0x64000地址。

通过手机连接ESP8266_HA wifi，密码12345678

使用浏览器输入192.168.4.1:8266

点击开灯按键，板卡上灯亮。

实例二.（支持微信一键配网，支持网页固件升级，支持网页参数配置）

将plug2.0进行编译，生成固件

输入192.168.40.117/upload,会弹出升级界面，进行网页的升级。

然后输入192.168.40.117进入主界面。

可控制灯，及网络相关参数配置。

 

 

八．项目应用

可将esp8266模块应用到大多数的板卡中，测试人员可通过连入网页实现对设备的升级，参数修改，降低维护成本。示意图如下所示：

输入192.168.40.117（之后固定使用192.168.4.1）会弹出如下界面

 

输入192.168.40.117/upload,弹出升级界面