代码之家 › 专栏 › 技术社区 › Sampath

检查platform.ready()不在Capacitor应用程序上

capacitor cordova-plugins ionic-framework angular

Sampath · 技术社区 · 4 年前

我开发了一个Angular和Capacitor应用程序。即这里没有Ionic

我如何在Native平台上查看此信息 await this.platform.ready(); .因为我需要在应用程序启动时使用Cordova插件,如下所示:

app.component.ts

 constructor(
    private screenOrientation: ScreenOrientation) {

    this.initializeApp();
  }

private async initializeApp(): Promise<void> {

    //await this.platform.ready(); //cannot use here no Ionic
  

    if (Capacitor.isPluginAvailable('StatusBar')) { StatusBar.show(); }

    if (Capacitor.isNative) { this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT); }
  }

那么,这里还有什么选择呢?

更新

这里的问题是我需要使用Firebase用户名/pw功能。但它在原生构建的iOS设备上给出了以下错误。

[错误]- {“code”:“此环境不支持身份验证/操作”,“message”:“this 此应用程序所在的环境不支持该操作正在上运行。“location.proprotocol”必须是http、https或必须启用chrome扩展和web存储。"}

我在谷歌上看到了一些东西。即,他说Firebase监听设备就绪事件。

https://github.com/firebase/firebaseui-web/issues/178#issuecomment-310460472

即此外,SDK还将监听“deviceready”事件。如果它在一秒钟内没有收到信号,它就会超时,并假设您没有在Cordova环境中运行。还要确保您没有禁用web存储,因为应用程序依赖于此。

那么,我该怎么做呢?

更新2

npx上限

Found 0 Capacitor plugins for android:
  Found 5 Cordova plugins for android
    cordova-plugin-ionic (5.4.7)
    cordova-plugin-screen-orientation (3.0.2)
    cordova-plugin-whitelist (1.3.4)
    es6-promise-plugin (4.2.2)
    phonegap-plugin-barcodescanner (8.1.0)
  Found 0 Capacitor plugins for ios:
  Found 4 Cordova plugins for ios
    cordova-plugin-ionic (5.4.7)
    cordova-plugin-screen-orientation (3.0.2)
    es6-promise-plugin (4.2.2)
    phonegap-plugin-barcodescanner (8.1.0)
  Found 1 incompatible Cordova plugin for ios, skipped install
    cordova-plugin-whitelist (1.3.4)
[info] Listing plugins for web is not possible

更新3

import { Component, HostListener, Inject, OnInit } from '@angular/core';
import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
import { Capacitor, PluginRegistry, Plugins } from '@capacitor/core';

import { ScreenSizeService } from './core/services/data/screen-size.service';
import { AuthService } from './core/services/apis/auth.service';
import { MenubarService } from './core/services/data/menubar.service';
import { DOCUMENT } from '@angular/common';

const { StatusBar }: PluginRegistry = Plugins;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor(
    public screenSizeService: ScreenSizeService,
    public authService: AuthService,
    private screenOrientation: ScreenOrientation,
    public menubarService: MenubarService,
    @Inject(DOCUMENT) private doc: any) {

    this.initializeApp();
  }



  private initializeApp(): void {

 
    if (Capacitor.isPluginAvailable('StatusBar')) { StatusBar.show(); }

      
    this.doc.addEventListener('deviceready', this.onDeviceReady, false);

  }

  onDeviceReady(): void {
    if (Capacitor.isNative) { this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT); }
    this.authService.setFirebaseAuth();
  }

 

}

0 回复 | 直到 4 年前

jcesarmobile 4 年前

如果你不想使用Ionic,那么你就不能使用 platform 因为这是Ionic的特性。

如果你只想等待 deviceready 事件,然后您可以直接收听

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    // Now safe to use device APIs
}

无论如何,在电容器中,您不需要等待设备就绪。

Sampath 4 年前

尝试使用Angular生命周期挂钩。这可能通过以下方式实现

ngAfterViewInit() or ngAfterViewChecked()