Ionic 简介

Ionic 是一个开源 UI 工具包，用于使用 Web 技术（HTML、CSS 和 JavaScript）构建高性能、高质量的移动应用，并集成了 Angular、React 和 Vue 等流行框架。

¥Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like Angular, React, and Vue.

通过 安装 Ionic 开始构建或按照我们的 第一个应用教程 学习主要概念。

¥Get started building by installing Ionic or following our First App Tutorial to learn the main concepts.

安装指南

设置系统和安装框架的分步指南。

UI 组件

深入研究 Ionic 设计精美的 UI 组件库。

原生功能

集成原生设备插件，例如蓝牙、地图、HealthKit 等。

主题化

了解如何轻松自定义和修改 Ionic 应用的视觉设计以适合你的品牌。

概述

¥Overview

Ionic 专注于应用的前端 UX 和 UI 交互 - UI 控件、交互、手势、动画。它很容易学习，并且可以与其他库或框架集成，例如 Angular、React 或 Vue。或者，它可以使用简单的 脚本引入 独立使用，无需任何前端框架。如果你想在深入了解 Ionic 之前了解更多信息，我们 创建了一个视频 将引导你了解基础知识。

¥Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as Angular, React, or Vue. Alternatively, it can be used standalone without any frontend framework using a simple script include. If you’d like to learn more about Ionic before diving in, we created a video to walk you through the basics.

一套代码库，随处运行

¥One codebase, running everywhere

Ionic 是唯一一个移动应用堆栈，使 Web 开发者能够从单个代码库为所有主要应用商店和移动网络构建应用。借助 自适应样式，Ionic 应用在每台设备上看起来和感觉都很自在。

¥Ionic is the only mobile app stack that enables web developers to build apps for all major app stores and the mobile web from a single codebase. And with Adaptive Styling, Ionic apps look and feel at home on every device.

注重性能

¥A focus on performance

Ionic 旨在在最新的移动设备上实现出色的性能和表现，并采用高效硬件加速转换和触摸优化手势等最佳实践。

¥Ionic is built to perform and behave great on the latest mobile devices with best practices like efficient hardware accelerated transitions, and touch-optimized gestures.

干净、简单且实用的设计

¥Clean, simple, and functional design

Ionic 旨在在所有当前的移动设备和平台上完美地工作和显示。借助现成的组件、版式和适合每个平台的华丽（但可扩展）的基本主题，你将能够以样式的方式进行构建。

¥Ionic is designed to work and display beautifully on all current mobile devices and platforms. With ready-made components, typography, and a gorgeous (yet extensible) base theme that adapts to each platform, you'll be building in style.

原生和 Web 优化

¥Native and Web optimized

Ionic 模仿原生应用 UI 准则并使用原生 SDK，将原生应用的 UI 标准和设备功能与开放网络的全部功能和灵活性结合在一起。Ionic 使用 Capacitor（或 Cordova）进行原生部署，或作为渐进式 Web 应用在浏览器中运行。

¥Ionic emulates native app UI guidelines and uses native SDKs, bringing the UI standards and device features of native apps together with the full power and flexibility of the open web. Ionic uses Capacitor (or Cordova) to deploy natively, or runs in the browser as a Progressive Web App.

目标

¥Goals

跨平台

¥Cross-platform

构建和部署跨多个平台工作的应用，例如原生 iOS、Android 和作为渐进式 Web 应用的 Web - 所有这些都具有一个代码库。编写一次，随处运行。

¥Build and deploy apps that work across multiple platforms, such as native iOS, Android, and the web as a Progressive Web App - all with one code base. Write once, run anywhere.

基于 Web 标准

¥Web Standards-based

Ionic 建立在可靠的 标准化网络技术 之上：HTML、CSS 和 JavaScript，使用现代 Web API，例如自定义元素和 Shadow DOM。因此，Ionic 组件具有稳定的 API，并且不受单个平台供应商的影响。

