入门

Ionic Framework 5特点

• 全新的UI组件和手势

全新的图标、颜色和主题
官方React与Angular集成

• 混合开发与原生开发

了解混合应用和原生应用之间的区别。我们打破了所有的神话和误解。

• 跨平台应用，Web构建。

免费且开源，Ionic提供了一个库，其中包含了为移动设备优化的UI组件、手势和工具，用于构建快速、高度交互的应用程序。

• 美观，可重用的组件

在所有的移动设备和平台上，Ionic的UI组件都显示的非常漂亮。从现成的组件、排版和适合每个平台的华丽的基本主题开始。

• 编写一次，到处运行

Ionic允许web开发人员将应用程序作为一个具有单一共享代码库的PWA发送到应用程序商店。有了Ionic的自适应风格，你的应用程序在每个平台和设备上看起来的体验是一样的。

• 开发人员友好的工具

使用强大的CLI创建、编译、测试和部署应用程序。访问特定在线重载、跨平台部署和集成。你甚至可以使用你喜欢的JS框架的CLI。

• 性能至上，快速构建应用程序，比以前更快

Ionic的性能和运行速度可以在所有最新的移动设备上实现。使用小的内存和内置的最佳实践，如硬件加速转换、触摸优化手势、预渲染和AOT编译，构建开箱急用的快速应用程序。

• 框架不敏感，使用您喜欢的框架进行构建

我们不会对你或你的团队喜欢使用的技术栈做任何制约。这就是问什么设计成与所有最好的前端框架无缝继承的原因，包括Angular、React、Vue，甚至不用任何框架与普通的JavaScript集成。

• 原生功能，支持访问设备核心的原生功能

Ionic使得只需要一点JavaScript代码，就可以轻松的访问设备的原生特性。从120多个用于访问相机、地理位置、蓝牙等丰富的原生设备插件库中选择，或者在需要时深入到完整的原生SDK中。你的能力时无限的。

• 一个全球社区，为开发人员构建，值得信赖的企业化

全世界200多个国家的500多万名开发者正在使用Ionic来推动他们的应用程序开发，加入数以千计的全球聚会、论坛和事件，使用Ionic构建是一件乐事。

• 支持集成，是的你可以与之整合

从社区插件到高级支持的集成，Ionic让你无所不包。通过集成到你喜欢的技术栈中来增强你的应用程序工作流。

Ionic Framework是什么？

Ionic Framework是一个开源的UI工具包，用于使用web技术（HTML、CSS和Javascript）构建高性能、高质量的移动和桌面应用程序。
Ionic Framework专注于前端用户体验，或应用程序的UI交互（控制、交互、手势、动画）。它很容易学习，并与其他库或框架（如Angular）很好的集成，或者可以独立使用而无需使用前端框架只需要包含一段简单脚本。
目前，Ionic Framework已经正式集成了Angualr和React，对Vue的支持正在开发中。
Ionic Framework的目标包括以下几个：

• 跨平台

构建和部署可以跨多个平台工作的应用程序，如原生IOS、Android、桌面和Web，作为一个渐进的Web应用程序——所有这些都有一个代码库。编写一次，导出运行。

• Web标准

Ionic Framework建立在可靠的、标准的Web技术（HTML、CSS和JavaScript）之上，使用自定义元素和DOM等现代Web Api。正因为如此，Ionic组件有一个稳定的API，而不是由单个平台供应商随意决定的。

• 设计美观

干净、简洁、实用。Ionic Framework是的设计工作和显示漂亮开箱急用的在所有平台上。从预先设计的组件、排版、交互范例和华丽（但可扩展）的基本主题开始。

• 简单

在构建Ionic Framework时，考虑到它的简单性，所以创建Ionic应用程序是一件令人愉快的事情，很容易学习，而且几乎所有具有Web开发技能的人都可以使用。

• License许可证

Ionic Framework是一个免费的开源项目，在麻省理工学院许可下发布。这意味着它可以免费用于个人或商业项目。MIT与jQuery和Ruby on Rails等流行项目使用的许可证是一样的。

• Ionic脚手架

官方的Ionic CLI（命令行接口）是一个工具，可以快速搭建Ionic应用程序，并为Ionic开发人员提供大量有用的命令。除了安装和更新Ionic，CLI还提供了内置的开发服务器、构建和调试工具，等等。如果您是Ionic Appflow成员，则可以使用CLI执行云构建和部署，并管理您的账户。

• 框架兼容性

虽然以前的版本与Angualr紧密耦合，但改框架的V4被重新设计为一个独立的Web组件库，并集成了最新的JavaScript框架，比如Angular。尽管有些框架需要一个铺垫来提供完整的Web组件支持，但在大多树前端框架（包括React和Vue）中，都可以成功地应用到Ionic中。

• JavaScript

使用Ionic4的主要目标之一是消除对单一框架承载组件的任何硬性要求。这意味着核心组件可以独立工作，只需在Web页面中使用一个脚本标记。虽然使用框架对于更大的团队和更大的应用程序时很好的，但是现在可以在单个页面中使用Ionic作为一个独立的库，甚至在WordPress这样的环境中也是如此。

• Angular

Ionic是所以强壮是因为Angular一直是核心所在。虽然核心组件被编写成一个独立的Web组件库，但@ionic/angular包使得与angular生态系统的集成变得轻而易举。@ionic/angular包含了angular开发人员所期望的来自与Ionic2/3的所有功能，并与angular核心库（如angular router）集成。

• React

Ionic现在正式支持流行的React库。Ionic React让React的开发人员利用现有的网络技能来开发针对IOS、Android、网络和桌面的应用程序。使用@ionic/react，你可以使用所有核心的Ionic组件，但感觉就像使用原生React组件一样。

• 未来的支持

在将来的版本中可能会支持其他框架。目前，Vue的官方绑定正在开发中，尽管有些组件在这些框架中是开箱即用的。

• Ionic Framework V4+

Ionic Framework V4是该项目在底层技术和能力方面的重大进展，重点关注性能、兼容性和整体可扩展行。尽管V4仍然通过@ionic/angular包与Angular进行深度集成，但它现在也与框架无关，这意味着它可以与任何其他JavaScript框架（Vue、React、Preact等）一起工作，或者根本不需要框架。
通过迁移到Web标准，V4允许现代浏览器中支持的标准组件模型（而不是特定于框架的模型）称为核心。这意味着更快的加载时间、更好的性能和更少的代码。

• Ionic Appflow

为了帮助管理整个生命周期的Ionic Appflow，我们还未生产应用提供了一个嗯Ionic Appflow的商业应用平台，该平台独立于开源框架。
Ionic Appflow帮助开发人员和团队编译本地应用程序构建，并通过一个几种的仪表盘将实时代码更新部署到Ionic Apps。可选的付费升级可用于更高级的功能，如工作流自动化、单点登录（SSO）和访问连接服务和继承。
Appflow需要一个Ionic账户，并提供一个免费的“Starter”计划，供哪些有兴趣尝试它的一些功能的人使用。

• 生态系统

Ionic Framework由一个核心团队全职开发和维护，它的生态系统由一个由开发者和贡献者组成的国际社区引导，促进了它的发展和采用。大大小小的开发者和公司都在使用Ionic来开发和发布随处可见的应用程序。

核心概念

对于哪些完全不熟悉Ionic app开发的人来说，深入了解项目背后的核心概念、概念和工具是很有版主的。在深入讨论复杂的主题之前，我们将介绍什么是Ionic framework以及它是如何工作的基础知识。

• UI组件

Ionic Framework是一个UI组件库，这些组件是可重用的元素，充当应用程序的构建块。使用HTML、CSS和JavaScript使用Web标准构建Ionic组件。虽然这些组件是预先构建的，但它们是从头开始设计的，具有高度可定制性，因此应用程序可以使用每个组件成为自己的组件，允许每个应用程序有自己的外观和特性。更具体地说，Ionic组件可以很容易的进行主题化，从而改变整个应用程序的外观。

• 样式适配

