【微信小程序控制硬件第11篇-项目篇】全网首发，微信小程序ble蓝牙控制esp32，实现无需网络也能够控制亮度开关。

时间 2020-07-22 标签微信程序控制硬件项目全网首发程序 ble 蓝牙控制 esp32 esp 实现无需网络能够亮度开关

【微信小程序控制硬件第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篇 】安信可B站直播学习总结，微信小程序MQTT远程控制ESP8266 NodeMCU，谈谈微信生态那些事。git

文章目录

3、esp32代码；

另外，不要把个人博客做为学习标准，个人只是笔记，难有疏忽之处，若是有，请指出来，也欢迎留言哈！

1、前言；

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

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

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

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

2、项目说明；

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端子；

2.3 通信协议过程

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

esp32 做为 gatt 服务端，让微信小程序主动链接，成功链接以后读取服务列表，在某一个服务里面的特征值里面写入数据便可；微信小程序

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

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

和上述表格同样；数组

3、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);

4、微信小程序端代码；

微信小程序早已经支持 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]),
        })

5、其余；

先上个项目截图，由于这里无法传演示视频，演示视频在微信公众号能够看到；

本博文的源码：微信端+esp32端代码付费获取，我已经放在咸鱼了啦！只求真诚交易！

另外，不要把个人博客做为学习标准，个人只是笔记，难有疏忽之处，若是有，请指出来，也欢迎留言哈！

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

【微信小程序控制硬件 第11篇-项目篇】全网首发，微信小程序ble蓝牙控制esp32，实现无需网络也能够控制亮度开关。