【微信小程序控制硬件15 】 开源一个微信小程序，支持蓝牙快速配网+WiFi双控制ESP32-C3应用示范；（附带Demo）

      微信物联网生态主要分在微信硬件开发平台与腾讯物联开发平台，前者已经停止维护，但依然有着很大的学习价值，而后者作为主推的平台，集成很多功能，包括从微信小程序实现配网到控制；

      为了兼顾更多的朋友和自己的学习笔记，我将会一直更新此专题笔记，欢迎关注本人CSDN半颗心脏，带你走进前沿领域，学习前沿技术！

自搭微信服务器&&微信硬件开发平台

【微信小程序控制硬件第1篇 】 全网首发，借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器，轻松控制智能硬件！
【微信小程序控制硬件第2篇 】 开始微信小程序之旅，导入小程序Mqtt客户端源码，实现简单的验证和通讯于服务器！
【微信小程序控制硬件第3篇 】 从软件到硬件搭建一个微信小程序控制esp8266的项目，自定义通讯协议，为面试职位和比赛项目加分！
【微信小程序控制硬件第4篇 】 深度剖析微信公众号配网 Airkiss 原理与过程，esp8266如何自定义回调参数给微信，实现绑定设备第一步！
【微信小程序控制硬件第5篇 】理清接下来必须走的架构思想，学习下 JavaScript 的观察者模式，在微信小程序多页面同时接收到设备推送事件！
【微信小程序控制硬件第6篇 】服务器如何集成七牛云存储SDK，把用户自定义设备图片存储在第三方服务器！
【微信小程序控制硬件第7篇 】动起来做一个微信小程序Mqtt协议控制智能硬件的框架，为自己心里全栈工程师梦想浇水！！
【微信小程序控制硬件第8篇 】微信小程序以 websocket 连接阿里云IOT物联网平台mqtt服务器，封装起来使用就是这么简单！
【微信小程序控制硬件第9篇 】巧借阿里云物联网平台的免费连接，从微信小程序颜色采集控制 esp8266 输出七彩灯效果，中秋节来个直播如何？！
【微信公众号控制硬件 第10篇 】如何在微信公众号网页实现连接mqtt服务器教程！！
【微信小程序控制硬件 第11篇 】全网首发，微信小程序ble蓝牙控制esp32，实现无需网络也可以控制亮度开关。
【微信小程序控制硬件 第12篇 】微信小程序蓝牙控制硬件应如何开发？为您全面解析微信小程序蓝牙API的使用。
【微信小程序控制硬件 第13篇 】【AT篇】与硬件平台无关，微信小程序 AP 配网安信可 Wi-Fi 模块入网示例。
【微信小程序控制硬件 第14篇 】微信小程序蓝牙+WiFi双控制ESP32-C3应用示范；。
【微信小程序控制硬件 第15篇 】开源一个微信小程序，支持蓝牙快速配网+WiFi双控制ESP32-C3模组应用示范。

腾讯物联开发平台

【腾讯连连 - 腾讯物联开发平台 第1篇 】腾讯官方静鸡鸡发布的“腾讯连连”终于来了，按照官方教程教你在微信小程序实现配网、控制 ESP8266啦！
【腾讯连连 - 腾讯物联开发平台 第2篇 】深度解析微信小程序smartconfig配网原理，安信可ESP-12S直连腾讯物联开发平台！！
【腾讯连连 - 腾讯物联开发平台 第3篇 】安信可IoT微信小程序全面开源，小程序上实现一键配网+控制+绑定！
【腾讯连连 - 腾讯物联开发平台 第4篇 】ESP8266 RTOS C SDK二次开发接入腾讯物联网开发平台的笔记分享！

一、前言

   前面已经给大家带来了如何实现小程序WiFi+蓝牙控制ESP32-C3模组的原理，

• 小程序WiFi+蓝牙控制ESP32-C3模组文章

   借助小程序的浪潮，我们再开源一波，这篇给大家再开源一个小程序配网的代码；

---

二、 Blufi乐鑫自研的蓝牙配网协议

   BluFi 是一款基于蓝牙通道的 Wi-Fi 网络配置功能，适用于 ESP32。它通过安全协议将 Wi-Fi 配置和证书传输到 ESP32，然后 ESP32 可基于这些信息连接到 AP 或建立 SoftAP。

   BluFi 流程的关键部分包括数据的分片、加密、校验和验证。

   用户可按需自定义用于对称加密、非对称加密和校验的算法。这里我们采用 DH 算法进行密钥协商、128-AES 算法用于数据加密、CRC16 算法用于校验和验证。

ESP32 配网流程

