ESP8266开发之旅 小程序篇③ 基于腾讯物联网平台的配网小程序(smartConfig)
发表时间:2020-11-29
发布人:葵宇科技
浏览次数:386
文章目录
- 1、前言
- 2、文档入口
- 3、SmartConfig配网开发
- 3.1 基本原理
- 3.2 腾讯小程序SDK
- 4、小程序开发指南
- 4.1 小程序SDK
- 5、改造小程序
- 5.1 小程序代码结构
- 6、总结
授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力。希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石。。。
快速导航
单片机菜鸟的博客快速索引(快速找到你要的)
重点说一下,麻烦三连点赞,你的点赞是博主创作的前进动力
。
1、前言
博哥有段时间没开发小程序,最近刚好有一个契机去研究微信推出的小程序配网教程。
在此记录一下学习过程,并且最终试验成功,同时记录一下调试过程中的问题,方便学习者参考。
注意:
我们这里并不是如何接入腾讯物联网平台,而是
学习如何使用小程序进行SmartConfig配网
。
对于初学者有两点要求:
- 如果仅仅是使用小程序,可以直接扫描小程序二维码
- 如果需要深入学习并且定制化自己的配网需求,那么需要有小程序开发经验
2、文档入口
平台文档众多,我们只需要关注几个我们需要认真看懂的文档即可。
点击这里 腾讯物联网开发平台文档
重点关注我标注的几个文档:
-
SmartConfig 配网开发
主要理解SmartConfig的基本原理
以及腾讯小程序sdk配网工作原理
的。 -
自主品牌小程序
主要理解如何基于官方给的小程序demo去分离出我们需要的专门用于配网的代码。
接下来我们就认真分析分析官方文档。
3、SmartConfig配网开发
腾讯官方文档 点击这里可以直接跳转
3.1 基本原理
-
设备进入
Wi-Fi 混杂模式
(不懂什么叫做混杂模式可以看看 ESP8266开发之旅 应用篇⑤ WiFi探针)(promiscuous mode)以监听捕获周围的 Wi-Fi 报文。由于设备暂未联网,且 Wi-Fi 网络的数据帧已通过加密,设备无法获取 payload 的内容,但可以获取报文的某些特征数据,例如每个报文的长度
。同时对于某些数据帧,例如,UDP 的广播包或多播包,其报文的帧头结构比较固定,较容易识别。 -
此时在手机 App 或者小程序侧,即
可通过发送 UDP 的广播包或多播包
,并利用报文的特征,例如,长度变化进行编码。 -
将目标 Wi-Fi 路由器的 SSID/PSW 字符以约定的编码方式发送出去,设备端在捕获到 UDP 报文后,按约定的方式进行解码,即可得到目标 Wi-Fi 路由器的相关信息并进行联网。
3.2 腾讯小程序SDK
腾讯提供了对应的 小程序SDK,点击可看到
- 这里用到了 npm工具,请自行百度“npm安装”,网上一堆手把手教程,安装完之后记得测试一下cmd命令
npm -v
接下来解读一下官方流程图:
官方流程图分为了 配网
以及 设备绑定
流程(毕竟官方也是希望我们用起来它的物联网平台)
我们这里只关注 配网。也就是:
- 小程序进入配网模式后,则可以在物联网开发平台服务获取到当次配网的 Token。配网token介绍请点击这里 生成 Wi-Fi 设备配网 Token。
主要重点关注两个东西
-
配网 Token
(配网的一个临时许可证,从物联网后台返回的,通过接口获取,懵逼的同学你就当做是一个临时的开门钥匙,有一个时效性,过期了就开不了门) -
登录
AccessToken
,通过这几个接口去获取回来,正常我们选择微信号注册登录。
是不是有点懵逼呢?多看几遍就会。。。
4、小程序开发指南
我们直接照着快速入门手册所说的操作(官方文档已经非常详细,照着来即可
)。
记住:
严格按照顺序来执行
,特别是第四步的时候需要严格填好替代参数。
这两个就是标识每个人独立应用的标识。
同时,需要到达对应文件目录执行npm构建命令
npm install
4.1 小程序SDK
官方文档地址 请点击入口
这里是介绍了整个小程序开发的sdk,所以需要重点去看看。
这里我们看看设备配网的SDK依赖结构:
说明对于我们smartconfig来说,依赖三个SDK包:
qcloud-iotexplorer-appdev-sdk
qcloud-iotexplorer-appdev-plugin-wificonf-core
qcloud-iotexplorer-appdev-plugin-wificonf-smartconfig
接下来重点关注里面的smartconfig内容:
关键小程序代码:
const WifiConfConstants = require('qcloud-iotexplorer-appdev-plugin-wificonf-core').constants;
const {
// 错误的中文描述
WifiConfErrorMsg,
// 步骤code
WifiConfStepCode,
// 步骤code的中文描述
WifiConfStepDesp
} = WifiConfConstants;
/**
* smartconfig一键配网
*/
function SmartConfigConfigure({
token,
wifiInfo = {
SSID: '';
password: '';
BSSID: '';
},
familyId = 'default',
roomId,
reporter,
>,
>,
}) {
const>= (data) => {
reporter.info(data.code, data.detail);
switch (data.code) {
case WifiConfStepCode.PROTOCOL_SUCCESS:
onStepChange(1);
break;
case WifiConfStepCode.CREATE_UDP_CONNECTION_SUCCESS:
onStepChange(2);
break;
case WifiConfStepCode.BUSINESS_QUERY_TOKEN_STATE_SUCCESS:
onStepChange(3);
break;
case WifiConfStepCode.WIFI_CONF_SUCCESS:
onStepChange(4);
break;
}
};
const>= ({ productId, deviceName }) => {
onStatusChange({
status: 'success',
productId,
deviceName,
});
};
const>= async ({ code, detail }) => {
reporter.error(code, detail);
onStatusChange({ status: 'error' });
};
sdk.plugins['wifiConfSmartConfig'].start({
wifiConfToken: token,
targetWifiInfo: wifiInfo,
autoRetry: true, // 自动处理故障流程
familyId,
roomId,
>,
>,
>});
}
module.exports = SmartConfigConfigure;
配网过程展示的信息也要关注,后面改造小程序重点就是看这里
。
至此,配网的文档讲完。下面会讲解小程序内容注意点。
5、改造小程序
最后博主会把精简后的小程序
代码附上,需要的可以评论留邮箱。
把官方小程序下载下来之后,必须要进行npm install,分别在小程序目录下以及云开发下进行。
上面三个图片就是改造后的页面。为了测试8266 麻烦烧录以下代码:
#include <ESP8266WiFi.h>
void smartConfig()
{
WiFi.mode(WIFI_STA);
Serial.println("\r\nWait for Smartconfig");
delay(2000);
// 等待配网
WiFi.beginSmartConfig();
while (1)
{
Serial.print(".");
delay(500);
if (WiFi.smartConfigDone())
{
Serial.println("SmartConfig Success");
Serial.printf("SSID:%s\r\n", WiFi.SSID().c_str());
Serial.printf("PSW:%s\r\n", WiFi.psk().c_str());
WiFi.setAutoConnect(true); // 设置自动连接
break;
}
}
Serial.println("");
Serial.println("WiFi connected");
Serial.println("IP address: ");
Serial.println(WiFi.localIP().toString());
}
void setup()
{
Serial.begin(115200);
smartConfig();
}
void loop()
{
delay(100);
Serial.println("loop");
}
正常情况下会正常配网成功。
5.1 小程序代码结构
这就是精简之后的代码。就剩下一个smartconfig的功能。
6、总结
整体功能不难,主要还是需要去阅读腾讯云物联网平台文档,剩下就是照着官方demo去精简自己需要的代码。
喜欢的同学,请不要跑了,给博主点个赞,你的点赞是博主前进的动力。