文章目錄

• • 1、前言
  • 2、文檔入口
  • 3、SmartConfig配網(wǎng)開發(fā)
  • • 3.1 基本原理
    • 3.2 騰訊小程序SDK
  • 4、小程序開發(fā)指南
  • • 4.1 小程序SDK
  • 5、改造小程序
  • • 5.1 小程序代碼結構
  • 6、總結

授人以魚不如授人以漁，目的不是為了教會你具體項目開發(fā)，而是學會學習的能力。希望大家分享給你周邊需要的朋友或者同學，說不定大神成長之路有博哥的奠基石。。。

快速導航
單片機菜鳥的博客快速索引(快速找到你要的)

重點說一下，麻煩三連點贊，你的點贊是博主創(chuàng)作的前進動力。

1、前言

博哥有段時間沒開發(fā)小程序，最近剛好有一個契機去研究微信推出的小程序配網(wǎng)教程。

在此記錄一下學習過程，并且最終試驗成功，同時記錄一下調試過程中的問題，方便學習者參考。

注意：

我們這里并不是如何接入騰訊物聯(lián)網(wǎng)平臺，而是學習如何使用小程序進行SmartConfig配網(wǎng)。

對于初學者有兩點要求：

• 如果僅僅是使用小程序，可以直接掃描小程序二維碼
• 如果需要深入學習并且定制化自己的配網(wǎng)需求，那么需要有小程序開發(fā)經(jīng)驗

2、文檔入口

平臺文檔眾多，我們只需要關注幾個我們需要認真看懂的文檔即可。

點擊這里 騰訊物聯(lián)網(wǎng)開發(fā)平臺文檔

重點關注我標注的幾個文檔：

• SmartConfig 配網(wǎng)開發(fā)
  主要理解SmartConfig的基本原理以及騰訊小程序sdk配網(wǎng)工作原理的。

• 自主品牌小程序
  主要理解如何基于官方給的小程序demo去分離出我們需要的專門用于配網(wǎng)的代碼。

接下來我們就認真分析分析官方文檔。

3、SmartConfig配網(wǎng)開發(fā)

騰訊官方文檔 點擊這里可以直接跳轉

3.1 基本原理

• 設備進入 Wi-Fi 混雜模式（不懂什么叫做混雜模式可以看看 ESP8266開發(fā)之旅 應用篇⑤ WiFi探針）（promiscuous mode）以監(jiān)聽捕獲周圍的 Wi-Fi 報文。由于設備暫未聯(lián)網(wǎng)，且 Wi-Fi 網(wǎng)絡的數(shù)據(jù)幀已通過加密，設備無法獲取 payload 的內容，但可以獲取報文的某些特征數(shù)據(jù)，例如每個報文的長度。同時對于某些數(shù)據(jù)幀，例如，UDP 的廣播包或多播包，其報文的幀頭結構比較固定，較容易識別。

• 此時在手機 App 或者小程序側，即可通過發(fā)送 UDP 的廣播包或多播包，并利用報文的特征，例如，長度變化進行編碼。

• 將目標 Wi-Fi 路由器的 SSID/PSW 字符以約定的編碼方式發(fā)送出去，設備端在捕獲到 UDP 報文后，按約定的方式進行解碼，即可得到目標 Wi-Fi 路由器的相關信息并進行聯(lián)網(wǎng)。

3.2 騰訊小程序SDK

騰訊提供了對應的 小程序SDK，點擊可看到

• 這里用到了 npm工具，請自行百度“npm安裝”，網(wǎng)上一堆手把手教程，安裝完之后記得測試一下cmd命令

npm -v

接下來解讀一下官方流程圖：

官方流程圖分為了 配網(wǎng) 以及 設備綁定流程（畢竟官方也是希望我們用起來它的物聯(lián)網(wǎng)平臺）

我們這里只關注 配網(wǎng)。也就是：

• 小程序進入配網(wǎng)模式后，則可以在物聯(lián)網(wǎng)開發(fā)平臺服務獲取到當次配網(wǎng)的 Token。配網(wǎng)token介紹請點擊這里 生成 Wi-Fi 設備配網(wǎng) Token。

主要重點關注兩個東西

• 配網(wǎng) Token（配網(wǎng)的一個臨時許可證，從物聯(lián)網(wǎng)后臺返回的，通過接口獲取，懵逼的同學你就當做是一個臨時的開門鑰匙，有一個時效性，過期了就開不了門）

• 登錄AccessToken，通過這幾個接口去獲取回來，正常我們選擇微信號注冊登錄。
  
  

是不是有點懵逼呢？多看幾遍就會。。。

4、小程序開發(fā)指南

我們直接照著快速入門手冊所說的操作（官方文檔已經(jīng)非常詳細，照著來即可）。

記住：

• 嚴格按照順序來執(zhí)行，特別是第四步的時候需要嚴格填好替代參數(shù)。
  
  這兩個就是標識每個人獨立應用的標識。

同時，需要到達對應文件目錄執(zhí)行npm構建命令

npm install

4.1 小程序SDK

官方文檔地址 請點擊入口

這里是介紹了整個小程序開發(fā)的sdk，所以需要重點去看看。

這里我們看看設備配網(wǎng)的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一鍵配網(wǎng)
 */
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;

配網(wǎng)過程展示的信息也要關注，后面改造小程序重點就是看這里。

至此，配網(wǎng)的文檔講完。下面會講解小程序內容注意點。

5、改造小程序

最后博主會把精簡后的小程序代碼附上，需要的可以評論留郵箱。

把官方小程序下載下來之后，必須要進行npm install，分別在小程序目錄下以及云開發(fā)下進行。

上面三個圖片就是改造后的頁面。為了測試8266 麻煩燒錄以下代碼：

#include <ESP8266WiFi.h>
 
void smartConfig()
{
  WiFi.mode(WIFI_STA);
  Serial.println("\r\nWait for Smartconfig");
  delay(2000);
  // 等待配網(wǎng)
  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");
}

正常情況下會正常配網(wǎng)成功。

5.1 小程序代碼結構

這就是精簡之后的代碼。就剩下一個smartconfig的功能。

6、總結

整體功能不難，主要還是需要去閱讀騰訊云物聯(lián)網(wǎng)平臺文檔，剩下就是照著官方demo去精簡自己需要的代碼。

喜歡的同學，請不要跑了，給博主點個贊，你的點贊是博主前進的動力。

單片機菜鳥哥 CSDN認證博客專家 Java ESP8266 1、多年Android App開發(fā)經(jīng)驗；
2、小程序流行期加入了小程序開發(fā)大軍；
3、業(yè)余時間愛搗鼓自己的業(yè)余愛好，對ESP8266物聯(lián)網(wǎng)開發(fā)有自己的見解；
4、喜歡研究代碼規(guī)范，喜歡了解新知識，致力于不甘做個平凡程序員，知其原理，懂其核心。