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

首先，我们将更新照片保存功能以支持移动设备。在 savePicture 函数中，检查应用运行在哪个平台上。如果它是“混合”（Capacitor 或 Cordova，两个原生运行时），则使用 readFile 方法将照片文件读取为 Base64 格式。另外，使用文件系统 API 返回照片的完整文件路径。设置 webviewPath 时，请使用特殊的 Capacitor.convertFileSrc 方法（详细信息在这里）。否则，在网络上运行应用时使用与以前相同的逻辑。

¥First, we’ll update the photo saving functionality to support mobile. In the savePicture function, check which platform the app is running on. If it’s “hybrid” (Capacitor or Cordova, the two native runtimes), 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 Cordova or Capacitor;
  if (isPlatform('hybrid')) {
    const file = await Filesystem.readFile({
      path: photo.path!,
    });
    base64Data = file.data;
  } else {
    base64Data = await base64FromPath(photo.webPath!);
  }
  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。将 useEffect 内部的 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 inside of useEffect to:

const loadSaved = async () => {
  const { value } = await Preferences.get({ key: PHOTO_STORAGE });

  const photosInPreferences = (value ? JSON.parse(value) : []) as UserPhoto[];
  // If running on the web...
  if (!isPlatform('hybrid')) {
    for (let 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}`;
    }
  }
  setPhotos(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.

目录