Skip to main content

添加手机

¥Adding Mobile

我们的照片库应用只有在 iOS、Android 和 Web 上运行后才算完整 - 全部使用一个代码库。只需进行一些小的逻辑更改即可支持移动平台，安装一些原生工具，然后在设备上运行应用。我们走吧！

¥Our photo gallery app won’t be complete until it runs on iOS, Android, and the web - all using one codebase. All it takes is some small logic changes to support mobile platforms, installing some native tooling, then running the app on a device. Let’s go!

让我们从一些小的代码更改开始 - 那么当我们将应用部署到设备时，它将会 "只是工作"。

¥Let’s start with making some small code changes - then our app will "just work" when we deploy it to a device.

特定于平台的逻辑​

¥Platform-specific Logic

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

¥First, we’ll update the photo saving functionality to support mobile. We'll run slightly different code depending on the platform - mobile or web. Import the Platform API from Ionic Vue and Capacitor from Capacitor's core package:



import { isPlatform } from '@ionic/vue';




import { Capacitor } from '@capacitor/core';


在 savePicture 函数中，检查应用运行在哪个平台上。如果是 "hybrid"（Capacitor，原生运行时），则使用 readFile 方法将照片文件读取为 base64 格式。另外，使用文件系统 API 返回照片的完整文件路径。设置 webviewPath 时，请使用特殊的 Capacitor.convertFileSrc 方法（详细信息在这里）。否则，在网络上运行应用时使用与以前相同的逻辑。

¥In the savePicture function, check which platform the app is running on. If it’s "hybrid" (Capacitor, the native runtime), then read the photo file into base64 format using the readFile method. Also, return the complete file path to the photo using the Filesystem API. When setting the webviewPath, use the special Capacitor.convertFileSrc method (details here). Otherwise, use the same logic as before when running the app on the 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://ionic.nodejs.cn/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 函数中添加新的逻辑位。在移动设备上，我们可以直接指向文件系统上的每个照片文件并自动显示它们。然而，在网络上，我们必须将文件系统中的每个图片读取为 base64 格式。这是因为文件系统 API 在底层使用了 IndexedDB。更新 loadSaved 函数：

¥Next, add a new bit of logic in the loadSaved function. On mobile, we can directly point to each photo file on the Filesystem and display them automatically. On the web, however, we must read each image from the Filesystem into base64 format. This is because the Filesystem API uses IndexedDB under the hood. Update the loadSaved function:

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 上运行的代码库组成。接下来是你一直在等待的部分 - 将应用部署到设备。

¥Our Photo Gallery now consists of one codebase that runs on the web, Android, and iOS. Next up, the part you’ve been waiting for - deploying the app to a device.

目录