核心概念

对于完全不熟悉 Ionic 应用开发的人来说，了解项目背后的核心理念、概念和工具的高级概览会很有帮助。在深入复杂主题之前，我们将介绍 Ionic 框架的基础知识，以及它是如何工作的。

🌐 For those completely new to Ionic app development, it can be helpful to get a high-level understanding of the core philosophy, concepts, and tools behind the project. Before diving into complex topics, we'll cover the basics of what Ionic Framework is, and how it works.

UI 组件

🌐 UI Components

Ionic 框架是一个 UI 组件库，这些组件是可重复使用的元素，用作应用的构建模块。Ionic 组件使用 HTML、CSS 和 JavaScript 按照网络标准构建。虽然这些组件是预制的，但它们从零开始设计，具有高度的可定制性，因此应用可以对每个组件进行个性化，使每个应用拥有自己的外观和感觉。更具体地说，Ionic 组件可以轻松进行主题化，从而在整个应用中全局更改外观。有关自定义外观的更多信息，请参见主题化。

🌐 Ionic Framework is a library of UI Components, which are reusable elements that serve as the building blocks for an application. Ionic Components are built with web standards using HTML, CSS, and JavaScript. Though the components are pre-built, they're designed from the ground up to be highly customizable so apps can make each component their own, allowing each app to have its own look and feel. More specifically, Ionic components can be easily themed to globally change appearance across an entire app. For more information about customizing the look, please see Theming.

自适应样式

🌐 Adaptive Styling

自适应样式是 Ionic 框架的内置功能，它允许应用开发者为多个平台使用相同的代码库。每个 Ionic 组件都会根据应用运行的平台调整其外观。例如，苹果设备，如 iPhone 和 iPad，使用苹果自有的 iOS 设计语言。类似地，安卓设备使用谷歌的设计语言，称为 Material Design。

通过在各个平台之间进行细微的设计更改，为用户提供熟悉的应用体验。从苹果应用商店下载的 Ionic 应用将使用 iOS 主题，而从 Android 的 Play 商店下载的 Ionic 应用将使用 Material Design 主题。对于通过浏览器以渐进式网页应用（PWA）形式查看的应用，Ionic 默认使用 Material Design 主题。此外，在某些场景下选择使用哪个平台是完全可配置的。有关自适应样式的更多信息，请参见 Theming。

🌐 By making subtle design changes between the platforms, users are provided with a familiar app experience. An Ionic app downloaded from Apple's App Store will get the iOS theme, while an Ionic app downloaded from Android's Play Store will get the Material Design theme. For the apps that are viewed as a Progressive Web App (PWA) from a browser, Ionic will default to using the Material Design theme. Additionally, deciding which platform to use in certain scenarios is entirely configurable. More information about adaptive styling can be found in Theming.

导航

🌐 Navigation

传统的网页应用使用线性历史，这意味着用户导航到一个页面后，可以点击后退按钮返回。 一个例子是浏览维基百科，用户在浏览器的线性历史堆栈上前进和后退。

🌐 Traditional web apps use a linear history, meaning that the user navigates forward to a page and can hit the back button to navigate back. An example of this is clicking around Wikipedia where the user is going forward and backward on the browser's linear history stack.

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

🌐 In contrast, mobile apps often utilize parallel, "non-linear" navigation. For example, a tabbed interface can have separate navigation stacks for each tab, making sure the user never loses their place as they navigate and switch between tabs.

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

🌐 Ionic apps embrace this mobile navigation approach, supporting parallel navigation histories that can also be nested, all while maintaining the familiar browser-style navigation concepts web developers are familiar with.

对于使用 Angular 和 @ionic/angular 构建的应用，我们推荐使用 Angular Router ，它是每个新的 Ionic 4 Angular 应用开箱即用的功能。

原生访问

🌐 Native Access

使用网页技术构建的应用（例如 Ionic 应用！）的一个惊人特点是，它几乎可以运行在任何平台上：台式计算机、手机、平板电脑、汽车、冰箱等等！Ionic 应用的相同代码库可以在许多平台上运行，因为它基于网络标准和这些平台共享的通用 API。

🌐 An amazing feature of apps built with web technologies (such as Ionic apps!) is that it can run on virtually any platform: desktop computers, phones, tablets, cars, refrigerators, and more! The same code base for Ionic apps can work on many platforms because it is based on web standards and common APIs that are shared across these platforms.

Ionic 最常见的用例之一是构建一个可以从 App Store 和 Play Store下载的应用。iOS 和 Android 软件开发工具包（SDK）都提供Web 视图，可以渲染任何 Ionic 应用，同时仍然允许 完全 访问原生 SDK。

像 Capacitor 和 Cordova 这样的项目通常用于为Ionic应用提供对原生SDK的访问。这意味着开发者可以使用常见的网页开发工具快速构建应用，并且仍然可以访问设备的加速度计、相机、GPS等原生功能。

主题化

🌐 Theming

在核心，Ionic Framework 是使用 CSS 构建的，这使我们能够利用 CSS 属性（变量） 提供的灵活性。这使得设计一个外观出色且符合网页标准的应用变得非常容易。我们提供了一套颜色，以便开发者可以有一些很好的默认选项，但我们鼓励重写它们，以创建与品牌、公司或所需的色彩方案相匹配的设计。从应用的背景颜色到文本颜色，一切都是完全可自定义的。有关应用主题的更多信息，请参见 Theming。

事件

🌐 Events

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

🌐 Many Ionic components use CustomEvent to inform developers of important state changes in the components. For example, an ion-datetime component will emit ionChange whenever the selected date has changed.

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

🌐 Developers can use standard events such as click as they normally would. However, many events emitted within a component's shadow root will be retargeted to the host element. This may result in multiple click handlers executing even if the user only clicked once. As a result, developers should rely on Ionic's events to be properly informed of state changes on Ionic components. Ionic's events are prefixed with ion to avoid collisions with standard events. Each component's documentation page has a list of available events that developers can listen for in their applications.

属性

🌐 Properties

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

🌐 Properties are JavaScript properties that can be set on Ionic components to configure their behavior and appearance. Properties are defined in each component's API documentation page.

响应式属性

🌐 Reactive Properties

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

🌐 Reactive properties automatically update the component when their values change. These are the most common type of property in Ionic components.

<ion-button color="primary">Primary Button</ion-button>

color 属性是一个响应式属性，用于配置按钮的显示方式。如果在初始渲染后更改 color 的值，按钮将会更新以反映新的值。

🌐 The color property is a reactive property that configures how the button appears. If you change the color value after the initial render, the button will update to reflect the new value.

虚拟属性

🌐 Virtual Properties

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

🌐 Virtual properties are designed for one-time configuration during component initialization. They do not trigger re-renders when updated.

<ion-button mode="ios">iOS Style Button</ion-button> <ion-button mode="md">Material Design Button</ion-button>

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

🌐 The mode property is a virtual property that determines which platform styles to use for a component. It can be set at the component level or globally through the app configuration. In both cases, it's set once during initialization and doesn't change during the component's lifecycle.

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

🌐 For more information on Ionic modes, read the Platform Styles documentation.