本文链接： https://blog.csdn.net/xh870189248/article/details/101849759

【微信小程序控制硬件第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，实现无需网络也可以控制亮度开关。

2.1 技术要求
2.2 板子连线
2.3 通讯协议过程

2.3.1 微信发送数据到esp32的格式协议
2.3.2 esp32发送数据到微信的格式协议

三、esp32代码；

3.1 esp32解析微信小程序发来的蓝牙数据
3.2 esp32主动发送数据到微信小程序

四、微信小程序端代码；
五、其他；

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

一、前言；

今天是国庆节，是我们伟大祖国的70周年华诞，朋友圈刷满了祝福语，今天中午在dou音看到了好多的天安门广场的阅兵视频，看的热血沸腾、热泪盈眶，此生不悔入华夏，来世还做中国人！！！

前天，乐鑫某在职技术人员加进了QQ群，我很欣慰，目前乐鑫正在大量招人，无论是出身，只要足够优秀，都可以入职， 大家看到这个博文，可以私聊我，内推进去！我肯定是跳槽不了去乐鑫的，因为和公司有合同，而且上海在我看来真的好远（广东人认为广东省以外都是北方，哈哈），等乐鑫在“中国硅谷” 乐鑫创立办事点，我再考虑去尝试下。

说了这么多，开始步入正题，国内目前对于 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驱动接口结出：
根据板子接线图，只能是 esp32的 gpio5、gpio25 和 gpio26 作为 pwm输出，接上面原理图的rgb端子；

Banner

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 事件回调：

//微信端写入数据回调
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 过去；

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，后面我会详细出博文介绍我封装的这个蓝牙库，大家先用着先哈！

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


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

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

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

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 ：

 xBle.notifyConnectEvent(true, deviceId)

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

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

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

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

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

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

    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进制字符串；

        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端代码付费获取，我已经放在咸鱼了啦！只求真诚交易！

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

玩转esp8266带你飞、加群付费QQ群，不喜的朋友勿喷勿加：434878850
esp8266源代码学习汇总（持续更新，欢迎star）：https://github.com/xuhongv/StudyInEsp8266
esp32源代码学习汇总（持续更新，欢迎star）：https://github.com/xuhongv/StudyInEsp32
关注下面微信公众号二维码，干货多多，第一时间推送！

【微信小程序控制硬件⑦ 进阶篇】全网首发，微信小程序ble蓝牙控制esp32，实现无需网络也可以控制亮度开关。