Question

其他信息：

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

(<any>window).plugins.myPlugin 

or

declare var yourGloballyAccessablePlugin: any;

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

解决方案尝试：

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

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

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

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

然后我尝试访问插件（在手机上测试），如下所示：

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

...

(<any>window).bluetoothle

问题：

但是bluetoothle对我来说总是不确定的。由于我是cordova，ionic和TypeScript的新手我觉得我使用declarations.d.ts

的方式有问题。

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

更新，解决方案尝试2 ：

所以我尝试在@Webruster推荐的初始项目结构app.component.ts中使用来自bluetoothle documentation的init参数运行此代码：

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

...进口

declare var cordova: any;

@Component，class start和attributes ...

  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 plugin add cordova-plugin-bluetoothle

之后在import语句之后包含以下行，如下所示：

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 2

首先安装插件（ionic3）：

ionic cordova plugin add cordova-plugin-bluetoothle

然后在平台准备好根据ionic forum上的@dinomight帖子访问通常位置（cordova.plugins）的插件时使用(<any>window).bluetoothle：

窗口对象似乎正在加载蓝牙模块。如果我 console.log（窗口）我可以看到它的所有内容功能。问题是，如果我尝试通过引用它 “window.bluetoothle”我收到一个新错误

这是测试代码（只有构造函数，因为我没有修改任何其他内容），它会提示您激活蓝牙（仅在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();
  }

<强> Testenvironment：

我在Nexus 5上的Android 7.1.1（lineageOS）上进行了测试

Answer 3

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

然而，虽然这是一个使用插件的好方法，但它并没有包装所有方法，因此无法满足我的需要。如果它有您需要的方法，那么我建议使用它。

我的主要建议是使用 import React from 'react'; const Comp = props => { let listarr = []; listarr[0] = <div key = {0} onClick = {props.changetext}{props.list[0]} listarr[1] = <div key = {1} onClick = {props.changetext}>{props.list[1]} </div> return( <div>{listarr}</div> ); } export default Comp; 如前一张海报所述。在这里描述的所有技术中，这是唯一对我有用的技术。

我希望能帮助任何读这个帖子的人。

Answer 4

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

声明var bluetoothle：any;

Answer 5

经过更多时间的研究，我发现有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崩溃。
复制现有的包装器插件，并将其作为提供程序添加到您自己的源代码中，然后只包装您需要使用的其余方法。要复制的文件位于：https://github.com/somq/ionic-plugin-bluetoothle/blob/master/src/%40ionic-native/plugins/bluetooth-le/index.ts。有关如何打包插件的指南，请访问：http://www.damirscorner.com/blog/posts/20170908-WritingAnIonicNativeWrapper.html

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

Answer 6

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

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

第2步：在提供商 app.module.ts 页面中添加 BluetoothSerial 第3步：启用蓝牙您的移动蓝牙自动开启或请求您的许可。

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

第4步：开始扫描

    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);

步骤5：检测到可用的蓝牙设备后，选择任意一个那些。

 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>

注意：我希望你能。祝你有愉快的一天！

如何在离子3中使用cordova插件bluetoothle？

6 个答案: