HTML5转APP后无法直接调用蓝牙,需依赖Capacitor/Cordova等容器封装;Capacitor需社区插件及原生权限配置,Cordova需替换WebView引擎;微信小程序等平台蓝牙受限于厂商认证与白名单;跨平台稳定使用必须由原生模块实现核心逻辑。
HTML5 转 APP 后不能直接调用蓝牙设备,除非底层容器(如 Capacitor、Cordova 或原生 WebView)提供了蓝牙 API 封装。纯 Web 环境(包括 WebView)受浏览器安全策略限制,navigator.bluetooth 仅在 Chrome for Android/iOS(需 HTTPS + 安全上下文)部分支持,且转成 APP 后多数打包方案默认禁用或未桥接该能力。
Capacitor 项目中调用蓝牙(Android/iOS)
Capacitor 本身不内置蓝牙插件,需依赖社区插件(如 @capacitor-community/bluetooth-le),它通过原生模块桥接 Web 层:
- Android 需在
android/app/src/main/AndroidManifest.xml中添加权限:和(Android 12+ 还需BLUETOOTH_CONNECT和BLUETOOTH_SCAN) - iOS 需在
ios/App/App/info.plist中添加NSBluetoothAlwaysUsageDescription描述键 - 调用前必须先执行
await BluetoothLe.initialize(),否则scan()会静默失败 -
scan()返回的是原始广告包(advertisement字段为ArrayBuffer),解析服务 UUID 需手动处理字节(如检查0x02/0x03类型字段)
Cordova 项目启用 navigator.bluetooth
Cordova 默认 WebView 不支持 navigator.bluetooth,但可通过替换 WebView 引擎实现(仅限 Android):
- 使用
cordova-plugin-ionic-webview并升级到 Chromium 内核(v5+),再配合cordova-plugin-androidx和cordova-plugin-androidx-adapter解决兼容问题 - 必须确保页面运行在 HTTPS 或
localhost(APP 内可配file://+Content-Security-Policy白名单,但 Chrome for Android 仍可能拒绝) - 调用
navigator.bluetooth.requestDevice({ acceptAllDevices: true })前,需确认设备已开启蓝牙且处于可被发现状态;iOS 上该 API 完全不可用 - 连接成功后,
GATT操作(如getPrimaryService())容易因设备响应延迟抛出NetworkError,建议加try/catch并重试 1–2 次
微信小程序/快应用等“类 HTML5”平台的蓝牙限制
这类平台虽用类似 HTML/CSS/JS 开发,但运行环境非标准 WebView,其蓝牙能力由平台 SDK 严格管控: