跳至主要內容
版本:v8

Ionic 簡介

Ionic 是一個開源 UI 工具組,可使用 Web 技術(HTML、CSS 和 JavaScript)建置高效能、高品質的行動應用程式,並整合了 AngularReactVue 等熱門框架。

開始建置,請安裝 Ionic 或依照我們的第一個應用程式教學來學習主要概念。

安裝指南

設定系統和安裝框架的逐步指南。

UI 元件

深入了解 Ionic 精美設計的 UI 元件庫。

原生功能

整合藍牙、地圖、HealthKit 等原生裝置外掛程式。

主題

學習如何輕鬆自訂和修改 Ionic 應用程式的視覺設計,以符合您的品牌。

概觀

Ionic 專注於應用程式的前端 UX 和 UI 互動,包括 UI 控制項、互動、手勢和動畫。它易於學習,並與其他程式庫或框架(例如 AngularReactVue)整合。或者,它也可以在不使用任何前端框架的情況下,透過簡單的 指令碼包含獨立使用。如果您想在深入了解之前進一步了解 Ionic,我們製作了一段影片來引導您了解基本概念。

單一程式碼庫,隨處執行

Ionic 是唯一可讓 Web 開發人員從單一程式碼庫為所有主要應用程式商店和行動 Web 建置應用程式的行動應用程式堆疊。透過自適應樣式,Ionic 應用程式在每個裝置上看起來和感覺都像在主頁一樣。

專注於效能

Ionic 的設計宗旨是讓它在最新的行動裝置上表現出色,並具有高效的硬體加速轉換和觸控最佳化手勢等最佳實務。

簡潔、簡單且實用的設計

Ionic 的設計宗旨是讓它在所有目前的行動裝置和平台上都能正常運作並美觀地顯示。透過現成的元件、印刷術和可適應每個平台的華麗(但可擴充)基礎主題,您將可以輕鬆地建置樣式。

原生和 Web 最佳化

Ionic 模擬原生應用程式 UI 指南,並使用原生 SDK,將原生應用程式的 UI 標準和裝置功能與開放 Web 的完整能力和彈性結合在一起。Ionic 使用 Capacitor(或 Cordova)以原生方式部署,或在瀏覽器中作為漸進式 Web 應用程式執行。

目標

跨平台

建置和部署可在多個平台(例如原生 iOS、Android 和作為漸進式 Web 應用程式的 Web)上運作的應用程式,所有這些都使用一個程式碼庫。撰寫一次,隨處執行。

以 Web 標準為基礎

Ionic 建置於可靠的標準化 Web 技術:HTML、CSS 和 JavaScript 之上,並使用現代 Web API(例如自訂元素和 Shadow DOM)。因此,Ionic 元件具有穩定的 API,且不受單一平台供應商的限制。

美觀的設計

簡潔、簡單且實用。Ionic 的設計宗旨是讓它在所有平台上都能正常運作並美觀地顯示。從預先設計的元件、印刷術、互動模式和華麗(但可擴充)的基礎主題開始。

簡單性

Ionic 的設計宗旨是簡單,因此建置應用程式既愉快、易於學習,且幾乎所有具有 Web 開發技能的人員都可以存取。

框架相容性

雖然 Ionic 的過去版本與 Angular 緊密結合,但框架的 4.x 版已重新設計為獨立的 Web 元件程式庫,並整合了最新的 JavaScript 框架,例如 Angular。Ionic 可以在大多數前端框架中成功使用,包括 React 和 Vue,但有些框架需要 shim 才能完整支援 Web 元件。

JavaScript

將 Ionic 遷移到 Web 元件的主要目標之一是移除對單一框架託管元件的任何硬性要求。這使得核心元件可以在僅使用指令碼標記的網頁中獨立運作。雖然使用框架對於較大的團隊和較大的應用程式來說很棒,但現在甚至可以在 WordPress 等環境中,將 Ionic 作為單頁中的獨立程式庫使用。

Angular

Angular 一直是讓 Ionic 變得出色的核心。雖然核心元件已編寫為獨立的 Web 元件程式庫,但 @ionic/angular 套件使與 Angular 生態系統的整合變得輕而易舉。@ionic/angular 包含 Angular 開發人員從 Ionic 2/3 中預期的所有功能,並與核心 Angular 程式庫(例如 Angular 路由器)整合。

React

Ionic 現在正式支援熱門的 React 程式庫。Ionic React 讓 React 開發人員可以使用其現有的 Web 技能來建置以 iOS、Android 和 Web 為目標的應用程式。透過 @ionic/react,您可以使用所有核心 Ionic 元件,但使用方式感覺就像使用原生 React 元件一樣。

Vue

Ionic 現在正式支援熱門的 Vue 3 程式庫。Ionic Vue 讓 Vue 開發人員可以使用其現有的 Web 技能來建置以 iOS、Android 和 Web 為目標的應用程式。透過 @ionic/vue,您可以使用所有核心 Ionic 元件,但使用方式感覺就像使用原生 Vue 元件一樣。

未來支援

未來版本將考慮支援其他框架。

Ionic CLI

官方的 Ionic CLI,或稱命令列介面,是一個能夠快速建立 Ionic 應用程式的工具,並為 Ionic 開發者提供許多有用的命令。除了安裝和更新 Ionic 外,CLI 還內建了開發伺服器、建置和除錯工具等等。如果您是 Appflow 的成員,則可以使用 CLI 來執行雲端建置和部署,並管理您的帳戶。

Appflow

為了協助建置、部署和管理 Ionic 應用程式的整個生命週期,我們為生產應用程式提供了一項商業服務,稱為 Appflow,這與開源框架是分開的。

Appflow 協助開發者和團隊從集中式儀表板編譯原生應用程式建置,並將即時程式碼更新部署到 Ionic 應用程式。可選購付費升級方案以獲得更進階的功能,例如直接發佈到應用程式商店、工作流程自動化、單一登入 (SSO) 以及存取連線的服務和整合。

Appflow 需要一個 Ionic 帳戶,並為那些有興趣試用其部分功能的人提供免費的「愛好者」方案。

生態系統

Ionic 由核心團隊積極開發和全職維護,其生態系統則由國際開發者和貢獻者社群引導,推動其成長和採用。無論是小型或大型的開發者和公司都使用 Ionic 來建置和發布能在各處運行的出色應用程式。

加入社群

全球有超過 200 個國家/地區數百萬名 Ionic 開發者。以下是一些加入的方式:

  • 論壇: 這是提出問題和分享想法的好地方。
  • Twitter: 我們會在上面發布更新並分享來自 Ionic 社群的內容。
  • GitHub: 若要回報錯誤或要求新功能,請在此處建立一個 issue。歡迎提交 PR!
  • 內容撰寫: 撰寫技術部落格或與 Ionic 社群分享您的故事。

授權條款

Ionic UI 工具組是一個免費的開源專案,根據允許的 MIT 授權條款 發布。這表示它可以免費在個人或商業專案中使用。MIT 是與 jQuery 和 Ruby on Rails 等熱門專案相同的授權條款。

本文件內容(可在 ionic-docs 儲存庫中找到)根據 Apache 2 授權條款 授權。

查看原始碼