首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >2-ESP8266 SDK开发-项目开发教程-微信小程序使用APUConfig配网绑定ESP8266,并通过MQTT实现远程通信控制(自建物联网平台)

2-ESP8266 SDK开发-项目开发教程-微信小程序使用APUConfig配网绑定ESP8266,并通过MQTT实现远程通信控制(自建物联网平台)

作者头像
杨奉武
发布2022-04-29 16:38:31
发布2022-04-29 16:38:31
1.7K0
举报
文章被收录于专栏:知识分享知识分享

说明

这节使用微信小程序使用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.点击按钮发布继电器控制命令

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-03-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 说明
    • 这节使用微信小程序使用APUConfig配网绑定ESP8266,并通过MQTT实现远程通信控制继电器和查看设备温湿度数据;
    • APUConfig是我自己做的一种方式, 为了便于使用微信小程序绑定WiFi模组而写的;
  • 注意
    • 这节是连接的自建的物联网平台,用户可以按照下面的教程自行搭建;
    • https://www.cnblogs.com/yangfengwu/p/13208227.html
    • 教程有Windows版和Linux版,下面的教程是用来做产品项目的
    • 配置起来周期比较长,需要等2个星期才会审核完成!
    • 对于学习开发者使用我提供的MQTT服务器地址信息测试就可以.
  • 测试
    • 1,打开源码,打开下载软件,添加上下载的bin文件
      • 注意: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.点击按钮发布继电器控制命令
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档