微信小程序ble蓝牙控制esp32，实现无需网络也可以控制亮度；

立即下载用AI写一个

发布时间：2019-10-08

9人 | 浏览：5667次 | 收藏 |

技术：官网esp32 idf master分支 + 微信小程序

运行环境：官网esp32 idf master分支 + 微信小程序

概述

【包括硬件端代码+微信端代码】微信小程序ble蓝牙控制esp32，实现无需网络也可以控制亮度，实现控制到同步设备状态；

详细

![](/contentImages/image/20191002/7ewnmPtFKWgW0vwkw6C.png)

- 文章目录

[TOC]

# 一、前言；
---------------------------------------------------------

开始步入正题，国内目前对于 `esp32` 的学习开始研究  esp32 的蓝牙功能了，确实，国内的物联网不断地蓬勃发展，但是乐意奉献技术出视频抑或是专研前言技术并此分享出来的，很少；我在 腾讯课堂、极客学院、CSDN学院、电子发烧友学院和慕课网等教学网站，很少有物联网开发的实战视频，基本都是讲驱动开发、外设使用方法，大家听到最到的是 stm32 板子的 正点原子这样的优秀企业，的确，他们是专业做板子教学的。但是结合物联网远程控制，是较少的教程。

能为国内出些教程，我是心里感觉到舒服。因为我出博文，都基本带着工程分享出来，虽然有些是付费，但是确实写博文不容易，排版、自己ps画图，最少一个小时吧；最麻烦的是，整理代码封装，不过这个我挺舒服的，**优秀的程序员第一步就是代码规范，让自己看的舒服，让别人看得明白；**

---------------------------------------------------------
# 二、项目说明；
---------------------------------------------------------

## 2.1 技术要求
- esp32开发板一个，我这里采用的是乐鑫板子：
> 对应的原理图：https://dl.espressif.com/dl/schematics/esp32-lyrat-v4-schematic.pdf
- rgb灯板一个，我是自己画的，在嘉立创打板5块包邮哈哈！
- 微信小程序开发工具，熟悉微信小程序开发；
- 熟悉蓝牙ble通讯流程原理；

---------------------------------------------------------

## 2.2 板子连线
- 先分享我画的 RGB5050 板子的原理图，12v供电，五个mos管，pwm驱动接口结出：

![](/contentImages/image/20191002/YlHLNxMt7KdxVvNgLwy.png)

- 根据板子接线图，只能是 esp32的 `gpio5`、`gpio25` 和 `gpio26` 作为 pwm输出，接上面原理图的rgb端子；

![](/contentImages/image/20191002/gGc4uV7UqIVQRD7bRat.png)

## 2.3 通讯协议过程

---------------
#### 2.3.1 微信发送数据到esp32的格式协议
          esp32 作为 gatt 服务端，让 微信小程序主动连接，成功连接之后读取 服务列表，在某一个服务里面的特征值里面写入数据即可；

|字段|含义||
|---|---|--|
|byte[0]|red数值|红色亮度|
|byte[1]|green数值|绿色亮度|
|byte[2]|blue数值|蓝色亮度|

---------------
#### 2.3.2 esp32发送数据到微信的格式协议
          和上述表格一样；

---------------------------------------------------------
# 三、esp32代码；
---------------------------------------------------------

对于ble 蓝牙通讯的过程，大家一定要做好功课，这个在网上有很多教程了。

esp32 ble学习我们先从ble开始，单独看他的  `《gatt_server》`代码，起来再往某个通道发数据，可以看日志打印，就慢慢来，对，就这个步骤去学习；

关于修改蓝牙名字，文件都有宏定义，修改 `manufacturer`广播数据，修改结构体的内容就可以了；

---------------

### 3.1 esp32解析微信小程序发来的蓝牙数据

别的不说， 我主要说这个 `ESP_GATTS_WRITE_EVT` 事件回调：

```c
//微信端写入数据回调
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);
        ESP_LOGE(GATTS_TAG, "param->write.value[0] %d", param->write.value[0]);//就是我们的 red
        ESP_LOGE(GATTS_TAG, "param->write.value[1] %d", param->write.value[1]);//就是我们的 green
        ESP_LOGE(GATTS_TAG, "param->write.value[2] %d", param->write.value[2]);//就是我们的 blue
        rgb_set_pwm(param->write.value[0],param->write.value[1],param->write.value[2]);
    }
 example_write_event_env(gatts_if, &a_prepare_write_env, param);
break;
```

---------------
### 3.2 esp32主动发送数据到微信小程序

设备主动发送数据到微信端，走的是 特征的 **通知**特性。像下面这样，表示发送 十六进制数组 **data** 过去；

```c
uint8_t data[3] = {pwmRGB[0], pwmRGB[1], pwmRGB[2]};
//主动通知客户端
esp_ble_gatts_send_indicate(gatts_if, param->read.conn_id, param->read.handle, 3, data, false); 
```

