:::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: 不支持
<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,你会看到这个界面:
点击积木盒,搜索
bluetooth
并安装搜索结果的第一个。
接下来,让microbit在开始运行时显示一个表情,在连接蓝牙时显示对勾,断开时显示叉。
然后根据你的需要,在“当开机时”中增加对应的蓝牙服务(这里以温度服务为例)。 随后调整项目设定,启用“无需配对:任何人都可以通过蓝牙连接。”,最后保存并烧录到microbit中。

获取服务与特征UUID
:::color2 🚊捷径 看看后记
:::
要连接对应的蓝牙服务与特征,需要我们找到相应的UUID。右键拖入的服务块(本例中为),点击“帮助”,随后点击
打开独立窗口。
在打开的独立窗口中下滑,找到“Advanced”章节,点击其中的超链接(一般名为Lancaster University micro:bit runtime technical documentation
),会打开新的页面。
下滑,找到“In bluetooth.BleAdapterService”章节,你会看到若干行代码(本例中为这样):
public static String TEMPERATURESERVICE_SERVICE_UUID = "E95D6100251D470AA062FA1922DFA9A8";
public static String TEMPERATURE_CHARACTERISTIC_UUID = "E95D9250251D470AA062FA1922DFA9A8";
其中,以SERVICE_UUID
结尾的变量的值就是服务UUID,以CHARACTERISTIC_UUID
结尾的变量的值就是特征UUID。请将这些值改写成以下形式,转为小写备用:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
CoCo程序设计
导入Web Bluetooth控件并添加到屏幕中。首先添加一个按钮,在按下后检测是否支持蓝牙。
如果启用了蓝牙,即可请求连接设备。
{
"filters":[
{
"namePrefix": "BBC" // 确保仅有microbit设备会被扫描
}
],
"optionalServices": [
"e95d6100-251d-470a-a062-fa1922dfa9a8" // 填入获取到的服务UUID(这里以温度服务为例)
]
}
随后进行错误处理。在请求设备完成后连接GATT服务,同样做好错误处理。
连接好GATT后获取服务,UUID填写获取到的服务UUID。服务连接成功后获取特征,UUID填写获取到的特征UUID。
获取特征后即可读取已有特征值。注意这里使用带Raw标记的读取,以防止被转换为字符串。
做好错误处理后即大功告成。
完整代码
实机演示
后记
服务速查表
请将这些值改写成以下形式,转为小写使用: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> |