Ionic 开发教程：创建 Photo Gallery 应用

Ionic 的优势在于使用单一代码库，仅凭 HTML、CSS 和 JavaScript 就能为任何平台构建应用。在本教程中，我们将通过逐步创建一个实际应用来学习 Ionic 应用开发的基础知识。

我们将创建一个 Photo Gallery 应用，该应用能够使用设备摄像头拍照、在网格中显示照片并永久存储在设备上。

亮点包括：

• 基于 React 的单一代码库，使用 Ionic Framework UI 组件在 Web、iOS 和 Android 上运行。
• 使用 Ionic 官方原生应用运行时 Capacitor 部署为原生 iOS 和 Android 移动应用。
• 由 Capacitor 的 Camera、Filesystem 和 Preferences API 提供支持的相册功能。

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

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

• Node.js 用于与 Ionic 生态系统交互。
• 代码编辑器，例如 Visual Studio Code。
• 命令行界面/终端 (CLI)：Windows 用户建议使用内置命令行或 Powershell（以管理员模式运行）；Mac/Linux 用户可使用任何终端。

在终端中运行以下命令以安装 Ionic CLI、native-run 和 cordova-res：

npm install -g @ionic/cli native-run cordova-res

注意：-g 选项表示全局安装。全局安装时可能出现权限错误；建议配置 npm 以无需提升权限即可全局操作。有关更多信息，请参阅解决权限错误。

接下来，使用 "Tabs" 启动模板创建 Ionic React 应用，并添加 Capacitor 以实现原生功能：

ionic start photo-gallery tabs --type=react

此启动项目包含三个预构建页面和 Ionic 开发的最佳实践，使我们能够轻松添加更多功能。

进入应用文件夹，然后安装必要的 Capacitor 插件：

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

PWA Elements

一些 Capacitor 插件（如 Camera API）通过 Ionic PWA Elements 库提供基于 Web 的功能和 UI。它是一个独立的依赖项，因此接下来安装：

npm install @ionic/pwa-elements

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

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import { defineCustomElements } from '@ionic/pwa-elements/loader';

defineCustomElements(window);

const container = document.getElementById('root');
const root = createRoot(container!);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

现在，让我们看看应用的运行情况。运行应用后，它将在 Web 浏览器中打开。Ionic CLI 具有实时重载功能，因此更改会立即更新。

应用有三个选项卡。点击 "Tab2" 选项卡，这是一个空白画布，非常适合改造成相册。

打开 /src/pages/Tab2.tsx。初始代码如下：

import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab2.css';

const Tab2: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 2</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Tab 2</IonTitle>
          </IonToolbar>
        </IonHeader>
        <ExploreContainer name="Tab 2 page" />
      </IonContent>
    </IonPage>
  );
};

export default Tab2;

IonHeader 代表顶部导航和工具栏。将两个 IonTitle 元素重命名为 "Photo Gallery"：

<IonPage>
  <IonHeader>
    <IonToolbar>
      {/* CHANGE: Update title */}
      <IonTitle>Photo Gallery</IonTitle>
    </IonToolbar>
  </IonHeader>
  <IonContent>
    <IonHeader collapse="condense">
      <IonToolbar>
        {/* CHANGE: Update title */}
        <IonTitle size="large">Photo Gallery</IonTitle>
      </IonToolbar>
    </IonHeader>

    {/* ...existing code... */}
  </IonContent>
</IonPage>

应用的视觉部分放在 <IonContent> 中。我们将添加一个浮动操作按钮 (FAB) 来打开设备摄像头。首先更新导入并添加 FAB：

// CHANGE: Add the following import
import { camera } from 'ionicons/icons';
// CHANGE: Update the following import
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon } from '@ionic/react';
// CHANGE: Remove or comment out `ExploreContainer`
// import ExploreContainer from '../components/ExploreContainer';
import './Tab2.css';

const Tab2: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Photo Gallery</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Photo Gallery</IonTitle>
          </IonToolbar>
        </IonHeader>

        {/* CHANGE: Add the floating action button */}
        <IonFab vertical="bottom" horizontal="center" slot="fixed">
          <IonFabButton>
            <IonIcon icon={camera}></IonIcon>
          </IonFabButton>
        </IonFab>

        {/* CHANGE: Remove or comment out `ExploreContainer` */}
        {/* <ExploreContainer name="Tab 2 page" /> */}
      </IonContent>
    </IonPage>
  );
};

export default Tab2;

接下来，打开 src/App.tsx 并将中间选项卡按钮的标签改为 "Photos"，图标改为 images：

import { Redirect, Route } from 'react-router-dom';
import {
  IonApp,
  IonIcon,
  IonLabel,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs,
  setupIonicReact,
} from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
// CHANGE: Update the following import
import { images, square, triangle } from 'ionicons/icons';
import Tab1 from './pages/Tab1';
import Tab2 from './pages/Tab2';
import Tab3 from './pages/Tab3';

/* ...existing Ionic styles... */

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Route exact path="/tab1">
            <Tab1 />
          </Route>
          <Route exact path="/tab2">
            <Tab2 />
          </Route>
          <Route path="/tab3">
            <Tab3 />
          </Route>
          <Route exact path="/">
            <Redirect to="/tab1" />
          </Route>
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="tab1" href="/tab1">
            <IonIcon aria-hidden="true" icon={triangle} />
            <IonLabel>Tab 1</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab2" href="/tab2">
            {/* CHANGE: Update icon */}
            <IonIcon aria-hidden="true" icon={images} />
            {/* CHANGE: Update label */}
            <IonLabel>Photos</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab3" href="/tab3">
            <IonIcon aria-hidden="true" icon={square} />
            <IonLabel>Tab 3</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

export default App;

这只是 Ionic 所能实现的酷炫功能的开始。接下来，我们将在 Web 上实现摄像头拍照功能，然后为 iOS 和 Android 构建应用。