¥Ionic is built on top of reliable, standardized web technologies: HTML, CSS, and JavaScript, using modern Web APIs such as Custom Elements and Shadow DOM. Because of this, Ionic components have a stable API, and aren't at the whim of a single platform vendor.

漂亮的设计

¥Beautiful Design

干净、简单、实用。Ionic 旨在在所有平台上开箱即用地完美运行和显示。从预先设计的组件、版式、交互范例和华丽（但可扩展）的基本主题开始。

¥Clean, simple, and functional. Ionic is designed to work and display beautifully out-of-the-box across all platforms. Start with pre-designed components, typography, interactive paradigms, and a gorgeous (yet extensible) base theme.

简单

¥Simplicity

Ionic 在构建时考虑到了简单性，因此创建应用是令人愉快的、易于学习的，并且几乎任何具有 Web 开发技能的人都可以使用。

¥Ionic is built with simplicity in mind, so that creating apps is enjoyable, easy to learn, and accessible to just about anyone with web development skills.

框架兼容性

¥Framework Compatibility

虽然 Ionic 的过去版本与 Angular 紧密耦合，但该框架的 4.x 版本经过重新设计，可以作为独立的 Web Component 库工作，并集成了最新的 JavaScript 框架（如 Angular）。Ionic 可以成功地在大多数前端框架中使用，包括 React 和 Vue，尽管某些框架需要 shim 来实现完整的 Web 组件支持。

¥While past releases of Ionic were tightly coupled to Angular, version 4.x of the framework was re-engineered to work as a standalone Web Component library, with integrations for the latest JavaScript frameworks, like Angular. Ionic can be used in most frontend frameworks with success, including React and Vue, though some frameworks need a shim for full Web Component support.

JavaScript

将 Ionic 迁移到 Web Component 的主要目标之一是消除对托管组件的单一框架的任何硬性要求。这使得核心组件可以仅通过脚本标签在网页中独立工作。虽然使用框架对于大型团队和大型应用来说非常有用，但现在即使在 WordPress 等上下文中，也可以在单个页面中使用 Ionic 作为独立库。

¥One of the main goals with moving Ionic to Web Components was to remove any hard requirement on a single framework to host the components. This made it possible for the core components to work standalone in a web page with just a script tag. While working with frameworks can be great for larger teams and larger apps, it is now possible to use Ionic as a standalone library in a single page even in a context like WordPress.

Angular

Angular 一直是 Ionic 很棒的核心。虽然核心组件已编写为独立的 Web 组件库，但 @ionic/angular 包使与 Angular 生态系统的集成变得轻而易举。@ionic/angular 包含 Angular 开发者期望从 Ionic 2/3 获得的所有功能，并与核心 Angular 库集成，例如 Angular 路由。

¥Angular has always been at the center of what makes Ionic great. While the core components have been written to work as a standalone Web Component library, the @ionic/angular package makes integration with the Angular ecosystem a breeze. @ionic/angular includes all the functionality that Angular developers would expect coming from Ionic 2/3, and integrates with core Angular libraries, like the Angular router.

React

Ionic 现在正式支持流行的 React 库。Ionic React 允许 React 开发者使用他们现有的 Web 技能来构建针对 iOS、Android 和 Web 的应用。使用 @ionic/react，你可以使用所有核心 Ionic 组件，但使用方式就像使用原生 React 组件一样。

¥Ionic now has official support for the popular React library. Ionic React lets React developers use their existing web skills to build apps that target iOS, Android, and the web. With @ionic/react, you can use all the core Ionic components, but in a way that feels like using native React components.

Vue

Ionic 现在正式支持流行的 Vue 3 库。Ionic Vue 允许 Vue 开发者使用他们现有的 Web 技能来构建面向 iOS、Android 和 Web 的应用。使用 @ionic/vue，你可以使用所有核心 Ionic 组件，但感觉就像使用原生 Vue 组件一样。

¥Ionic now has official support for the popular Vue 3 library. Ionic Vue lets Vue developers use their existing web skills to build apps that target iOS, Android, and the web. With @ionic/vue, you can use all the core Ionic components, but in a way that feels like using native Vue components.

