离子原生 Ibeacon ReferenceError: 设备未定义

Question

TLDR：Ibeacon 模块示例不起作用

我在 Ionic 5 中有一个使用电容器的小应用程序。

我想使用the Ibeacon library，但出现错误：

该库的资源稀缺，我只发现当委托未定义导致LocatonManager 错误here 时有人遇到问题。

我还尝试查看导致错误的原因，显然提到的设备是device library 的一部分。因此，我检查了 Ibeacon 库是否正确导入了设备之一，并且它在 node_modules\cordova-plugin-ibeacon\plugin.xml 中正确导入，如下所示：

   <!-- Version is set to anything because the only feature we use is the device.platform property which was available
    since forever. The added benefit is that we don't force the consumers of this plugin to use a certain version of
    the device plugin. -->
    <dependency id="cordova-plugin-device" version="*" />

我的课程几乎就是 Ibeacon 页面中给出的示例：

import { Component, OnInit } from '@angular/core';
import { IBeacon } from '@ionic-native/ibeacon/ngx';
import { Platform } from '@ionic/angular';

@Component({
  selector: 'app-beacon',
  templateUrl: './beacon.page.html',
  styleUrls: ['./beacon.page.scss'],
})
export class BeaconPage implements OnInit {
  public beacons: any[] = [];

  constructor(
    private ibeacon: IBeacon,
    private platform: Platform,
    private _utils: UtilsService
  ) {}

  ngOnInit() {
    console.log('ngOnInit');

    if (!this.platform.is('android')) {
      console.log('Beacon related activity only available on Android');
      return;
    }

    // create a new delegate and register it with the native layer
    let delegate = this.ibeacon.Delegate();
    console.log('delegate :', delegate);

    // Subscribe to some of the delegate's event handlers
    delegate.didRangeBeaconsInRegion().subscribe(
      (data) => console.log('didRangeBeaconsInRegion: ', data),
      (error) => console.error()
    );
    delegate.didStartMonitoringForRegion().subscribe(
      (data) => console.log('didStartMonitoringForRegion: ', data),
      (error) => console.error()
    );
    delegate.didEnterRegion().subscribe((data) => {
      console.log('didEnterRegion: ', data);
    });

    let beaconRegion = this.ibeacon.BeaconRegion(
      'deskBeacon',
      'F7826DA6-ASDF-ASDF-8024-BC5B71E0893E'
    );

    this.ibeacon.startMonitoringForRegion(beaconRegion).then(
      () => console.log('Native layer received the request to monitoring'),
      (error) =>
        console.error('Native layer failed to begin monitoring: ', error)
    );
  }
}

我还像这样在我的 module.ts 中导入了 IBeacon 模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { BeaconPageRoutingModule } from './beacon-routing.module';

import { BeaconPage } from './beacon.page';
import { IBeacon } from '@ionic-native/ibeacon/ngx';

@NgModule({
  imports: [CommonModule, FormsModule, IonicModule, BeaconPageRoutingModule],
  declarations: [BeaconPage],
  providers: [IBeacon],
})
export class BeaconPageModule {}

我忘记做某事了吗？为什么设备未定义？我还应该导入设备库吗？

我应该提到我已经安装了设备库。

Answer 1

在库中，他们使用device 来检查plataform，即代码：

BeaconRegion.isValidUuid = function (uuid) {

    // https://github.com/petermetz/cordova-plugin-ibeacon/issues/328
    // If we are on Android, then allow the UUID to be specified as a wild-card (omitted)
    var isAndroid = device && device.platform === "Android";
    if (uuid === BeaconRegion.WILDCARD_UUID && isAndroid) {
        return true;
    }

    var uuidValidatorRegex = this.getUuidValidatorRegex();
    return uuid.match(uuidValidatorRegex) != null;
};

您可以在这里查看https://github.com/petermetz/cordova-plugin-ibeacon/blob/270ffbbc12159861a16e5e81481103c1e09139cb/www/model/BeaconRegion.js#L38

所以，你必须安装以下插件https://ionicframework.com/docs/native/device

npm install cordova-plugin-device
npm install @ionic-native/device
ionic cap sync

然后找到这个device引用，问题就解决了。