Ionic Android应用无法列出已连接BLE设备求助

我正在开发一款运行于Android平台的Ionic原型应用，需求是查看通过低功耗蓝牙（BLE）连接的设备列表。我使用的硬件为已通过Bluetooth v4.1/BLE与手机连接的Ticwatch E智能手表，但运行应用时显示无已连接的BLE设备。我是TypeScript和JavaScript新手，可能存在代码错误，恳请各位帮忙解决问题。

我的代码如下：

import { Component } from "@angular/core";
import { NavController } from "ionic-angular";
import { BluetoothLE, DeviceInfo } from "@ionic-native/bluetooth-le";
import { Platform } from "ionic-angular";
import { Toast } from "@ionic-native/toast";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  foundDevices = [];
  constructor(public navCtrl: NavController, public bluetoothle: BluetoothLE, public plt: Platform, private toast: Toast ) {
    let connectedObj: DeviceInfo[] = [];
    this.plt.ready().then((readySource) => {
      bluetoothle.requestPermission().then(dataTemp => {
        console.log('Platform ready from', readySource);
        this.toast.show("Platform ready from", '5000', 'center').subscribe(
          toast => {
            console.log(toast);
          }
        );
        this.bluetoothle.initialize().then(ble => {
          console.log('ble', ble.status) // logs 'enabled'
          this.toast.show(ble.status, '15000', 'center').subscribe(
            toast => {
              console.log(toast);
            });
          this.bluetoothle.retrieveConnected().then(connectedObj => {
            this.toast.show("Length: " + connectedObj.devices.length, '25000', 'center').subscribe(
              toast => {
                console.log(toast);
              });
          });
        });
      });
    });
  }
}

嘿，我来帮你排查一下问题！作为Ionic BLE开发的过来人，我看到你代码里有几个容易踩的坑，咱们一步步来修正：

1. 变量作用域与数据绑定问题 #

你在constructor里声明了let connectedObj: DeviceInfo[] = [];，但后面在retrieveConnected()的回调里又用了同名变量——这会导致你拿到的设备列表根本没赋值给组件的foundDevices数组，UI自然看不到数据。而且你的foundDevices没有明确类型，建议声明为DeviceInfo[]并初始化。

2. 缺失错误处理 #

所有Promise都没加catch块，这会让你完全看不到哪里出错了（比如权限被拒、BLE初始化失败），调试起来特别头疼。

3. BLE初始化与权限的细节 #

initialize()方法最好传入配置选项，确保请求启用蓝牙，同时监听状态变化；另外权限请求后要判断是否真的拿到了权限，再继续后续操作。

4. Android 12+权限配置 #

Android 12及以上版本需要额外的BLE权限，你得在AndroidManifest.xml里添加这些权限，否则应用无法访问蓝牙设备。

修改后的完整代码 #

import { Component } from "@angular/core";
import { NavController } from "ionic-angular";
import { BluetoothLE, DeviceInfo, InitializeOptions } from "@ionic-native/bluetooth-le";
import { Platform } from "ionic-angular";
import { Toast } from "@ionic-native/toast";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  // 明确类型并初始化数组
  foundDevices: DeviceInfo[] = [];

  constructor(
    public navCtrl: NavController, 
    public bluetoothle: BluetoothLE, 
    public plt: Platform, 
    private toast: Toast 
  ) {
    this.plt.ready().then((readySource) => {
      console.log('Platform ready from', readySource);
      this.showToast(`Platform ready from ${readySource}`);

      // 先请求蓝牙权限
      this.bluetoothle.requestPermission()
        .then(permissionStatus => {
          if (permissionStatus.hasPermission) {
            this.showToast("蓝牙权限已获取");
            this.initializeBLE();
          } else {
            this.showToast("蓝牙权限被拒绝，无法继续");
          }
        })
        .catch(error => {
          this.showToast(`请求权限出错: ${JSON.stringify(error)}`);
          console.error('Permission error:', error);
        });
    });
  }

  private initializeBLE(): void {
    const initOptions: InitializeOptions = {
      request: true, // 自动请求启用蓝牙
      statusReceiver: true // 监听蓝牙状态变化
    };

    this.bluetoothle.initialize(initOptions)
      .subscribe(bleStatus => {
        console.log('BLE初始化状态:', bleStatus);
        if (bleStatus.status === 'enabled') {
          this.showToast("蓝牙已启用");
          this.getConnectedDevices();
        } else {
          this.showToast("蓝牙未启用，请打开蓝牙");
        }
      }, error => {
        this.showToast(`BLE初始化出错: ${JSON.stringify(error)}`);
        console.error('Initialize error:', error);
      });
  }

  private getConnectedDevices(): void {
    // 可选：添加Ticwatch的服务UUID（比如心率服务UUID: 0000180d-0000-1000-8000-00805f9b34fb）
    // 如果不指定，部分设备可能无法被检索到
    const retrieveOptions = {
      services: [] 
    };

    this.bluetoothle.retrieveConnected(retrieveOptions)
      .then(result => {
        console.log('已连接设备:', result.devices);
        // 把设备列表赋值给组件变量，供UI绑定
        this.foundDevices = result.devices;
        this.showToast(`找到 ${this.foundDevices.length} 个已连接设备`);
      })
      .catch(error => {
        this.showToast(`获取已连接设备出错: ${JSON.stringify(error)}`);
        console.error('Retrieve connected error:', error);
      });
  }

  // 封装Toast调用，避免重复代码
  private showToast(message: string): void {
    this.toast.show(message, '5000', 'center')
      .subscribe(toast => console.log(toast));
  }
}

额外配置步骤 #

1. AndroidManifest.xml权限添加 #

在platforms/android/app/src/main/AndroidManifest.xml里添加以下权限：

<uses-permission android:name="android.permission.BLUETOOTH" android:maxSdkVersion="30" />
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" android:maxSdkVersion="30" />
<uses-permission android:name="android.permission.BLUETOOTH_SCAN" />
<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
<uses-feature android:name="android.hardware.bluetooth_le" android:required="true" />

2. 视图模板（home.html）绑定数据 #

确保你的视图正确显示设备列表：

<ion-content padding>
  <h2>已连接的BLE设备</h2>
  <ion-list>
    <ion-item *ngFor="let device of foundDevices">
      <h2>{{device.name || '未知设备'}}</h2>
      <p>设备ID: {{device.id}}</p>
    </ion-item>
  </ion-list>
  <p *ngIf="foundDevices.length === 0" class="empty-message">未找到已连接的BLE设备</p>
</ion-content>

3. Ticwatch特定服务UUID（可选） #

如果还是找不到Ticwatch，你可以用nRF Connect这类BLE工具扫描手表，找到它的服务UUID，然后添加到retrieveOptions.services数组里，比如：

const retrieveOptions = {
  services: ['0000180d-0000-1000-8000-00805f9b34fb'] // 心率服务UUID示例
};

这样修改后，应该就能正确获取到已连接的Ticwatch设备了。如果还有问题，打开控制台看错误日志，就能快速定位问题啦！

内容的提问来源于stack exchange，提问作者Alex