核心概念

對於完全不熟悉 Ionic 應用程式開發的人來說，了解該專案背後的核心理念、概念和工具的概括性理解會很有幫助。在深入探討複雜的主題之前，我們將介紹 Ionic Framework 是什麼以及它是如何運作的基礎知識。

UI 元件

Ionic Framework 是一個 UI 元件庫，這些元件是可以重複使用的元素，作為應用程式的建構區塊。Ionic 元件是使用 HTML、CSS 和 JavaScript 的網路標準建構的。儘管元件是預先建構的，但它們從頭開始設計為高度可自訂，因此應用程式可以使每個元件具有其獨特性，從而使每個應用程式都有自己的外觀和風格。更具體地說，可以輕鬆地為 Ionic 元件設定主題，以全域方式變更整個應用程式的外觀。有關自訂外觀的更多資訊，請參閱主題化。

自適應樣式

自適應樣式是 Ionic Framework 的內建功能，可讓應用程式開發人員為多個平台使用相同的程式碼庫。每個 Ionic 元件都會根據應用程式執行的平台調整其外觀。例如，iPhone 和 iPad 等 Apple 裝置使用 Apple 自己的iOS 設計語言。同樣，Android 裝置使用 Google 的設計語言，稱為Material Design。

透過在平台之間進行細微的設計變更，使用者將獲得熟悉的應用程式體驗。從 Apple 的 App Store 下載的 Ionic 應用程式將獲得 iOS 主題，而從 Android 的 Play Store 下載的 Ionic 應用程式將獲得 Material Design 主題。對於從瀏覽器中以漸進式網頁應用程式 (PWA) 查看的應用程式，Ionic 將預設使用 Material Design 主題。此外，決定在特定情況下使用哪個平台是完全可設定的。有關自適應樣式的更多資訊，請參閱主題化。

導覽

傳統的網頁應用程式使用線性歷史記錄，這表示使用者會向前導覽至頁面，並可以按一下返回按鈕以向後導覽。其中一個範例是點擊維基百科，使用者在瀏覽器的線性歷史記錄堆疊上向前和向後移動。

相反地，行動應用程式通常會使用平行「非線性」導覽。例如，索引標籤介面可以為每個索引標籤設定不同的導覽堆疊，確保使用者在導覽和切換索引標籤時永遠不會迷失方向。

Ionic 應用程式採用這種行動導覽方法，支援可以巢狀化的平行導覽歷史記錄，同時保持網頁開發人員熟悉的瀏覽器樣式導覽概念。

對於使用 Angular 和 @ionic/angular 建置的應用程式，我們建議使用Angular Router，它適用於每個新的 Ionic 4 Angular 應用程式。

原生存取

使用網路技術（例如 Ionic 應用程式！）建置的應用程式的驚人功能之一是它幾乎可以在任何平台上執行：桌上型電腦、手機、平板電腦、汽車、冰箱等！Ionic 應用程式的相同程式碼庫可以在許多平台上運作，因為它基於網路標準和這些平台之間共用的通用 API。

Ionic 最常見的用例之一是建置可以從App Store和Play Store下載的應用程式。iOS 和 Android 軟體開發套件 (SDK) 都提供網頁檢視，可轉譯任何 Ionic 應用程式，同時仍允許完整原生 SDK 存取。

Capacitor和Cordova等專案通常用於為 Ionic 應用程式提供對原生 SDK 的存取權限。這表示開發人員可以使用常見的網頁開發工具快速建置應用程式，並且仍然可以存取原生功能，例如裝置的加速計、相機、GPS 等。

主題化

核心而言，Ionic Framework 是使用CSS建置的，這讓我們可以利用CSS 屬性 (變數)提供的彈性。這使得設計一個外觀精美且遵循網路標準的應用程式變得非常容易。我們提供一組色彩，讓開發人員有一些很好的預設值，但我們鼓勵覆寫它們以建立符合品牌、公司或所需色彩配置的設計。從應用程式的背景顏色到文字顏色，一切都可以完全自訂。有關應用程式主題的更多資訊，請參閱主題化。

事件

許多 Ionic 元件使用CustomEvent來通知開發人員元件中重要的狀態變更。例如，ion-datetime 元件會在選取的日期變更時發出 ionChange。

開發人員可以像平常一樣使用標準事件，例如 click。但是，元件陰影根內發出的許多事件將被重新定向至主機元素。即使使用者只點擊一次，也可能會導致執行多個 click 處理常式。因此，開發人員應依賴 Ionic 的事件來正確得知 Ionic 元件上的狀態變更。Ionic 的事件會加上 ion 前綴，以避免與標準事件衝突。每個元件的文件頁面都有開發人員可以在應用程式中監聽的可用事件清單。