核心概念

对于那些完全不熟悉 Ionic 应用开发的人来说，深入了解项目背后的核心理念、概念和工具会很有帮助。在深入讨论复杂的主题之前，我们将介绍 Ionic Framework 是什么及其工作原理的基础知识。

¥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 Framework 是一个 UI 组件库，这些组件是可重用的元素，用作应用的构建块。Ionic 组件是使用 HTML、CSS 和 JavaScript 使用 Web 标准 构建的。尽管这些组件是预先构建的，但它们从一开始就被设计为高度可定制的，因此应用可以使每个组件成为自己的组件，从而使每个应用都有自己的外观和感觉。更具体地说，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 Framework 的内置功能，它允许应用开发者在多个平台上使用相同的代码库。每个 Ionic 组件都会根据应用运行的平台调整其外观。例如，苹果设备，例如 iPhone 和 iPad，使用苹果自己的 iOS 设计语言。同样，Android 设备使用 Google 的设计语言，称为 材料设计。

¥Adaptive Styling is a built-in feature of Ionic Framework which allows app developers to use the same code base for multiple platforms. Every Ionic component adapts its look to the platform on which the app is running on. For example, Apple devices, such as the iPhone and iPad, use Apple's own iOS design language. Similarly, Android devices use Google's design language called Material Design.

通过在平台之间进行细微的设计更改，为用户提供了熟悉的应用体验。从 Apple 的 App Store 下载的 Ionic 应用将获得 iOS 主题，而从 Android 的 Play Store 下载的 Ionic 应用将获得 Material Design 主题。对于从浏览器中视为渐进式 Web 应用 (PWA) 的应用，Ionic 将默认使用 Material Design 主题。此外，决定在某些情况下使用哪个平台是完全可配置的。有关自适应样式的更多信息可以在 主题化 中找到。

¥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.

相比之下，移动应用通常使用并行的 "non-linear" 导航。例如，选项卡式界面可以为每个选项卡提供单独的导航堆栈，以确保用户在选项卡之间导航和切换时不会丢失其位置。

¥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 构建的应用，我们建议使用每个新的 Ionic 4 Angular 应用开箱即用的 角度路由。

¥For apps that are built with Angular and @ionic/angular, we recommend using the Angular Router which comes out of the box for every new Ionic 4 Angular app.

原生访问

¥Native Access

使用 Web 技术构建的应用（例如 Ionic 应用！）的一个惊人功能是它几乎可以在任何平台上运行：台式电脑、手机、平板电脑、汽车、冰箱等等！Ionic 应用的相同代码库可以在许多平台上运行，因为它基于 Web 标准和在这些平台之间共享的通用 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 最常见的用例之一是构建一个可以从 应用商店 和 应用商店 下载的应用。iOS 和 Android 软件开发套件 (SDK) 均提供 网页浏览量，可渲染任何 Ionic 应用，同时仍允许完整原生 SDK 访问。

¥One of the most common use cases for Ionic is to build an app which can be downloaded from both the App Store and Play Store. Both iOS and Android software development kits (SDKs) provide Web Views which render any Ionic app, while still allowing for full Native SDK access.

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

¥Projects such as Capacitor and Cordova are commonly used to give Ionic apps this access to Native SDKs. This means developers can quickly build out an app using common web development tools, and still have access to native features such as the device's accelerometer, camera, GPS, and more.

主题化

¥Theming

Ionic Framework 的核心是使用 CSS 构建的，这使我们能够利用 CSS 属性（变量） 提供的灵活性。这使得设计一个在遵循 Web 标准的同时看起来很棒的应用变得非常容易。我们提供了一组颜色，以便开发者可以拥有一些很好的默认值，但我们鼓励覆盖它们来创建与品牌、公司或所需调色板相匹配的设计。从应用的背景颜色到文本颜色的所有内容都是完全可定制的。有关应用主题的更多信息可以在 主题化 中找到。

¥At the core, Ionic Framework is built using CSS which allows us to take advantage of the flexibility that CSS properties (variables) provide. This makes it incredibly easy to design an app that looks great while following the web standard. We provide a set of colors so developers can have some great defaults, but we encourage overriding them to create designs that match a brand, company or a desired color palette. Everything from the background color of an application to the text color is fully customizable. More information on app theming can be found in 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。然而，组件的 影子根 内发出的许多事件对于主机元素来说将是 retargeted。即使用户只单击一次，这也可能会导致执行多个 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.