<p><iframe name="ifd" src="https://mnifdv.cn/resource/cnblogs/Learn8266ForSDK" frameborder="0" scrolling="auto" width="100%" height="1500"></iframe></p>

<iframe frameborder="0" height="1500" name="ifd" scrolling="auto" src="https://mnifdv.cn/resource/cnblogs/Learn8266ForSDK" width="100%"></iframe>

说明

这节使用微信小程序使用APUConfig配网绑定ESP8266,并通过MQTT实现远程通信控制继电器和查看设备温湿度数据;

APUConfig是我自己做的一种方式, 为了便于使用微信小程序绑定WiFi模组而写的;

注意

这节是连接的自建的物联网平台,用户可以按照下面的教程自行搭建;

https://www.cnblogs.com/yangfengwu/p/13208227.html

教程有Windows版和Linux版,下面的教程是用来做产品项目的

配置起来周期比较长,需要等2个星期才会审核完成!

对于学习开发者使用我提供的MQTT服务器地址信息测试就可以.

测试

1,打开源码,打开下载软件,添加上下载的bin文件

eagle.flash.bin                             0x00000

eagle.irom0text.bin                      0x10000

esp_init_data_default_v08.bin    0x3FC000

blank.bin                                      0x3FE000

注意:bin文件排列顺序要按照下图. 

2,让开发板进入下载模式

按下固件按钮(一直按着) → 按下复位按钮 → 松开复位按钮 → 松开固件按钮

3,点击START下载

4,下载完成以后复位下

5,安装微信小程序(使用开发工具打开以下工程)

注:如果没有学习过小程序,请先学习微信小程序开源教程

6.点击 预览,使用微信扫码以后安装到手机

注:默认连接的我的服务器,mnif.cn,用户可以在详情里面选择不校验域名(不推荐,可能通信有问题)

推荐在微信小程序平台上设置域名白名单

点击预览,然后使用微信扫描安装到手机

7.添加设备

8.添加WiFi设备

9.手机连接自家的路由器,输入自家路由器密码

提示:路由器名称会自动显示, 如果没有自动显示需要打开手机定位

10.长按开发板的固件引脚大约3S,等待指示灯快闪,之后松开按钮

11.点击 APP 绑定设备按钮

绑定成功以后自动跳转到主页面,并添加了一个设备

12.点击设备进入设备控制页面

页面显示的为设备的温湿度数据, 可以点击按钮控制开发板继电器

整体说明

整个程序就是利用MQTT服务器实现微信小程序和设备之间通信.

微信小程序通过和设备配网绑定,让设备连接上路由器.

通信过程中,APP也获取到了设备的MAC地址信息.

设备连接上MQTT服务器以后,设备订阅的主题是: user/设备的MAC地址   设备发布的主题是: device/设备的MAC地址

微信小程序获取设备的MAC地址后,微信小程序发布的主题是: user/设备的MAC地址   微信小程序订阅的主题是: device/设备的MAC地址

微信小程序和设备的发布和订阅的主题相对应,APP和设备的消息发给MQTT服务器以后,MQTT服务器就为各自的消息互相转发.

程序绑定过程

1.整体

绑定过程中WiFi模块会发出固定无线信号(ssid:wifi_8266_bind; Password:11223344),

微信小程序连接WiFi模块发出的无线信号,然后使用UDP和模组进行通信

微信小程序连接上wifi模块的无线以后,不停的使用udp把路由器信息发给模组

模组接收到路由器信息以后把自身的MAC地址发给微信小程序

2,ESP8266的绑定程序封装好了,用户只需要调用即可

3.现在看下微信小程序的绑定程序,点击添加设备菜单跳转到添加设备页面

4.点击添加WiFi设备按钮跳转到绑定页面

5.点击绑定按钮连接WiFi模块的热点,初始化UDP

注:用户不用过于关心内部细致的流程,以后移植使用的时候知道大体就可以

6.连接上热点以后允许UDP每隔1S发送路由器信息给WiFi模组

7,接收到模组返回的mac地址数据,携带着数据跳转到index

8.index把接收的数据存储起来

9.在onShow显示数据

ESP8266 MQTT程序说明

1.初始化MQTT,并执行连接

2.检测到MQTT断开,发送任务通知, 在任务函数里面重新连接MQTT

提示:按照官方建议,为使程序稳定,所有的网络通信操作函数尽量在任务中执行.

3.接收处理MQTT数据

4.发送MQTT数据

5.获取串口接收的数据,并把串口接收的数据发送到MQTT

微信小程序 MQTT程序说明

1,关于mqtt的js包

paho-mqtt.js 官方底层包  mqtt.js本人再次封装的mqtt包,用户后期通信都是使用这个里面的api函数

用户可以根据自己的mqtt服务器更改参数

2,连接mqtt只需要在一开始的时候调用下 

MQTT.ConnectMqtt();//链接MQTT

然后内部就是自动连接.

3,点击页面上的设备,携带着设备的MAC地址信息跳转到设备控制页面

4,控制页面在onLoad函数里面接收跳转的数据,并在里面设置MQTT回调函数

5.在定时器里订阅主题

6.在MQTT接收回调函数中接收处理数据

7.点击按钮发布继电器控制命令