1. ESP32 开启 GATT Server 功能，发送带有特定 adv data 的广播。你可以自定义该广播，该广播不属于 BluFi Profile。
2. 使用手机 APP 搜索到该特定广播，手机作为 GATT Client 连接 ESP32。你可以决定使用哪款手机 APP。
3. GATT 连接建立成功后，手机向 ESP32 发送“协商过程”数据帧（详情见 BluFi 传输格式 ）。
4. ESP32 收到“协商过程”数据帧后，会按照使用者自定义的协商过程来解
5. 析。
6. 手机与 ESP32 进行密钥协商。协商过程可使用 DH/RSA/ECC 等加密算法进行。
7. 协商结束后，手机端向 ESP32 发送“设置安全模式”控制帧。
8. ESP32 收到“设置安全模式”控制帧后，使用经过协商的共享密钥以及配置的安全策略对通信数据进行加密和解密。
9. 手机向 ESP32 发送“BluFi 传输格式”定义的 SSID、Password 等用于 Wi-Fi 连接的必要信息。
10. 手机向 ESP32 发送“Wi-Fi 连接请求”控制帧，ESP32 收到之后，识别为手机已将必要的信息传输完毕，准备连接 Wi-Fi。
11. ESP32 连接到 Wi-Fi 后，发送“Wi-Fi 连接状态报告”控制帧到手机，以报告连接状态。至此配网结束。

流程图

---

三、相关代码

3.1 蓝牙快速配网

   这里是采用上述的BluFi原理做的一款小程序，效果如下：

   功能特性如下：

1. 标准的乐鑫BluFi协议，支持ESP32和ESP32-C3模组配网，仅支持2.4G频段AP热点连接，支持双频路由器配网；
2. 跨平台特性，无关Android和IOS平台，真正实现一套代码多复用；
3. 过滤搜索蓝牙设备，筛选其他非BluFi协议的蓝牙设备，实现快速选择设备配网；

---

3.2 蓝牙本地控制

1. 乐鑫物联网操作框架 esp-idf 的 freeRtos 实时操作系统熟悉，包括任务创建/消息队列/进程间通讯；
2. 微信小程序开发基础，包括MQTT库/低功耗蓝牙API接口使用，包括搜索/连接/通讯；
3. 使用乐鑫封装 RMT 驱动层单线驱动WS2812B，实现彩虹等效果；
4. 对ESP32/C3芯片的外设开发熟悉，对BLE API接口使用熟悉，包括自定义广播/名字/自定义UUID；

蓝牙控制代码

设置蓝牙广播名字

esp_ble_gap_set_device_name(TEST_DEVICE_NAME);

设置服务UUID

 gl_profile_tab[0].service_id.is_primary = true;
 gl_profile_tab[0].service_id.id.inst_id = 0x00;
 gl_profile_tab[0].service_id.id.uuid.len = ESP_UUID_LEN_16;
 gl_profile_tab[0].service_id.id.uuid.uuid.uuid16 = GATTS_SERVICE_UUID_TEST_A;

主动通知上位机数据发生改动：

 case ESP_GATTS_READ_EVT:
    {
        esp_gatt_rsp_t rsp;
        memset(&rsp, 0, sizeof(esp_gatt_rsp_t));
        rsp.attr_value.handle = param->read.handle;
        rsp.attr_value.len = 3;
        rsp.attr_value.value[0] = red;
        rsp.attr_value.value[1] = green;
        rsp.attr_value.value[2] = blue;
        esp_ble_gatts_send_response(gatts_if, param->read.conn_id, param->read.trans_id, ESP_GATT_OK, &rsp);
        break;
    }

上位机主动发送数据到此并做出对应的处理：

 case ESP_GATTS_WRITE_EVT:
    {
        if (!param->write.is_prep)
        {
            ESP_LOGI(GATTS_TAG, "GATT_WRITE_EVT, value len %d, value :", param->write.len);
            esp_log_buffer_hex(GATTS_TAG, param->write.value, param->write.len);
            //发送数据到队列
            struct __User_data *pTmper;
            sprintf(user_data.allData, "{\"red\":%d,\"green\":%d,\"blue\":%d}", param->write.value[0], param->write.value[1], param->write.value[2]);
            pTmper = &user_data;
            user_data.dataLen = strlen(user_data.allData);
            xQueueSend(ParseJSONQueueHandler, (void *)&pTmper, portMAX_DELAY);

            ESP_LOGI(GATTS_TAG, "%02x %02x %02x ", param->write.value[0], param->write.value[1], param->write.value[2]);
        }
        example_write_event_env(gatts_if, &a_prepare_write_env, param);
        break;
    }

WiFi控制代码

设置MQTT远程连接的参数

