电子工程师技术服务社区
公告
登录
|
注册
首页
技术问答
厂商活动
正点原子
板卡试用
资源库
下载
文章
社区首页
文章
R-Plan 手把手教你开发BLE微信小程序
分 享
扫描二维码分享
R-Plan 手把手教你开发BLE微信小程序
R-PLAN
BLE
微信小程序
Rice嵌入式开发
关注
发布时间: 2020-10-23
丨
阅读: 1178
## 背景 - 最近在测试BLE模块,本来想用别家的产品来测试我的BLE模块,经过一番询问,别家的BLE的MASTER模式只能配对自家的SLAVE模式。也就是说他不能配对我的BLE模块,这就让我郁闷了。绝望。 - 手机的BLE调试助手又不能自动化测试,需要手动调试。太麻烦。 - 之前我也写过一篇文章[《Android BLE 开发》--初学者](https://mp.weixin.qq.com/s/NyvGbtsul3atKfDqmi_aGg),这个安卓原生APP,对于一个没有任何安卓基础的我,花了3天的时间干了这个四不像的BLE安卓调试工具。原生的APP搭建环境就非常痛苦了,更何况开发。想要再次开发,想想还是算了。 - 所以想了想,最容易,也是最方便的还是微信小程序。微信小程序提供的丰富的API,所以开发起来还是比较方便的。在微信小程序中对应的知识点:JavaScript + WXSS + WXML。 - 现学现卖,0基础,干了3天,开发了一个微信小程序。这个小程序支持功能: - 自动化测试,和正常模式(跟BLE调试助手一样) - 可以显示所有的测试报告(时间,测试结果等) ![](https://rice_chen_1.gitee.io/picture/ble_mini_program/1.jpg) - 我对小程序没有基础,临时抱佛脚,欢迎来喷。嘻嘻嘻 - 这个小程序将纳入我的R-Plan开源项目。github链接:https://github.com/RiceChen/R_Plan.git。功能会不断完善。 ## 准备工作 1. 需要注册微信小程序开发账号 2. 下载微信开发者工具 3. 了解小程序相关知识-[官方文档](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html) ![](https://rice_chen_1.gitee.io/picture/ble_mini_program/2.png) ## 开始编写程序(万事俱备只欠东风) 1. 创建工程(微信开发者工具使用详情,可以通过官方文档查看,这里就不详细说明) ![](https://rice_chen_1.gitee.io/picture/ble_mini_program/3.png) 2. 文件说明:我的这个小程序主要为3个主要文件。index.js, index.wxml,index.wxss。 ![](https://rice_chen_1.gitee.io/picture/ble_mini_program/4.png) 3. index.wxml 代码说明: - 放置logo: ![](https://cf01.ickimg.com/bbsimages/202010/340ee6d9a734ac5fb46e2a6167df95f8.png) - 扫描相关组件: ![](https://cf01.ickimg.com/bbsimages/202010/eee7c3d2242a319652cc011b666a90c6.png) - 扫描结果列表组件: ![](https://cf01.ickimg.com/bbsimages/202010/26242cefc89d3c0b1380ce59da586972.png) - 连接设备后的窗体,这个需要连接成功才会显示, 并且获取到可写特征值是,才会显示写数据按钮: ![](https://cf01.ickimg.com/bbsimages/202010/37bc2f23a3d073f8caf1885ed2efed13.png) ![](https://cf01.ickimg.com/bbsimages/202010/07fc272f8bec63e4ddefacf69f7e0ca2.png) - 调试信息打印: ![](https://cf01.ickimg.com/bbsimages/202010/3b86a8894377363865e289b99e82fb3e.png) 4. index.wxss 代码说明: - 这个文件主要是界面的布局设置,关于这方面,建议学习学习CSS。这里我就不描述了。其实我也不熟悉。 5. index.js 代码说明: - 讲解代码之前我们来说说连接BLE设备流程,这个是我理解的流程。 ![](https://rice_chen_1.gitee.io/picture/ble_mini_program/5.png) - 微信官方文档对BLE的相关的API有相应的说明。 ![](https://rice_chen_1.gitee.io/picture/ble_mini_program/6.png) - 打开蓝牙适配,初始化蓝牙设备,在每次进行初始化时会将所有状态清空,如果设配器已打开,见进入设备查找流程。 ![](https://cf01.ickimg.com/bbsimages/202010/f435681489ffcdac9b5fd1b8f781ad4c.png) ![](https://cf01.ickimg.com/bbsimages/202010/89d450fd1bbd5406f0fa0695a6235bbe.png) - 开始搜寻附近的蓝牙外围设备。 ![](https://cf01.ickimg.com/bbsimages/202010/c18557a470b7189309829dbbfbf8d1f0.png) - 停止搜寻附近的蓝牙外围设备。 ![](https://cf01.ickimg.com/bbsimages/202010/56ae6d38b82bd33c46ee294fa1d39025.png) - 监听寻找到新设备的事件,这里会将所有搜索到的设备显示在列表组件中。 ![](https://cf01.ickimg.com/bbsimages/202010/69e87f4e61dfd000dc4b5571fe4db849.png) - 在上面的代码是搜索设备的的相关处理函数,接下来分析一下连接设备,以及通信的代码 - 创建连接,如果连接成功,则获取对应设备的所有服务。 ![](https://cf01.ickimg.com/bbsimages/202010/78bcd950f4f7dd1eda00bcae441cd429.png) - 获取对应设备的服务, 获取成功,则进行获取某个服务中的特征值。 ![](https://cf01.ickimg.com/bbsimages/202010/66ed31fa7e8cab60da5695f405824fbf.png) - 遍历服务中的特征值,特征包括:read,write,notify。 ![](https://cf01.ickimg.com/bbsimages/202010/3f85cb132af9ed7958a01a3f361b7b86.png) ![](https://cf01.ickimg.com/bbsimages/202010/124fc008a507d67fbf2d25193aa7e9be.png) - 我写的这个demo只介绍发送数据。并且只有只有可写特征的设备才有写数据按钮。发送数据代码。 ![](https://cf01.ickimg.com/bbsimages/202010/f23f938c14e1632920775b3114c9a4bc.png) ![](https://cf01.ickimg.com/bbsimages/202010/923b94d10f855ccedb61ae50c3488d92.png) - 在消息提示框中打印信息。其实这里是对shouToast的封装 ![](https://cf01.ickimg.com/bbsimages/202010/326b184b89995f3a01a626201addf4b2.png) ``` - 打印log时,增加时间戳。 ![](https://cf01.ickimg.com/bbsimages/202010/9b0e074803e225e6bfd9e34bf41f1074.png) ![](https://cf01.ickimg.com/bbsimages/202010/2bc641d78b1eebc7a64dfda5be6fd606.png) ## 效果: 1. 小程序的最终效果,通过发送数据: ![](https://rice_chen_1.gitee.io/picture/ble_mini_program/7.jpg) 2. 设备端的接收到数据打印的log: ![](https://rice_chen_1.gitee.io/picture/ble_mini_program/8.png) ## 注明: - 上面的代码介绍是BLE基础功能的介绍,对于我的BLE 自动化测试部分的代码没有介绍,因为跟项目相关。不方便,如果有兴趣,欢迎私聊。
关注微信公众号『Rice嵌入式开发技术分享』,后台回复“微信”添加作者微信,备注”入群“,便可邀请进入技术交流群。 ![](https://rice_chen_1.gitee.io/picture/logo/logo_.jpg)
原创作品,未经权利人授权禁止转载。详情见
转载须知
。
举报文章
点赞
(
0
)
Rice嵌入式开发
关注
评论
(0)
登录后可评论,请
登录
或
注册
相关文章推荐
MK-米客方德推出工业级存储卡
Beetle ESP32 C3 蓝牙数据收发
Beetle ESP32 C3 wifi联网获取实时天气信息
开箱测评Beetle ESP32-C3 (RISC-V芯片)模块
正点原子数控电源DP100测评
DP100试用评测-----开箱+初体验
Beetle ESP32 C3环境搭建
【花雕体验】16 使用Beetle ESP32 C3控制8X32位WS2812硬屏之二
X
你的打赏是对原创作者最大的认可
请选择打赏IC币的数量,一经提交无法退回 !
100IC币
500IC币
1000IC币
自定义
IC币
确定
X
提交成功 ! 谢谢您的支持
返回
我要举报该内容理由
×
广告及垃圾信息
抄袭或未经授权
其它举报理由
请输入您举报的理由(50字以内)
取消
提交