如何在 ionic 3 中使用 cordova 插件蓝牙？

Question

附加信息：

我知道通常 way 访问 cordova 插件：

(<any>window).plugins.myPlugin 

or

declare var yourGloballyAccessablePlugin: any;

但它与插件不同bluetoothle（ionic 3 支持的原生蓝牙插件不够好，因为它们不提供蓝牙外设功能，例如广告）

解决方案尝试：

I found a related question on the ionic forums and asked how they achieved this，到目前为止我没有复制这个过程，也没有人回答我的问题，这就是为什么打开这个问题。

显然蓝牙公开了一个全局可访问的变量。

如上所述，我在 src 文件夹中添加了一个 declaration.d.ts 文件内容如下：

declare module 'cordova-plugin-bluetoothle';
import 'cordova-plugin-bluetoothle';
declare var cordova: any;

然后我尝试像这样访问插件（在我的 phone 上测试过）：

import { bluetoothle } from 'cordova-plugin-bluetoothle';

...

(<any>window).bluetoothle

问题：

但是蓝牙对我来说总是不确定的。由于我是 cordova、ionic 和 TypeScript 的新手，我猜我使用 declarations.d.ts

的方式有问题

那么有人知道我做错了什么吗，我如何在 ionic 3 中使用 cordova 原生插件蓝牙？

更新，解决方案尝试 2:

所以我尝试运行初始项目结构中的这段代码 app.component.ts 按照 @Webruster 的建议，使用来自蓝牙的初始化参数 documentation:

（这里唯一的目的是看插件是否有效）

进口...

declare var cordova: any;

@Component，class 开始和属性...

  constructor(private translate: TranslateService, platform: Platform, settings: Settings, private config: Config, private statusBar: StatusBar, private splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      console.log("I'm ready");
      // your bluetothle methods can be accessed after
      //cordova.plugins.bluetoothle
      // for brevity i added a sample method from repo , it can be changed
      //based on your need
      let initializeResult: object;
      let params: object = {
        "request": true,
        "statusReceiver": false,
        "restoreKey": "bluetoothleplugin"
      };
      cordova.plugins.bluetoothle.initialize(initializeResult, params);

      console.log(JSON.stringify(initializeResult));

      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
    this.initTranslate();
  }

但是这样应用程序甚至不会加载，它只是超时并输出与服务器的连接不成功当我运行应用程序没有插件代码时它可以工作。

更新 2：

我用chrome调试了应用程序（之前的错误是由--livereload选项引起的，原因不明）这是我得到的错误：

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'initialize' of undefined
TypeError: Cannot read property 'initialize' of undefined

正在检查 cordova、cordova.plugins 和 cordova.plugins.bluetoothle 的类型有：

  console.log(typeof cordova);
  console.log(typeof cordova.plugins);
  console.log(typeof cordova.plugins.bluetoothle);

我得到以下结果：

object
object
undefined

Answer 1

第一步：我们必须导入这个插件

ionic cordova plugin add cordova-plugin-bluetooth-serial
npm install --save @ionic-native/bluetooth-serial

第 2 步：添加 BluetoothSerial inside the provider app.module.ts page 第 3 步：启用蓝牙您的手机蓝牙自动开启或请求您的许可。

      unpairedDevices: any;
      pairedDevices: any;
      gettingDevices: Boolean;
    constructor(private bluetoothSerial: BluetoothSerial,
     private alertCtrl: AlertController) {
    bluetoothSerial.enable();
  }

第四步：开始扫描

    startScanning() {
    this.pairedDevices = null;
    this.unpairedDevices = null;
    this.gettingDevices = true;
    this.bluetoothSerial.discoverUnpaired().then((success) => {
      this.unpairedDevices = success;
      console.log(success, "hai")
      this.gettingDevices = false;
      success.forEach(element => {
        // alert(element.name);
      });
    },
      (err) => {
        console.log(err);
      })

    this.bluetoothSerial.list().then((success) => {
      this.pairedDevices = success;
    },
      (err) => {

      })
  }
  success = (data) => alert(data);
  fail = (error) => alert(error);

step 5: After detect available bluetooth device select any one of those.

 selectDevice(address: any) {

    let alert = this.alertCtrl.create({
      title: 'Connect',
      message: 'Do you want to connect with?',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        },
        {
          text: 'Connect',
          handler: () => {
            this.bluetoothSerial.connect(address).subscribe(this.success, this.fail);
          }
        }
      ]
    });
    alert.present();

  }

第 6 步：断开设备

isconnect() {
let alert = this.alertCtrl.create({
  title: 'Disconnect?',
  message: 'Do you want to Disconnect?',
  buttons: [
    {
      text: 'Cancel',
      role: 'cancel',
      handler: () => {
        console.log('Cancel clicked');
      }
    },
    {
      text: 'Disconnect',
      handler: () => {
        this.bluetoothSerial.disconnect();
      }
    }
  ]
});
alert.present();

}