/* 
 * @Description: MQTT参数连接的配置
 * @param: 
 * @return: 
*/
void TaskXMqttRecieve(void *p)
{
    //连接的配置参数
    esp_mqtt_client_config_t mqtt_cfg = {
        .host = "www.xuhong.com",  //连接的域名 ，请务必修改为您的
        .port = 1883,              //端口，请务必修改为您的
        .username = "admin",       //用户名，请务必修改为您的
        .password = "xuhong123456",   //密码，请务必修改为您的
        .client_id = deviceUUID,
        .event_handle = MqttCloudsCallBack, //设置回调函数
        .keepalive = 120,                   //心跳
        .disable_auto_reconnect = false,    //开启自动重连
        .disable_clean_session = false,     //开启 清除会话
    };
    client = esp_mqtt_client_init(&mqtt_cfg);
    esp_mqtt_client_start(client);

    vTaskDelete(NULL);
}

服务器下发的处理数据，送往消息队列处理：

    //服务器下发消息到本地成功接收回调
    case MQTT_EVENT_DATA:
    {
        printf("TOPIC=%.*s \r\n", event->topic_len, event->topic);
        printf("DATA=%.*s \r\n\r\n", event->data_len, event->data);
        //发送数据到队列
        struct __User_data *pTmper;
        sprintf(user_data.allData, "%s", event->data);
        pTmper = &user_data;
        user_data.dataLen = event->data_len;
        xQueueSend(ParseJSONQueueHandler, (void *)&pTmper, portMAX_DELAY);
        break;
    }

2.3 外设驱动

七彩灯WS2812B的驱动代码初始化：

/**
 * @description:  封装一层设置RGB灯效果
 * @param {uint16_t} Red 入参 红色
 * @param {uint16_t} Green 入参 绿色
 * @param {uint16_t} Blue 入参 蓝色
 * @return {*}
 */
void set_rgb(uint16_t Red, uint16_t Green, uint16_t Blue)
{
    for (int i = 0; i < 24; i++)
    {
        strip->set_pixel(strip, i, Red, Green, Blue);
    }
    red = Red;
    green = Green;
    blue = Blue;
    strip->refresh(strip, 10);
}

/**
 * @description: 初始化LED 
 * @param {*}
 * @return {*}
 */
void init_led()
{
    rmt_config_t config = RMT_DEFAULT_CONFIG_TX(4, RMT_TX_CHANNEL);
    // set counter clock to 40MHz
    config.clk_div = 2;

    ESP_ERROR_CHECK(rmt_config(&config));
    ESP_ERROR_CHECK(rmt_driver_install(config.channel, 0, 0));

    // install ws2812 driver
    led_strip_config_t strip_config = LED_STRIP_DEFAULT_CONFIG(24, (led_strip_dev_t)config.channel);
    strip = led_strip_new_rmt_ws2812(&strip_config);
    if (!strip)
    {
        ESP_LOGE(TAG, "install WS2812 driver failed");
    }
    // Clear LED strip (turn off all LEDs)
    ESP_ERROR_CHECK(strip->clear(strip, 100));
    set_rgb(0, 254, 0);
}

消息队列处理逻辑：

/*
 * @Description: 解析下发数据的队列逻辑处理
 * @param: null
 * @return: 
*/
void Task_ParseJSON(void *pvParameters)
{
    printf("[SY] Task_ParseJSON_Message creat ... \n");

    while (1)
    {
        struct __User_data *pMqttMsg;

        printf("Task_ParseJSON_Message xQueueReceive wait [%d] ... \n", esp_get_free_heap_size());
        xQueueReceive(ParseJSONQueueHandler, &pMqttMsg, portMAX_DELAY);

        printf("Task_ParseJSON_Message xQueueReceive get [%s] ... \n", pMqttMsg->allData);

        首先整体判断是否为一个json格式的数据
        cJSON *pJsonRoot = cJSON_Parse(pMqttMsg->allData);
        //如果是否json格式数据
        if (pJsonRoot == NULL)
        {
            printf("[SY] Task_ParseJSON_Message xQueueReceive not json ... \n");
            goto __cJSON_Delete;
        }

        cJSON *pJSON_Item_Red = cJSON_GetObjectItem(pJsonRoot, "red");
        cJSON *pJSON_Item_Green = cJSON_GetObjectItem(pJsonRoot, "green");
        cJSON *pJSON_Item_Blue = cJSON_GetObjectItem(pJsonRoot, "blue");

        set_rgb(pJSON_Item_Red->valueint, pJSON_Item_Green->valueint, pJSON_Item_Blue->valueint);

    __cJSON_Delete:
        cJSON_Delete(pJsonRoot);
    }
}

微信小程序核心代码

代码架构，UI主要采用第三方库：有 WeUI、Vant-UI库，其中的MQTT库采用开源的MQTT.JS库。