---------------------------------------------------------
# 四、微信小程序端代码；
---------------------------------------------------------

微信小程序早已经支持 ble 发送和接收了，我上个月在公司做了2个微信小程序ble项目，对这个在微信小程序或支付宝小程序使用ble控制蓝牙设备**非常熟悉**，所以，我用了一天时间，封装了微信小程序的蓝牙连接到控制，以及异常监控等操作成为一个库，我命名为 `XBle`，后面我会详细出博文介绍我封装的这个蓝牙库，大家先用着先哈！

**【第一步】**搜索附近的蓝牙设备：

```JavaScript

//初始化微信蓝牙，后面我会做支付宝小程序适配
  wxBleImplement.initXBLE(); 
  
  //监听全部蓝牙事件，第一个是增加监听回调函数，如果是 false则表示移除这个回调函数
  xBle.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent); 
```

**【第二步】** 在 回调函数的形参中，有 **(type, data, deviceId, serviceId)**，其中 **type**是最为重要的，其他是数据相关；

下面罗列全部 `type` 事件的含义，是不是很详细：

```c
let TYPE_XBLE = {
    FAIL_INIT: 0, //初始化ble失败
    FAIL_DISCOVERY: 1, //搜索设备失败
    FAIL_CONNECTTING: 2, //连接设备失败
    FAIL_DIS_CONNECTTED: 3, //中途断开设备
    FAIL_READ_SERVICEID: 4, //读取设备失败serviceId
    FAIL_READ_CHARAID: 5, //读取设备特征值失败
    FAIL_NOTIFY_CHARAID: 6, //通知连接设备特征值改变失败
    FAIL_SEND_DATA_CHARAID: 7, //发送数据到连接设备失败
    FAIL_LISTENER_DATA_CHARAID: 8, //监听指定特征值数据失败
    FAIL_STOP_DISCOVERY: 9, //停止搜索失败
    FAIL_DEVICE_USER_DISCONNECT: 10, //用户断开指定设备成功

OK_DISCOVERY_START: 20, //搜索设备成功开始
    OK_DISCOVERY_RESULT: 21, //搜索设备成功回调
    OK_DISCOVERY_STOP: 22, //搜索设备成功结束
    OK_DEVICE_CONNECTED: 23, //设备成功连接
    OK_DEVICE_USER_DISCONNECT: 24, //用户断开指定设备成功
    OK_READ_SERVICEID: 25, //读取设备成功serviceId
    OK_READ_CHARAID: 26, //读取设备成功CHARAID

OK_DISCOVERY_OVER: 50, //搜索设备成功回调
 OK_DEVICE_NEW_DATA: 51, //设备成功返回数据
 OK_SEND_DATA_CHARAID: 52, //发送数据到连接设备失败
};
```
         **【第三步】**连接设备调用，`true` 表示连接，`false`表示断开，入参设备发现列表中的设备 **deviceId** ：

```cpp
 xBle.notifyConnectEvent(true, deviceId)
```

**【第四步】**获取设备的服务列表：

```cpp
    //获取服务列表
    xBle.notifyReadServiceIdEvent(options.deviceId);
```

**【第五步】** 获取到的服务列表后，又从该服务中获取特征值：

```c
 //监听这个特征（表示主要esp32往这个通道发消息，就会被监听到）
xBle.notifyTheDeviceCharacteristicEvent(deviceId, serviceId,characteristicsId);

//读取这个特征值，同步状态
 xBle.notifyReadDeviceCharacteristicEvent(deviceId,serviceId, characteristicsId)

```
         **【第六步】** 拿到特征值，就可以通讯了啦！比如发送 `0x01 0x01 0x01` , 注意入参都是从上面获取的参数，缺一不可！剩余的发送点击事件什么的，请仔细看我的代码即可！

```c
    var ab = new ArrayBuffer(1)
    var u8array = new Uint8Array(ab);
    u8array[0] = 0x01;
    u8array[1] = 0x01;
    u8array[2] = 0x01;
    xBle.notifyWriteDeviceEvent(_this.data.deviceId, serviceId, characteristicsId, ab);
  
```

**【第七步】** 设备端发送的数据可以通过这个回调获取，别忘了ArrayBuffer转16进制字符串；

```cpp
        let rgb = this.ab2hex(data.value);
        console.log('数据回调data', rgb )
        //同步ui
        this.setData({ 
          lightValueBlue: Number('0x' + rgb[2]),
          lightValueGreen: Number('0x' + rgb[1]),
          lightValueRed: Number('0x' + rgb[0]),
        })
```

---------------------------------------------------------
# 五、其他；
---------------------------------------------------------

- 先上个项目截图，因为这里没法传演示视频。
- 本工程的所有源代码，微信小程序代码 + esp32代码，都可以在我创建的QQ群获取；

![](/contentImages/image/20191002/gGc4uV7UqIVQRD7bRat.png)

---------------------------

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

微信小程序ble蓝牙控制esp32，实现无需网络也可以控制亮度；

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子