Skip to main content

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

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

¥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 的 实时重新加载功能 来提高构建 Ionic 应用时的生产力。激活后，实时重新加载将在检测到应用中的更改时重新加载浏览器和/或 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 吗？这就是在浏览器中运行的 Live Reload，使我们能够快速迭代。

¥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 并在设备上打开应用后，让我们实现照片删除功能。打开 tab2.page.html 并向每个 <ion-img> 元素添加一个新的单击处理程序。当应用用户点击图库中的照片时，我们将显示 动作表 对话框，其中包含删除所选照片或取消（关闭）对话框的选项。

¥With Live Reload running and the app open on your device, let’s implement photo deletion functionality. Open tab2.page.html and add a new click handler to each <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.

<ion-col size="6" *ngFor="let photo of photoService.photos; index as position">
  <ion-img [src]="photo.webviewPath" (click)="showActionSheet(photo, position)"></ion-img>
</ion-col>

在 tab2.page.ts 中，导入 Action Sheet 并将其添加到构造函数中：

¥Over in tab2.page.ts, import Action Sheet and add it to the constructor:



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



constructor(public photoService: PhotoService,
            public actionSheetController: ActionSheetController) {}

将 UserPhoto 添加到导入语句中。

¥Add UserPhoto to the import statement.

import { PhotoService, UserPhoto } from '../services/photo.service';

接下来，实现 showActionSheet() 功能。我们添加两个选项：Delete 调用 PhotoService 的 deletePicture() 函数（接下来要添加）和 Cancel，当赋予“取消”角色时，将自动关闭操作表：

¥Next, implement the showActionSheet() function. We add two options: Delete that calls PhotoService’s deletePicture() function (to be added next) and Cancel, which when given the role of “cancel” will automatically close the action sheet:

public async showActionSheet(photo: UserPhoto, position: number) {
  const actionSheet = await this.actionSheetController.create({
    header: 'Photos',
    buttons: [{
      text: 'Delete',
      role: 'destructive',
      icon: 'trash',
      handler: () => {
        this.photoService.deletePicture(photo, position);
      }
    }, {
      text: 'Cancel',
      icon: 'close',
      role: 'cancel',
      handler: () => {
        // Nothing to do, action sheet is automatically closed
        }
    }]
  });
  await actionSheet.present();
}

保存我们刚刚编辑的两个文件。照片库应用将自动重新加载，现在当我们点击图库中的一张照片时，就会显示操作表。点击“删除”还不会执行任何操作，因此请返回代码编辑器。

¥Save both of the files we just edited. The Photo Gallery app will reload automatically, and now when we tap on one of the photos in the gallery, the action sheet displays. Tapping “Delete” doesn’t do anything yet, so head back into your code editor.

在 src/app/services/photo.service.ts 中，添加 deletePicture() 函数：

¥In src/app/services/photo.service.ts, add the deletePicture() function:

public async deletePicture(photo: UserPhoto, position: number) {
  // Remove this photo from the Photos reference data array
  this.photos.splice(position, 1);

  // Update photos array cache by overwriting the existing photo array
  Preferences.set({
    key: this.PHOTO_STORAGE,
    value: JSON.stringify(this.photos)
  });

  // delete photo file from filesystem
  const filename = photo.filepath
                      .substr(photo.filepath.lastIndexOf('/') + 1);

  await Filesystem.deleteFile({
    path: filename,
    directory: Directory.Data
  });
}

首先从照片数组中删除所选照片。然后，我们使用 Capacitor Preferences API 来更新 Photos 数组的缓存版本。最后，我们使用文件系统 API 删除实际的照片文件本身。

¥The selected photo is removed from the Photos array first. Then, we use the Capacitor Preferences API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API.

保存此文件，然后再次点击照片并选择“删除”选项。这次，照片被删除了！使用实时重新加载可以更快地实现。💪

¥Save this file, then tap on a photo again and choose the “Delete” option. This time, the photo is deleted! Implemented much faster using Live Reload. 💪

在本教程的最后部分，我们将引导你了解用于构建应用并将其部署到用户设备的 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.

目录