跳到主要内容
版本:v8

核心概念

对于完全初学 Ionic 应用开发的人来说,了解项目背后的核心理念、概念和工具会非常有帮助。在深入复杂主题之前,我们先介绍 Ionic Framework 是什么以及它是如何工作的基础内容。

UI 组件

Ionic Framework 是一个 UI 组件库,这些可复用的元素构成了应用的构建块。Ionic 组件基于 Web 标准,使用 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 主题。对于在浏览器中作为渐进式 Web 应用(PWA)查看的应用,Ionic 默认使用 Material Design 主题。此外,在某些场景下决定使用哪个平台是完全可配置的。更多关于自适应样式的信息可以在主题中找到。

导航

传统的 Web 应用使用线性历史记录,这意味着用户向前导航到某个页面,然后可以按返回按钮回到上一页。 一个例子是在 Wikipedia 中点击浏览,用户在线性历史记录堆栈中前进和后退。

相比之下,移动应用通常使用并行的"非线性"导航。例如,标签式界面可以为每个标签页设置独立的导航堆栈,确保用户在导航和在标签页之间切换时不会丢失位置。

Ionic 应用采用了这种移动导航方式,支持并行导航历史记录,且这些记录可以嵌套,同时保持了 Web 开发者熟悉的浏览器风格导航概念。

对于使用 Angular 和 @ionic/angular 构建的应用,我们推荐使用每个新的 Ionic 4 Angular 应用都自带的 Angular Router

原生访问

使用 Web 技术构建的应用(如 Ionic 应用!)的一个惊人特性是它几乎可以在任何平台上运行:台式电脑、手机、平板电脑、汽车、冰箱等!Ionic 应用可以在多个平台上使用相同的代码库,因为它基于这些平台共有的 Web 标准和通用 API。

Ionic 最常见的用途之一是构建可以从 App StorePlay Store 下载的应用。iOS 和 Android 的软件开发工具包(SDK)都提供了 Web View 来渲染任何 Ionic 应用,同时仍然允许访问完整的原生 SDK。

CapacitorCordova 这样的项目通常用于为 Ionic 应用提供对原生 SDK 的访问。这意味着开发者可以使用常见的 Web 开发工具快速构建应用,同时仍然可以访问设备的加速计、摄像头、GPS 等原生功能。

主题

Ionic Framework 的核心是使用 CSS 构建的,这使我们能够利用 CSS 属性(变量)提供的灵活性。这使得设计外观出色的应用变得非常容易,同时遵循 Web 标准。我们提供了一组颜色,让开发者拥有一些优秀的默认值,但我们鼓励覆盖这些颜色,以创建与品牌、公司或所需调色板匹配的设计。从应用的背景颜色到文本颜色,一切都是完全可定制的。有关应用主题的更多信息,请参阅主题

事件

许多 Ionic 组件使用 CustomEvent 来通知开发者组件中的重要状态变化。例如,当所选日期发生变化时,ion-datetime 组件会触发 ionChange 事件。

开发者可以像往常一样使用标准事件(如 click)。然而,在组件的 shadow root 内触发的事件将会被重新定向到宿主元素。这可能导致即使只点击了一次,也会有多个 click 处理程序执行。因此,开发者应依赖 Ionic 的事件来正确获取 Ionic 组件的状态变化信息。Ionic 的事件以 ion 为前缀,以避免与标准事件冲突。每个组件的文档页面都列出了开发者可以在其应用中监听的可用事件。

属性

属性是可以在 Ionic 组件上设置的 JavaScript 属性,用于配置其行为和外观。每个组件的 API 文档页面中都定义了相关属性。

响应式属性

响应式属性会在其值发生变化时自动更新组件。这是 Ionic 组件中最常见的属性类型。

<ion-button color="primary">主要按钮</ion-button>

color 属性是一个响应式属性,用于配置按钮的外观。如果在初始渲染后更改了 color 值,按钮将更新以反映新值。

虚拟属性

虚拟属性设计用于在组件初始化期间进行一次性配置。更新时不会触发重新渲染。

<ion-button mode="ios">iOS 样式按钮</ion-button> <ion-button mode="md">Material Design 按钮</ion-button>

mode 属性是一个虚拟属性,决定组件使用哪个平台的样式。它可以在组件级别设置,也可以通过应用配置全局设置。无论哪种情况,它都在初始化时设置一次,并且在组件的生命周期内不会改变。

有关 Ionic 模式的更多信息,请阅读平台样式文档