添加移动应用

我们的图片库应用程序只有在 iOS、Android 和 Web 上运行时才算完整，所有这些都使用一个代码库。所需要的只是一些小的逻辑更改来支持移动平台，安装一些原生工具，然后在设备上运行应用程序。让我们开始吧！

让我们先做一些小的代码更改 - 然后当我们将其部署到设备时，我们的应用程序就会“正常工作”。

平台特定逻辑

首先，我们将更新图片保存功能以支持移动设备。我们将根据平台运行不同的代码 - 移动或 Web。从 Ionic Vue 导入 Platform API，从 Capacitor 的 core 包导入 Capacitor

import { isPlatform } from '@ionic/vue';
import { Capacitor } from '@capacitor/core';

在 savePicture 函数中，检查应用程序运行的平台。如果它是“混合”（Capacitor，原生运行时），则使用 readFile 方法将图片文件读入 base64 格式。此外，使用 Filesystem API 返回图片文件的完整路径。设置 webviewPath 时，使用特殊的 Capacitor.convertFileSrc 方法 (详情请点击此处)。否则，在 Web 上运行应用程序时，使用与之前相同的逻辑。

const savePicture = async (photo: Photo, fileName: string): Promise<UserPhoto> => {
  let base64Data: string | Blob;
  // "hybrid" will detect mobile - iOS or Android
  if (isPlatform('hybrid')) {
    const file = await Filesystem.readFile({
      path: photo.path!,
    });
    base64Data = 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();
    base64Data = (await convertBlobToBase64(blob)) as string;
  }
  const savedFile = await Filesystem.writeFile({
    path: fileName,
    data: base64Data,
    directory: Directory.Data,
  });

  if (isPlatform('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,
    };
  }
};

接下来，在 loadSaved 函数中添加新的逻辑。在移动设备上，我们可以直接指向 Filesystem 上的每个图片文件并自动显示它们。但是，在 Web 上，我们必须将 Filesystem 上的每个图片文件读入 base64 格式。这是因为 Filesystem API 底层使用的是 IndexedDB。更新 loadSaved 函数

const loadSaved = async () => {
  const photoList = await Preferences.get({ key: PHOTO_STORAGE });
  const photosInPreferences = photoList.value ? JSON.parse(photoList.value) : [];

  // If running on the web...
  if (!isPlatform('hybrid')) {
    for (const photo of photosInPreferences) {
      const file = await Filesystem.readFile({
        path: photo.filepath,
        directory: Directory.Data,
      });
      // Web platform only: Load the photo as base64 data
      photo.webviewPath = `data:image/jpeg;base64,${file.data}`;
    }
  }

  photos.value = photosInPreferences;
};

现在，我们的图片库应用程序拥有一个代码库，可以在 Web、Android 和 iOS 上运行。接下来，就是你一直期待的 - 将应用程序部署到设备上。