在 Web Angular 应用程序中分离本机功能代码的最佳方法是什么，它也是使用 Capacitor 的本机 android/ios 应用程序？

Question

我对使用电容器的 Angular 应用程序有疑问。我们的 Angular 应用程序源代码应该用于 Web 构建以及本机 android/ios 应用程序。如果我们使用例如关于 Web 应用程序的电容摄像头/蓝牙/文件系统本机功能，是否应该遵循一些建议的方法？

如何分离那些不在 Angular Web 应用程序上使用的本机功能？例如，如果我们使用 android 应用程序，我们希望用户可以从他的相机上传个人资料图片，但如果他使用网络版本，我们希望他只能从他的文件系统上传。您是否有仅为 web/native 应用程序构建的单独组件，或者您可能有条件验证移动应用程序或浏览器中的用户，然后根据该条件使用功能？

谢谢。

Answer 1

您可以使用此代码运行仅当在本机平台中时才能使用某些代码

if (Capacitor.isNativePlatform()) {
  // do something
}

https://capacitorjs.com/docs/basics/utilities#isnativeplatform

在您的示例中，相机插件也支持网络，并且可以配置为仅使用文件选择器而不使用相机。

Answer 2

如果三个平台都有需要考虑的特点，那么我一般会创建5个服务。使用 Filesystem 插件的示例：

CapacitorFilesystemService：这是我的包装器服务，它包装了对 Capacitor 插件的所有调用。它使用的代码应该适用于所有三个平台。

import { Filesystem } from '@capacitor/filesystem';
...

@Injectable({
  providedIn: 'root',
})
export class CapacitorFilesystemService {
  constructor() {}

  public requestPermissions(): Promise<void> {
    try {
      return Filesystem.requestPermissions();
    } catch (error) {
      // e.g. error handling for all platforms
    }
  }
}

CapacitorAndroidFilesystemService：这是 Android 实施的服务。

@Injectable({
  providedIn: 'root',
})
export class CapacitorAndroidFilesystemService {
  constructor(
    private capacitorFilesystemService: CapacitorFilesystemService,
  ) {}

  public requestPermissions(): Promise<void> {
    // Maybe show a UI hint before asking for permission on Android...
    return this.capacitorFilesystemService.requestPermissions();
  }
}

CapacitorIosFilesystemService：这是 iOS 实施的服务。

@Injectable({
  providedIn: 'root',
})
export class CapacitorIosFilesystemService {
  constructor(
    private capacitorFilesystemService: CapacitorFilesystemService,
  ) {}

  public requestPermissions(): Promise<void> {
    // More platform specific code...
    return this.capacitorFilesystemService.requestPermissions();
  }
}

CapacitorWebFilesystemService: 这是web实现的服务。

@Injectable({
  providedIn: 'root',
})
export class CapacitorWebFilesystemService {
  constructor(
    private capacitorFilesystemService: CapacitorFilesystemService,
  ) {}

  public requestPermissions(): Promise<void> {
    // More platform specific code...
    return this.capacitorFilesystemService.requestPermissions();
  }
}

FilesystemService：这是其他服务现在可以用来访问文件系统的服务，而不必担心特殊实现。

import { Platform } from '@ionic/angular';
...

@Injectable({
  providedIn: 'root',
})
export class FilesystemService {
  constructor(
    private capacitorAndroidFilesystemService: CapacitorAndroidFilesystemService,
    private capacitorIosFilesystemService: CapacitorIosFilesystemService,
    private capacitorWebFilesystemService: CapacitorWebFilesystemService,
    private platform: Platform,
  ) {}

  public requestPermissions(): Promise<void> {
    if (this.platform.is('android')) {
      return this.capacitorAndroidFilesystemService.requestPermissions();
    } else if (this.platform.is('ios')) {
      return this.capacitorIosFilesystemService.requestPermissions();
    } else {
      return this.capacitorWebFilesystemService.requestPermissions();
    }
  }
}

但是，老实说，在大多数情况下我不需要不同的实现。所以通常 CapacitorFilesystemService 和 FilesystemService 对我来说就足够了。这个例子只是为了解释我的方法。

在 Web Angular 应用程序中分离本机功能代码的最佳方法是什么，它也是使用 Capacitor 的本机 android/ios 应用程序？

What is the best approach for separating native features code in web Angular application which is also native android/ios app using Capacitor?

angular

capacitor