通过实时重新加载进行快速应用开发

到目前为止，我们已经看到开发一个可以在各个平台运行的应用是多么容易。开发体验相当快速，但如果我告诉你有一种方法可以更快呢？

🌐 So far, we’ve seen how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster?

我们可以使用 Ionic CLI 的 Live Reload 功能来提升构建 Ionic 应用的生产力。启用后，当检测到应用中的更改时，Live Reload 会重新加载浏览器和/或 WebView。

🌐 We can use the Ionic CLI’s Live Reload functionality to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.

实时重新加载

🌐 Live Reload

还记得 ionic serve 吗？那是在浏览器中工作的实时重载，它让我们能够快速迭代。

🌐 Remember ionic serve? That was Live Reload working in the browser, allowing us to iterate quickly.

我们在 iOS 和 Android 设备上开发时也可以使用它。这在编写与本地插件交互的代码时特别有用——我们必须在设备上运行它以验证其是否有效。因此，能够快速编写、构建、测试和部署代码对于保持我们的开发速度至关重要。

🌐 We can also use it when developing on iOS and Android devices. This is particularly useful when writing code that interacts with native plugins - we must run it on a device to verify that it works. Therefore, being able to quickly write, build, test, and deploy code is crucial to keeping up our development speed.

让我们使用实时重载来实现照片删除，这是我们照片库功能中缺失的一部分。选择你喜欢的平台（iOS 或 Android）并将设备连接到你的电脑。接下来，根据你选择的平台，在终端中运行下列任意命令：

🌐 Let’s use Live Reload to implement photo deletion, the missing piece of our Photo Gallery feature. Select your platform of choice (iOS or Android) and connect a device to your computer. Next, run either command in a terminal, based on your chosen platform:

ionic cap run ios -l --external

ionic cap run android -l --external

Live Reload 服务器将启动，如果原生 IDE 尚未打开，它将会自动打开。在 IDE 中，点击播放按钮将应用启动到你的设备上。

🌐 The Live Reload server will start up, and the native IDE of choice will open if not opened already. Within the IDE, click the Play button to launch the app onto your device.

删除照片

🌐 Deleting Photos

运行 Live Reload 并在设备上打开应用后，让我们实现照片删除功能。

🌐 With Live Reload running and the app open on your device, let’s implement photo deletion functionality.

在 usePhotoGallery.ts 中，添加 deletePhoto() 方法。先从 photos 数组中移除所选的照片。然后，使用 Filesystem API 删除实际的照片文件本身。

🌐 In usePhotoGallery.ts, add the deletePhoto() method. The selected photo is removed from the photos array first. Then, we delete the actual photo file itself using the Filesystem API.

import { ref, watch, onMounted } from 'vue';
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
import type { Photo } from '@capacitor/camera';
import { Filesystem, Directory } from '@capacitor/filesystem';
import { Preferences } from '@capacitor/preferences';
import { isPlatform } from '@ionic/vue';
import { Capacitor } from '@capacitor/core';

export const usePhotoGallery = () => {
  // ...existing code...

  // CHANGE: Add `deletePhoto()` method
  const deletePhoto = async (photo: UserPhoto) => {
    // Remove this photo from the Photos reference data array
    photos.value = photos.value.filter((p) => p.filepath !== photo.filepath);

    // Delete photo file from filesystem
    const filename = photo.filepath.slice(photo.filepath.lastIndexOf('/') + 1);
    await Filesystem.deleteFile({
      path: filename,
      directory: Directory.Data,
    });
  };

  onMounted(loadSaved);
  watch(photos, cachePhotos);

  return {
    photos,
    addNewToGallery,
    // CHANGE: Add `deletePhoto()` to the return statement
    deletePhoto,
  };
};

export interface UserPhoto {
  filepath: string;
  webviewPath?: string;
}

接下来，在 Tab2Page.vue 中实现 showActionSheet() 方法。我们添加两个选项：“删除”，它会调用 usePhotoGallery.deletePicture()，以及“取消”。当取消按钮被分配了“cancel”角色时，它将自动关闭操作表。

🌐 Next, in Tab2Page.vue, implement the showActionSheet() method. We're adding two options: "Delete", which calls usePhotoGallery.deletePicture(), and "Cancel". The cancel button will automatically close the action sheet when assigned the "cancel" role.

<script setup lang="ts">
// CHANGE: Update import
import { camera, trash, close } from 'ionicons/icons';
// CHANGE: Update import
import {
  IonPage,
  IonHeader,
  IonFab,
  IonFabButton,
  IonIcon,
  IonToolbar,
  IonTitle,
  IonContent,
  actionSheetController,
} from '@ionic/vue';

// CHANGE: Add `UserPhoto` type import
import type { UserPhoto } from '@/composables/usePhotoGallery';
import { usePhotoGallery } from '@/composables/usePhotoGallery';

// CHANGE: Add `deletePhoto()` method
const { photos, addNewToGallery, deletePhoto } = usePhotoGallery();

// CHANGE: Add `showActionSheet()` method
const showActionSheet = async (photo: UserPhoto) => {
  const actionSheet = await actionSheetController.create({
    header: 'Photos',
    buttons: [
      {
        text: 'Delete',
        role: 'destructive',
        icon: trash,
        handler: () => {
          deletePhoto(photo);
        },
      },
      {
        text: 'Cancel',
        icon: close,
        role: 'cancel',
        handler: () => {
          // Nothing to do, action sheet is automatically closed
        },
      },
    ],
  });
  await actionSheet.present();
};
</script>

为 <ion-img> 元素添加点击处理程序。当应用用户点击我们图库中的照片时，我们将显示一个操作表对话框，提供删除所选照片或取消（关闭）对话框的选项。

🌐 Add a click handler to the <ion-img> element. When the app user taps on a photo in our gallery, we’ll display an Action Sheet dialog with the option to either delete the selected photo or cancel (close) the dialog.

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Photo Gallery</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Photo Gallery</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-grid>
        <ion-row>
          <ion-col size="6" :key="photo.filepath" v-for="photo in photos">
            
            <ion-img :src="photo.webviewPath" @click="showActionSheet(photo)"></ion-img>
          </ion-col>
        </ion-row>
      </ion-grid>

      <ion-fab vertical="bottom" horizontal="center" slot="fixed">
        <ion-fab-button @click="addNewToGallery()">
          <ion-icon :icon="camera"></ion-icon>
        </ion-fab-button>
      </ion-fab>
    </ion-content>
  </ion-page>
</template>

请记住，从 photos 数组中移除照片会自动触发 cachePhotos 方法。

🌐 Remember that removing the photo from the photos array triggers the cachePhotos method for us automatically.

再次点击一张照片，然后选择“删除”选项。照片已删除！使用实时重载实现速度更快。💪

🌐 Tap on a photo again and choose the “Delete” option. The photo is deleted! Implemented much faster using Live Reload. 💪

note

记住，你可以在这里找到这个应用的完整源代码。

在本教程的最后部分，我们将引导你了解用于构建应用并将其部署到用户设备的 Appflow 产品的基础知识。

🌐 In the final portion of this tutorial, we’ll walk you through the basics of the Appflow product used to build and deploy your application to users' devices.

实时重新加载​

删除照片​

目录

实时重新加载

删除照片