3.1 蓝牙搜索

 wx.onBluetoothDeviceFound(function (devices) {
      var isnotexist = true
      if (devices.deviceId) {
        if (devices.advertisData) {
          devices.advertisData = app.buf2hex(devices.advertisData)
        } else {
          devices.advertisData = ''
        }
        for (var i = 0; i < that.data.devicesList.length; i++) {
          if (devices.deviceId == that.data.devicesList[i].deviceId) {
            isnotexist = false
          }
        }
        if (isnotexist && devices[0].name === that.data.filterName ) {
          that.data.devicesList.push(devices[0])
        }
      }
      that.setData({
        devicesList: that.data.devicesList
      })
    })
  }

3.2 蓝牙服务发现

发现服务列表：wx.getBLEDeviceServices()

发现特征值列表：wx.getBLEDeviceCharacteristics()

发送设备，判断是否为蓝牙控制或wifi控制：

 SendTap: function (red, green, blue) {
    var that = this
    if (!this.data.isCheckOutControl) {
      if (this.data.connected) {
        var buffer = new ArrayBuffer(that.data.inputText.length)
        var dataView = new Uint8Array(buffer)
        dataView[0] = red; 
        dataView[1] = green; 
        dataView[2] = blue;
        wx.writeBLECharacteristicValue({
          deviceId: that.data.connectedDeviceId,
          serviceId: that.data.serviceId,
          characteristicId: "0000FF01-0000-1000-8000-00805F9B34FB",
          value: buffer,
          success: function (res) {
            console.log('发送成功')
          }, fail() {
            wx.showModal({
              title: '提示',
              content: '蓝牙已断开',
              showCancel: false,
              success: function (res) {
              }
            })
          }
        })
      } else {
        wx.showModal({
          title: '提示',
          content: '蓝牙已断开',
          showCancel: false,
          success: function (res) {
            that.setData({
              searching: false
            })
          }
        })
      }
    } else {
      //MQTT通讯发送
      if (this.data.client && this.data.client.connected) {
        this.data.client.publish('/esp32-c3/7cdfa1322e68/devSub', JSON.stringify({red,green,blue}));
      } else {
        wx.showToast({
          title: '请先连接服务器',
          icon: 'none',
          duration: 2000
        })
      }
    }
  },

四、感谢

为此，还开源了以下的代码仓库，共勉！！

开源项目	地址	开源时间
微信小程序连接mqtt服务器，控制esp8266智能硬件	https://github.com/xuhongv/WeChatMiniEsp8266	2018.11
微信公众号airkiss配网以及近场发现在esp8266 rtos3.1 的实现	https://github.com/xuhongv/xLibEsp8266Rtos3.1AirKiss	2019.3
微信公众号airkiss配网以及近场发现在esp32 esp-idf 的实现	https://github.com/xuhongv/xLibEsp32IdfAirKiss	2019.9
微信小程序控制esp8266实现七彩效果项目源码	https://github.com/xuhongv/WCMiniColorSetForEsp8266	2019.9
微信小程序蓝牙配网blufi实现在esp32源码	https://github.com/xuhongv/BlufiEsp32WeChat	2019.11
微信小程序蓝牙ble控制esp32七彩灯效果	https://blog.csdn.net/xh870189248/article/details/101849759	2019.10
可商用的事件分发的微信小程序mqtt断线重连框架	https://blog.csdn.net/xh870189248/article/details/88718302	2019.2
微信小程序以 websocket 连接阿里云IOT物联网平台mqtt服务器	https://blog.csdn.net/xh870189248/article/details/91490697	2019.6
微信公众号网页实现连接mqtt服务器	https://blog.csdn.net/xh870189248/article/details/100738444	2019.9
自主开发微信小程序接入腾讯物联开发平台，实现一键配网+控制	https://github.com/xuhongv/AiThinkerIoTMini	2020.9
云云对接方案天猫精灵小爱同学服务器+嵌入式Code开源	https://github.com/xuhongv/xClouds-php	2020.7

另外，感谢：

• 乐鑫物联网操作系统：https://github.com/espressif/esp-idf
• 腾讯WeUI框架：https://github.com/Tencent/weui-wxss
• 有赞Vant框架：https://vant-contrib.gitee.io/vant-weapp

---

    本文章的微信小程序源码免费获取：https://github.com/Ai-Thinker-Open/Ai-Thinker-Open-WechatMini-C3

另外，不要把我的博客作为学习标准，我的只是笔记，难有疏忽之处，如果有，请指出来，也欢迎留言哈！

• 玩转esp8266带你飞、加群QQ群，不喜的朋友勿喷勿加：434878850
• 个人邮箱：xuhongv@yeah.net 24小时在线，有发必回复！
• esp8266源代码学习汇总（持续更新，欢迎star）：https://github.com/xuhongv/StudyInEsp8266
• esp32源代码学习汇总（持续更新，欢迎star）：https://github.com/xuhongv/StudyInEsp32
• 关注下面微信公众号二维码，干货多多，第一时间推送！