:::success

文章信息

🧢 作者:刘lyxAndy

🎒 写作日期:2024-05-01

🌎 联系方式:QQ 3449556207

:::

:::danger 🚩注意 本小技巧仅适用于H5端。

:::

:::warning ⚠️警告 如果你为Linux用户且使用Chromium内核浏览器,需手动开启flag:chrome://flags/#enable-experimental-web-platform-features

:::

:::info 🧪浏览器兼容性

Chrome:

  • Windows: 浏览器版本需高于70.0.3526.0,推荐高于124
  • Mac: 浏览器版本推荐高于124
  • Linux: 浏览器版本推荐高于125
  • Android: 浏览器版本需高于124

Edge:

  • Windows: 浏览器版本需高于79,推荐高于124
  • Mac: 浏览器版本推荐高于124
  • Linux: 浏览器版本推荐高于124
  • Android: 浏览器版本需高于124

Safari:

  • All: 不支持

Firefox:

  • All: 不支持

Opera:

  • Windows: 浏览器版本需高于43,推荐高于109
  • Mac: 浏览器版本推荐高于109
  • Linux: 浏览器版本推荐高于109
  • Android(Opera Mobile): 浏览器版本需高于80
  • Android(Opera Mini): 不支持

IE:

  • All: 不支持
详见“Bluetooth” | Can I use… Support tables for HTML5, CSS3, etc ::: :::info ⚗️系统兼容性 + Android: 高于Android 6.0 + Mac: 高于OS X Yosemite - 一些MacBooks不支持,请检查”About this Mac” / “System Report” / “Bluetooth”的兼容性 + Linux: 需要Kernel 3.19+ 和 BlueZ 5.41+。详见这里 - 注意如果BlueZ低于5.43,Bluetooth守护进程就需要在实验条件下运行:<font style="color:#117CEE;">sudo /usr/sbin/bluetoothd -E</font> + Windows: 高于Windows 10 version 1706

:::

背景

2022年暑假,我使用APP Inventor搭建了一个使用microbit的智能体温计软件。今年4月,我在CoCo群中发布了Web Bluetooth控件。从那时起,我便想起来使用CoCo复刻这个智能体温计。经过多方查找资料,终于达成了目标。

准备

  • microbit(无所谓V1与V2,支持蓝牙即可)
  • Web Bluetooth 控件.js
  • 符合「系统兼容性」的电脑
  • 符合「浏览器兼容性」的浏览器

microbit程序设计

访问Microsoft MakeCode for micro:bit,你会看到这个界面:

使用蓝牙连接micro:bit - 图1

点击使用蓝牙连接micro:bit - 图2积木盒,搜索bluetooth并安装搜索结果的第一个。

使用蓝牙连接micro:bit - 图3使用蓝牙连接micro:bit - 图4

接下来,让microbit在开始运行时显示一个表情,在连接蓝牙时显示对勾,断开时显示叉。

使用蓝牙连接micro:bit - 图5

