跳过至主要内容
版本：v8

你的第一个 Ionic 应用：Vue

Ionic 的优势在于，使用同一个代码库，你只需用 HTML、CSS 和 JavaScript 就能为任何平台构建应用。让我们通过一步步创建真实的应用来学习 Ionic 应用开发的基础知识。

以下是完成的应用在所有 3 个平台上的运行效果

我们将构建什么​

我们将创建一个照片库应用，它提供使用设备摄像头拍照、在网格中显示照片以及将照片永久存储在设备上的功能。

亮点包括

  • 基于 Vue 的单个代码库，使用 Ionic 框架 UI 组件 在网页、iOS 和 Android 上运行。
  • 使用 Ionic 的官方原生应用运行时 Capacitor 部署为原生 iOS 和 Android 移动应用。
  • 照片库功能由 Capacitor 的 Camera、Filesystem 和 Preferences API 提供。

在 GitHub 上找到本指南中引用的完整应用代码。

下载所需工具​

立即下载并安装以下工具，以确保最佳的 Ionic 开发体验

  • Node.js 用于与 Ionic 生态系统交互。 在此处下载 LTS 版本。
  • 代码编辑器 用于编写代码！我们推荐使用 Visual Studio Code。
  • 命令行界面/终端 (CLI):
    • Windows 用户：为了获得最佳的 Ionic 体验，我们建议使用内置命令行 (cmd) 或 Powershell CLI，并以管理员模式运行。
    • Mac/Linux 用户，几乎任何终端都可以。

安装 Ionic 工具​

在命令行终端中运行以下命令以安装 Ionic CLI (ionic)、native-run（用于在设备和模拟器/仿真器上运行原生二进制文件）和 cordova-res（用于生成原生应用图标和启动画面）

注意

要在 Visual Studio Code 中打开终端，请转至终端 -> 新建终端。

npm install -g @ionic/cli@latest native-run
注意

-g 选项表示全局安装。当包被全局安装时，可能会出现 EACCES 权限错误。

考虑设置 npm 以在没有提升权限的情况下全局运行。有关更多信息，请参阅 解决权限错误。

创建应用​

接下来，创建一个使用“Tabs”启动模板并为原生功能添加 Capacitor 的 Ionic Vue 应用

ionic start photo-gallery tabs --type vue

这个启动项目包含三个预先构建的页面和 Ionic 开发的最佳实践。有了已经存在的常见构建块，我们可以轻松地添加更多功能！

接下来，进入应用文件夹

cd photo-gallery

接下来，我们需要安装必要的 Capacitor 插件才能使应用的原生功能正常工作

npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem

PWA 元素​

一些 Capacitor 插件，包括 Camera API，通过 Ionic 的 PWA 元素库 提供基于网页的功能和 UI。

它是一个独立的依赖项，所以接下来安装它

npm install @ionic/pwa-elements

安装完成后，在您选择的代码编辑器中打开项目。

接下来，通过编辑 src/main.ts 导入 @ionic/pwa-elements。

// Above the createApp() line
import { defineCustomElements } from '@ionic/pwa-elements/loader';
defineCustomElements(window);

就是这样！现在是激动人心的部分 - 让我们看看应用的运行效果。

运行应用​

在您的 shell 中运行此命令

ionic serve

瞧！您的 Ionic 应用现在正在网页浏览器中运行。应用的大部分功能可以在浏览器中构建和测试，这极大地提高了开发和测试速度。

有三个选项卡。点击 Tab2 选项卡。它是一个空白画布，也就是将它变成照片库的完美位置。Ionic CLI 提供实时重载功能，因此当您进行更改并保存它们时，应用会立即更新！

Animated GIF showing the live reload feature in an Ionic app, with changes in code immediately updating the app in a web browser.

打开 /src/views/Tab2.vue。我们看到

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

      <ExploreContainer name="Tab 2 page" />
    </ion-content>
  </ion-page>
</template>

ion-header 代表顶部导航和工具栏，标题为“Tab 2”。让我们将其重命名

<ion-title>Photo Gallery</ion-title>

我们将应用的视觉方面放入 <ion-content> 中。在这种情况下，我们将添加一个按钮，用于打开设备的摄像头以及显示摄像头捕获的图像。但首先，删除 ExploreContainer 组件，从导入语句开始

import ExploreContainer from '@/components/ExploreContainer.vue';

接下来，从 template 中的 HTML 标记中删除 ExploreContainer 节点。

<ExploreContainer name="Tab 2 page" />

我们将用一个 浮动操作按钮 (FAB) 替换它。首先，更新 <script setup> 标签内的导入，以包含 Camera 图标以及我们稍后将使用的一些 Ionic 组件

import { camera, trash, close } from 'ionicons/icons';
import {
  IonPage,
  IonHeader,
  IonFab,
  IonFabButton,
  IonIcon,
  IonToolbar,
  IonTitle,
  IonContent,
  IonGrid,
  IonRow,
  IonCol,
  IonImg,
} from '@ionic/vue';

由于我们的页面使用 Vue 单文件组件 使用 <script setup> 语法生成，因此这些项目现在可以在我们的模板中使用。

将 FAB 添加到页面的底部。使用摄像头图像作为图标，并在点击此按钮时调用 takePhoto() 函数（稍后将实现）

<ion-content :fullscreen="true">
  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button @click="takePhoto()">
      <ion-icon :icon="camera"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

我们将稍后创建 takePhoto 方法以及使用 Camera 和其他原生功能的逻辑。

接下来，打开 src/views/TabsPage.vue，从导入中删除 ellipse 图标，并改为导入 images 图标

import { images, square, triangle } from 'ionicons/icons';

在选项卡栏 (<ion-tab-bar>) 内，将标签更改为“照片”，并将中间选项卡按钮的 ellipse 图标更改为 images

<ion-tab-button tab="tab2" href="/tabs/tab2">
  <ion-icon :icon="images" />
  <ion-label>Photos</ion-label>
</ion-tab-button>

这仅仅是我们可以用 Ionic 做的很多酷炫事情的开始。接下来，我们将实现网页上的摄像头拍摄功能，然后构建 iOS 和 Android 应用。

目录

编辑此页面