ESP8266开发之旅小程序篇③ 基于腾讯物联网平台的配网小程序（smartConfig）

发表时间：2020-11-29

发布人：葵宇科技

浏览次数：290

文章目录

- 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");
}