添加移动端

我们的照片库应用程序在完成之前，需要在 iOS、Android 和 Web 上运行 - 所有这些都使用一个代码库。只需要进行一些小的逻辑更改来支持移动平台，安装一些本地工具，然后在设备上运行应用程序。让我们开始吧！

导入平台 API

让我们从进行一些小的代码更改开始 - 然后我们的应用程序在部署到设备时就会“正常工作”。

将 Ionic 平台 API 导入到 photo.service.ts 中，该 API 用于检索有关当前设备的信息。在这种情况下，它对于根据应用程序运行的平台（Web 或移动）选择要执行的代码很有用。

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

export class PhotoService {
  public photos: UserPhoto[] = [];
  private PHOTO_STORAGE: string = 'photos';
  private platform: Platform;

  constructor(platform: Platform) {
    this.platform = platform;
  }

  // other code
}

特定于平台的逻辑

首先，我们将更新照片保存功能以支持移动设备。在 readAsBase64() 函数中，检查应用程序运行的平台。如果它是“混合”（Capacitor 或 Cordova，两种原生运行时），那么使用 Filesystem readFile() 方法将照片文件读取到 base64 格式。否则，在 Web 上运行应用程序时，使用与以前相同的逻辑。

private async readAsBase64(photo: Photo) {
  // "hybrid" will detect Cordova or Capacitor
  if (this.platform.is('hybrid')) {
    // Read the file into base64 format
    const file = await Filesystem.readFile({
      path: photo.path!
    });

    return file.data;
  }
  else {
    // Fetch the photo, read as a blob, then convert to base64 format
    const response = await fetch(photo.webPath!);
    const blob = await response.blob();

    return await this.convertBlobToBase64(blob) as string;
  }
}

接下来，更新 savePicture() 方法。在移动设备上运行时，将 filepath 设置为 writeFile() 操作的结果 - savedFile.uri。设置 webviewPath 时，使用特殊的 Capacitor.convertFileSrc() 方法（详细信息请参见此处）。

// Save picture to file on device
private async savePicture(photo: Photo) {
  // Convert photo to base64 format, required by Filesystem API to save
  const base64Data = await this.readAsBase64(photo);

  // Write the file to the data directory
  const fileName = Date.now() + '.jpeg';
  const savedFile = await Filesystem.writeFile({
    path: fileName,
    data: base64Data,
    directory: Directory.Data
  });

  if (this.platform.is('hybrid')) {
    // Display the new image by rewriting the 'file://' path to HTTP
    // Details: https://ionicframework.cn/docs/building/webview#file-protocol
    return {
      filepath: savedFile.uri,
      webviewPath: Capacitor.convertFileSrc(savedFile.uri),
    };
  }
  else {
    // Use webPath to display the new image instead of base64 since it's
    // already loaded into memory
    return {
      filepath: fileName,
      webviewPath: photo.webPath
    };
  }
}

接下来，返回到我们之前为 Web 实现的 loadSaved() 函数。在移动设备上，我们可以直接将图像标签的源代码 - <img src="x" /> - 设置为 Filesystem 上的每个照片文件，自动显示它们。因此，只有 Web 需要将 Filesystem 中的每个图像读取到 base64 格式。更新此函数以在 Filesystem 代码周围添加一个 *if 语句*

public async loadSaved() {
  // Retrieve cached photo array data
  const { value } = await Preferences.get({ key: this.PHOTO_STORAGE });
  this.photos = (value ? JSON.parse(value) : []) as UserPhoto[];

  // Easiest way to detect when running on the web:
  // “when the platform is NOT hybrid, do this”
  if (!this.platform.is('hybrid')) {
    // Display the photo by reading into base64 format
    for (let photo of this.photos) {
      // Read each saved photo's data from the Filesystem
      const readFile = await Filesystem.readFile({
          path: photo.filepath,
          directory: Directory.Data
      });

      // Web platform only: Load the photo as base64 data
      photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`;
    }
  }
}

我们的照片库现在包含一个在 Web、Android 和 iOS 上运行的代码库。接下来，您一直在等待的部分 - 将应用程序部署到设备。