未来的支持

¥Future Support

未来版本中将考虑对其他框架的支持。

¥Support for other frameworks will be considered in future releases.

Ionic CLI

官方的 Ionic CLI（即命令行接口）是一个可以快速构建 Ionic 应用的工具，并向 Ionic 开发者提供许多有用的命令。除了安装和更新 Ionic 之外，CLI 还附带内置开发服务器、构建和调试工具等等。如果你是 应用流程 成员，CLI 可用于执行云构建和部署以及管理你的账户。

¥The official Ionic CLI, or Command Line Interface, is a tool that quickly scaffolds Ionic apps and provides a number of helpful commands to Ionic developers. In addition to installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more. If you are an Appflow member, the CLI can be used to perform cloud builds and deployments, and administer your account.

应用流程

¥Appflow

为了帮助构建、部署和管理 Ionic 应用的整个生命周期，我们为生产应用提供了名为 应用流程 的商业服务，该服务独立于开源框架。

¥To help build, deploy, and manage Ionic apps throughout their lifecycle, we offer a commercial service for production apps called Appflow, which is separate from the open source Framework.

Appflow 帮助开发者和团队编译原生应用构建，并从集中式仪表板将实时代码更新部署到 Ionic 应用。可选的付费升级可用于更高级的功能，例如直接发布到应用商店、工作流程自动化、单点登录 (SSO) 以及访问连接的服务和集成。

¥Appflow helps developers and teams compile native app builds and deploy live code updates to Ionic apps from a centralized dashboard. Optional paid upgrades are available for more advanced capabilities like publishing directly to app stores, workflow automation, single sign-on (SSO) and access to connected services and integrations.

Appflow 需要 Ionic 账户，并为那些有兴趣尝试其某些功能的人提供免费的“爱好”计划。

¥Appflow requires an Ionic Account and comes with a free “Hobby” plan for those interested in playing around with some of its features.

生态系统

¥Ecosystem

Ionic 由核心团队积极开发和全职维护，其生态系统由国际开发者和贡献者社区指导，推动其发展和采用。大大小小的开发者和公司都使用 Ionic 来构建和发布可在任何地方运行的令人惊叹的应用。

¥Ionic is actively developed and maintained full-time by a core team, and its ecosystem is guided by an international community of developers and contributors fueling its growth and adoption. Developers and companies small and large use Ionic to build and ship amazing apps that run everywhere.

加入社区

¥Join the Community

全球 200 多个国家/地区有数百万 Ionic 开发者。以下是一些加入方式：

¥There are millions of Ionic developers in over 200 countries worldwide. Here are some ways to join:

• 论坛： 提问和分享想法的好地方。

  ¥Forum: A great place for asking questions and sharing ideas.

• 推特： 我们在其中发布更新并分享 Ionic 社区的内容。

  ¥Twitter: Where we post updates and share content from the Ionic community.

• GitHub： 要报告错误或请求新功能，请在此处创建问题。欢迎 PR！

  ¥GitHub: For reporting bugs or requesting new features, create an issue here. PRs welcome!

• 内容创作： 撰写技术博客或与 Ionic 社区分享你的故事。

  ¥Content authoring: Write a technical blog or share your story with the Ionic community.

许可

¥License

Ionic UI Toolkit 是一个免费的开源项目，在允许的 MIT 许可证 下发布。这意味着它可以免费用于个人或商业项目。MIT 与 jQuery 和 Ruby on Rails 等流行项目使用相同的许可证。

¥The Ionic UI Toolkit is a free and open source project, released under the permissible MIT license. This means it can be used in personal or commercial projects for free. MIT is the same license used by such popular projects as jQuery and Ruby on Rails.

此文档内容（在 ionic-docs 存储库中找到）已根据 Apache 2 许可证 获得许可。

¥This documentation content (found in the ionic-docs repo) is licensed under the Apache 2 license.