然后根据你的需要,在“当开机时”中增加对应的蓝牙服务(这里以温度服务为例)。 随后调整项目设定,启用“无需配对:任何人都可以通过蓝牙连接。”,最后保存并烧录到microbit中。

  1. ![](https://cdn.nlark.com/yuque/0/2024/png/22844112/1714536734703-702498f9-fa45-4e04-b23a-a0e371899e6f.png)![](https://cdn.nlark.com/yuque/0/2024/png/22844112/1714537290962-acf4ad34-eb52-49f6-b8b6-a39a12bb90c1.png)

获取服务与特征UUID

:::color2 🚊捷径 看看后记

:::

要连接对应的蓝牙服务与特征,需要我们找到相应的UUID。右键拖入的服务块(本例中为使用蓝牙连接micro:bit - 图6),点击“帮助”,随后点击使用蓝牙连接micro:bit - 图7打开独立窗口。

在打开的独立窗口中下滑,找到“Advanced”章节,点击其中的超链接(一般名为Lancaster University micro:bit runtime technical documentation),会打开新的页面。

本例中为此图片

下滑,找到“In bluetooth.BleAdapterService”章节,你会看到若干行代码(本例中为这样):

  1. public static String TEMPERATURESERVICE_SERVICE_UUID = "E95D6100251D470AA062FA1922DFA9A8";
  2. public static String TEMPERATURE_CHARACTERISTIC_UUID = "E95D9250251D470AA062FA1922DFA9A8";

其中,以SERVICE_UUID结尾的变量的值就是服务UUID,以CHARACTERISTIC_UUID结尾的变量的值就是特征UUID。请将这些值改写成以下形式,转为小写备用:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

CoCo程序设计

导入Web Bluetooth控件并添加到屏幕中。首先添加一个按钮,在按下后检测是否支持蓝牙。

使用蓝牙连接micro:bit - 图9

如果启用了蓝牙,即可请求连接设备。

使用蓝牙连接micro:bit - 图10

  1. {
  2. "filters":[
  3. {
  4. "namePrefix": "BBC" // 确保仅有microbit设备会被扫描
  5. }
  6. ],
  7. "optionalServices": [
  8. "e95d6100-251d-470a-a062-fa1922dfa9a8" // 填入获取到的服务UUID(这里以温度服务为例)
  9. ]
  10. }
  1. 随后进行错误处理。在请求设备完成后连接GATT服务,同样做好错误处理。

使用蓝牙连接micro:bit - 图11

连接好GATT后获取服务,UUID填写获取到的服务UUID。服务连接成功后获取特征,UUID填写获取到的特征UUID。

使用蓝牙连接micro:bit - 图12

获取特征后即可读取已有特征值。注意这里使用带Raw标记的读取,以防止被转换为字符串。

做好错误处理后即大功告成。

完整代码

MicroBit温度计 with CoCo.zip

实机演示

此处为语雀卡片,点击链接查看

后记

服务速查表

请将这些值改写成以下形式,转为小写使用:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

服务UUID 特征UUID
加速计服务 <font style="color:rgb(223, 80, 0);">E95D0753251D470AA062FA1922DFA9A8</font> ACCELEROMETERDATA:<font style="color:rgb(223, 80, 0);">E95DCA4B251D470AA062FA1922DFA9A8</font>
ACCELEROMETERPERIOD:<font style="color:rgb(223, 80, 0);">E95DFB24251D470AA062FA1922DFA9A8</font>
按钮服务 <font style="color:rgb(223, 80, 0);">E95D9882251D470AA062FA1922DFA9A8</font> BUTTON1STATE:<font style="color:rgb(223, 80, 0);">E95DDA90251D470AA062FA1922DFA9A8</font>
BUTTON2STATE:<font style="color:rgb(223, 80, 0);">E95DDA91251D470AA062FA1922DFA9A8</font>
io引脚服务 <font style="color:rgb(223, 80, 0);">E95D127B251D470AA062FA1922DFA9A8</font> PINDATA:<font style="color:rgb(223, 80, 0);">E95D8D00251D470AA062FA1922DFA9A8</font>
PINADCONFIGURATION:<font style="color:rgb(223, 80, 0);">E95D5899251D470AA062FA1922DFA9A8</font>
PINIOCONFIGURATION:<font style="color:rgb(223, 80, 0);">E95DB9FE251D470AA062FA1922DFA9A8</font>
led服务 <font style="color:rgb(223, 80, 0);">E95DD91D251D470AA062FA1922DFA9A8</font> LEDMATRIXSTATE:<font style="color:rgb(223, 80, 0);">E95D7B77251D470AA062FA1922DFA9A8</font>
LEDTEXT:<font style="color:rgb(223, 80, 0);">E95D93EE251D470AA062FA1922DFA9A8</font>
SCROLLINGDELAY:<font style="color:rgb(223, 80, 0);">E95D0D2D251D470AA062FA1922DFA9A8</font>
温度服务 <font style="color:rgb(223, 80, 0);">E95D6100251D470AA062FA1922DFA9A8</font> <font style="color:rgb(223, 80, 0);">E95D9250251D470AA062FA1922DFA9A8</font>
磁力计服务 <font style="color:rgb(223, 80, 0);">E95DF2D8251D470AA062FA1922DFA9A8</font> MAGNETOMETERDATA:<font style="color:rgb(223, 80, 0);">E95DFB11251D470AA062FA1922DFA9A8</font>
MAGNETOMETERPERIOD:<font style="color:rgb(223, 80, 0);">E95D386C251D470AA062FA1922DFA9A8</font>
MAGNETOMETERBEARING:<font style="color:rgb(223, 80, 0);">E95D9715251D470AA062FA1922DFA9A8</font>
串口服务 <font style="color:rgb(223, 80, 0);">6E400001B5A3F393E0A9E50E24DCCA9E</font> UART_RX:<font style="color:rgb(223, 80, 0);">6E400002B5A3F393E0A9E50E24DCCA9E</font>
UART_TX:<font style="color:rgb(223, 80, 0);">6E400003B5A3F393E0A9E50E24DCCA9E</font>