原创

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://xuhong.blog.csdn.net/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,实现无需网络也可以控制亮度开关。



在这里插入图片描述

一、前言;


         今天是国庆节,是我们伟大祖国的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的 gpio5gpio25gpio26 作为 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
  • 关注下面微信公众号二维码,干货多多,第一时间推送!
文章最后发布于: 2019-10-01 20:25:48
展开阅读全文
0 个人打赏
私信求帮助

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 程序猿惹谁了 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览