第 7 步：home.html 页

    <ion-content padding>

 <ion-list padding>
  <button ion-button block (click)="startScanning()">scan</button>
  <ion-list-header>
    Paired Devices
  </ion-list-header>
  <ion-item *ngFor="let device of pairedDevices">
    {{device.name}}
  </ion-item>
  <button ion-button block (click)="disconnect()">Disconnect</button>
  <ion-list-header>
    availlable Devices
  </ion-list-header>
  <ion-item *ngFor='let device of unpairedDevices'>
    <span (click)="selectDevice(device.address)">
      {{device.name}}
    </span>
  </ion-item>
  <ion-spinner name="crescent" *ngIf="gettingDevices"></ion-spinner>
</ion-list>

</ion-content>

注：希望对你有用。祝你有美好的一天！

Answer 2

就像正常的方式一样，你可以安装它：

ionic plugin add cordova-plugin-bluetoothle

在此之后，在您的导入语句之后包含以下行，如下所示：

declare var cordova:any;

并在平台准备就绪后使用它：

platform.ready().then(
    () => {
        console.log("I'm ready");
        // your bluetothle methods can be accessed after 
        //cordova.plugins.bluetoothle
        // for brevity i added a sample method from repo , it can be changed 
        //based on your need
        cordova.plugins.bluetoothle.initialize(initializeResult, params);
    }
);

Answer 3

在您希望使用插件消除 IDE 错误的每个页面的顶部添加此行：

声明 var bluetoothle: any;

Answer 4

首先安装插件（ionic3）：

ionic cordova plugin add cordova-plugin-bluetoothle

然后使用(<any>window).bluetoothle当平台准备好访问基于@dinomight post的通常位置（cordova.plugins）的插件时ionic forum：

the window object seems to be loading the bluetoothle module. if i console.log(window) i can see it right there with all of its functions. problem is if i try to reference it via “window.bluetoothle” i get a new error

这是测试代码（只有构造函数，因为我没有修改任何其他东西）提示您激活蓝牙（仅在 android 上支持）并且允许它这样做后激活它（代码位于扩展的 ionic3 入门应用程序的 component.app.ts）：

  constructor(private translate: TranslateService, platform: Platform, settings: Settings, private config: Config, private statusBar: StatusBar, private splashScreen: SplashScreen) {
    platform.ready().then(() => {

      let initializeResult: object;
      let params: object = {
        "request": true,
        "statusReceiver": false,
        "restoreKey": "bluetoothleplugin"
      };

      (<any>window).bluetoothle.initialize(initializeResult, params);

      let enableSuccess: object;
      let enableError: object;

      (<any>window).bluetoothle.enable(enableSuccess, enableError);

      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
    this.initTranslate();
  }

测试环境：

我在我的 Nexus 5Android 7.1.1 (lineageOS) 上测试了这个

Answer 5

您可以在此处使用此插件的包装器：https://github.com/somq/ionic-plugin-bluetoothle。

然而，虽然这是使用插件的好方法，但它没有包装所有方法，因此不能满足我的需要。如果它有你需要的方法，那么我推荐使用它。

我的主要建议是使用 (<any>window).bluetoothle.{method name} 正如之前的海报所描述的那样。在此处描述的所有技术中，这是唯一对我有用的技术。

我希望对阅读此主题的人有所帮助。

Answer 6

经过更多时间的研究，我发现有 4 种方法可以做到这一点（改进了我之前的回答）：

如果您不需要包装每个插件方法（很多都缺失），请在此处使用插件包装器：https://github.com/somq/ionic-plugin-bluetoothle
在您的代码中的任意位置使用 (<any>window).bluetoothle.{method name}({arguments});。这很好用，但会导致 Ionic View 崩溃。
在你的文件的顶部使用declare var bluetoothle;，然后你可以通过bluetoothle.{method name}({arguments});进入插件。效果很好，但也会使 Ionic View 崩溃。
复制现有的wrapper插件，并将其作为提供者添加到您自己的源代码中，然后只需包装您需要使用的其余方法即可。要复制的文件在这里：https://github.com/somq/ionic-plugin-bluetoothle/blob/master/src/%40ionic-native/plugins/bluetooth-le/index.ts. A guide on how to wrap a plugin is here: http://www.damirscorner.com/blog/posts/20170908-WritingAnIonicNativeWrapper.html

4 是最简洁的解决方案，如果您像我一样需要包装比 somq 在他的项目中完成的方法更多的方法。此方法将阻止 Ionic View 崩溃，但事实证明该插件无论如何都不被支持，因此您仍然无法在 Ionic View 中使用它。

如何在 ionic 3 中使用 cordova 插件蓝牙？

How to use the cordova plugin bluetoothle in ionic 3?

javascript

cordova

typescript

ionic-framework

ionic-native