离子原生角度示例代码到 vuejs

Posted 2023-03-13

【中文标题】离子原生角度示例代码到 vuejs

【英文标题】：ionic-native angular example code to vuejs

【发布时间】：2020-04-28 06:59:03

【问题描述】：

使用 Ionic Native 可以通过原生插件使用 iBeacons：https://ionicframework.com/docs/native/ibeacon

示例代码是为使用 Ionic 和 AngularJS 的人编写的，但我使用的是 VueJS，我不知道如何让它工作：

示例代码的 Angular 版本：

import  IBeacon  from '@ionic-native/ibeacon/ngx';

constructor(private ibeacon: IBeacon)  

...


// Request permission to use location on ios
this.ibeacon.requestAlwaysAuthorization();
// create a new delegate and register it with the native layer
let delegate = this.ibeacon.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)
  );

但是.. 我期望在 VueJS 中工作的是以下内容：

在我的组件之上导入它：import IBeacon from '@ionic-native/ibeacon/ngx';

并像这样使用它：

foobar() 
let _ibeacon = IBeacon.Delegate()
  alert('Hi iBeacon');
  _ibeacon.didStartMonitoringForRegion()
    .subscribe(
      data => console.log('didStartMonitoringForRegion: ', data),
      error => console.error()
    );

但即使是警报也没有显示。 将 iBeacon 插件与 Vue 和 ionic 一起使用的正确方法是什么？

【参考方案1】：

this repo 的快速工作。只需要替换两个文件。