样式适配是Ionic Framework的一个内置特性，它允许应用程序开发人员在多个平台上使用相同的代码基。每个Ionic组件都根据应用程序所在的平台调整外观。例如，苹果设备，如iPhone和iPad，使用苹果自己的IOS设计语言。类似地，Android设备使用的是谷歌的设计语言——Material design。
通过在平台之间进行细微的设计更改，为用户提供熟悉的应用程序体验。从苹果应用商店下载的Ionic App将获得IOS主题，而从安卓应用商店下载的Ionic App将获得Material Design主题。对于哪些在浏览器中被视为进步的Web应用程序（PWA）的应用程序，Ionic将默认使用Material Design主题。此外，在某些场景中决定使用哪个平台是完全可配置的。

• 导航

传统的web应用程序使用线性历史记录，这意味着用户可以向前导航到一个页面，并可以单击后退按钮进行向后导航。这方面的一个例子是在Wikipedia周围单击，用户在浏览器的线性历史记录栈上前进和后退。
相比之下，移动应用程序通常使用并行的“非线性”导航。例如，选项卡界面可以为每个选项卡提供单独的导航栈，确保用户在导航和切换选项卡时不会丢失位置。
Ionic应用程序支持这种移动导航方式，支持可以嵌套的并行导航历史，同时维护web开发人员熟悉的浏览器风格的导航概念。
对于使用Angular和@ionic/angular构建的应用程序，我们建议使用Angular路由器，每个新的Ionic4 Angular应用程序都使用这个路由器。

• 原生访问

使用web技术构建的应用程序（比如Ionic Apps!）的一个惊人特性是，它几乎可以在任何平台上运行：台式电脑、手机、平板电脑、汽车、冰箱等等！相同的代码基础可以在许多平台上运行，因为它基于web标准和在这些平台上共享公共的api。
对于Ionic来说，最常见的一个用例是构建一个应用程序，它可以从应用程序商店和游戏商店下载。IOS和Android软件开发工具包（SKDs）都提供了Web视图，可以呈现任何Ionic应用程序，同时还允许完全的本地SDK访问。
应用就像超级容器和Cordova等项目被应用于Ionic应用接入原生SDK。这意味着开发人员可以使用常见的Web开发工具快速构建应用车鞥虚，同时还可以访问原生功能，如设备的加速器、摄像头、GPS等。

• 主题

作为核心，Ionic Framework是使用CSS构建的，它允许我们利用CSS属性（变量）提供灵活性。这使得它难以置信的容易设计一个应用程序，看起来很好，同时遵循网络标准。我们提供了一组颜色，因此开发人员可以有一些很棒的默认设置，但是我们鼓励覆盖它们来创建与品牌、公司或所需调色板相匹配的设计。从应用程序的背景颜色到文本颜色，所有内容都是完全可定制的。

构建你的第一个应用

你的第一个Ionic App: Angular
值得注意的是，有了一个代码库，您就可以仅使用HTML、CSS和JavaScript构建任何平台。随着我们学习的基础上，一步一步的创建一个真实的Ionic App。

• 我们将构建

我么将创建一个照片库应用程序，它提供了用设备的相机拍照、在网格中显示照片并将它们永久存储在设备上的功能。
亮点包括：
（1）一个基于Angular的代码库，在web、IOS和Android上运行，使用的是Ionic Framework UI组件。
（2）Ionic的官方原生应用运行时就像使用一个原生的IOS和Android移动应用的容器部署。
（3）由相机、文件系统和存储api支持的照片库功能。
这很容易开始。在GitHub上找到本指南中引用的完整应用程序代码。

• 下载需要的工具

立即下载和安装以下工具以确保最佳的Ionic开发体验：
（1）Node.js用于与Ionic生态系统交互。在这里下载LTS版本
（2）一个代码编辑器…写代码！我们是Visual Studio代码的粉丝。
（3）命令行接口/终端（CLI）
Windows 用户：为了获得最佳的Ionic体验，我们推荐在管理员模式下运行内置命令（cmd）或Powershell CLI。
Mac/Linux用户，几乎任何终端都可以工作。

• 安装Ionic工具

运行以下命令用于安装Ionic CLI（ionic），
native-run，用于在设备和模拟器/仿真器上运行本机二进制文件，以及
cordova-res，用于生成本机应用程序图标和启动屏幕：

