跳至主要內容
版本：v8

您的第一個 Ionic 應用程式：Vue

Ionic 的厲害之處在於，您只需使用 HTML、CSS 和 JavaScript，即可使用一個程式碼庫為任何平台建置應用程式。請跟著我們逐步學習 Ionic 應用程式開發的基本原理，建立一個真實的應用程式。

以下是在所有 3 個平台上執行的完成應用程式

我們將建置的內容​

我們將建立一個「照片庫」應用程式，讓您可以使用裝置的相機拍照、將其顯示在網格中，並將其永久儲存在裝置上。

重點包括

  • 使用 Ionic Framework UI 元件，在網頁、iOS 和 Android 上執行的單一 Vue 程式碼庫。
  • 使用 Ionic 的官方原生應用程式執行時間 Capacitor 部署為原生 iOS 和 Android 行動應用程式。
  • 由 Capacitor 相機、檔案系統和 偏好設定 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」入門範本的 Ionic Vue 應用程式，並新增 Capacitor 以實現原生功能

ionic start photo-gallery tabs --type vue

這個入門專案隨附三個預先建置的頁面和 Ionic 開發的最佳實務。有了現有的常用建置區塊，我們就可以輕鬆新增更多功能！

接下來，變更至應用程式資料夾

cd photo-gallery

接下來，我們需要安裝必要的 Capacitor 外掛程式，以使應用程式的原生功能正常運作

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

PWA 元素​

某些 Capacitor 外掛程式，包括相機 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);

就這樣！現在到了有趣的部分 – 讓我們看看實際運作的應用程式。

執行應用程式​

在您的殼層中執行此命令

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> 標籤內的匯入，以包含相機圖示以及我們稍後將使用的一些 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 方法以及使用相機和其他原生功能的邏輯。

接下來，開啟 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 建置。

目錄

編輯此頁面