要在Visual Studio代码中打开终端，请转到终端->新终端。

npm install -g @ionic/cli native-run cordova-res

-g选项表示全局安装。在全局安装包时，可能发生EACCES权限错误。
考虑将npm设置为在不提升权限的情况下进行全局操作。有关更多信息，请参见解决权限错误。

• 创建一个应用
  接下来，创建一个Ionic Angular应用程序，它使用“Tabs”starter模板，并为本地功能添加容器:

ionic start photo-gallery tabs --type=angular --capacitor

这个入门项目包括三个预构建的页面和用于Ionic开发的最佳实践。已经有了通用的构建块，我们可以轻松地添加更多的特性!
接下来，切换到app文件夹:

cd photo-gallery

• PWA元素
  一些容器插件，包括摄像头API，通过Ionic pwa元素库提供基于web的功能和UI。
  这是一个独立的依赖，所以安装它:

npm install @ionic/pwa-elements

接下来，通过编辑src/main.ts导入@ ionic/pwa-elements。

import { defineCustomElements } from '@ionic/pwa-elements/loader';// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);

就是这样!现在是有趣的部分-让我们看看应用程序的行动。

• 运行这个应用
  接下来运行这个命令:

ionic serve

瞧!你的Ionic应用程序现在在网络浏览器中运行。你的大多数应用程序都可以在浏览器中直接构建和测试，这大大提高了开发和测试的速度。

• photo Gallery!!!
  有三个标签。单击Tab2选项卡。这是一个空白的画布，也就是变成一个图片库的完美地点。Ionic CLI的特点是实时重新加载，所以当你做出改变并保存它们时，应用程序会立即更新!
  在您选择的代码编辑器中打开photo-gallery应用程序文件夹，然后导航到/src/app/tab2/tab2.page.html。我们看到:

<ion-header><ion-toolbar><ion-title>Tab 2</ion-title></ion-toolbar>
</ion-header><ion-content><ion-header collapse="condense"><ion-toolbar><ion-title size="large">Tab 2</ion-title></ion-toolbar></ion-header>
</ion-content>

ion-header表示顶部导航栏和工具栏，标题为“Tab 2”(由于支持iOS可折叠大标题，所以有两个标题)。将两个ion-title元素重命名为:

<ion-title>Photo Gallery</ion-title>

我们把我们的应用程序的视觉方面放到了<ion-content>。在本例中，我们将添加一个按钮来打开设备的相机并显示相机捕获的图像。首先在页面底部添加一个浮动动作按钮(FAB)，并将相机图像设置为图标。

<ion-content>
<ion-fab vertical="bottom" horizontal="center" slot="fixed"><ion-fab-button><ion-icon name="camera"></ion-icon></ion-fab-button></ion-fab>
</ion-content>

接下来,打开src / app /标签/ tabs.page.html。将标签更改为“Photos”，图标名称更改为“images”:

<ion-tab-button tab="tab2"><ion-icon name="images"></ion-icon><ion-label>Photos</ion-label>
</ion-tab-button>

保存所有更改，以便在浏览器中自动应用它们。这只是我们利用离子做的所有酷事情的开始。接下来，在web上实现拍照功能，然后为iOS和Android构建它。

先进的Web应用

浏览器支持

Ionic最初的目标是让使用HTML、CSS和JavaScript等web技术开发移动应用变得容易。因为有了web技术的基础，爱奥尼亚可以在web上的任何地方运行——iOS、Android、浏览器、electronic、PWAs等等。

• 移动浏览器
  为了追求自适应的风格，Ionic完全支持并在以下移动平台上进行了良好的测试:

Framework	Android	IOS
Ionic V5	5.0+	11.0+
Ionic V4	4.4+	10.0+

• 桌面浏览器

因为Ionic是基于web技术的，所以它在桌面浏览器上的表现和在移动设备上一样好。有关桌面布局的更多信息，请参阅跨平台。

Browser	Ionic V5	Ionic V4
Chrome	√	√
Safari	√	√
Edge	79+	√
Firefox	√	√
IE 11	×	√

版本控制

发布说明

支持

安装