Ionic框架介绍和关键组件（15分钟，入门级）

最新推荐文章于 2019-08-20 21:19:14 发布

weixin_33719619

最新推荐文章于 2019-08-20 21:19:14 发布

阅读量410

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ui 前端 ViewUI

原文链接：https://segmentfault.com/a/1190000011335129

Ionic框架是一款强大的移动应用开发工具，利用Web技术如HTML、CSS和JavaScript等构建高质量的移动应用程序。Ionic不仅支持移动应用商店，还支持移动Web，采用单一代码库实现跨平台部署。本文介绍Ionic的关键组成部分，包括CLI、UI组件、Ionic API、Ionic Native和Angular框架。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是Ionic Framework？

Ionic Framework 允许你使用已经熟悉的web技术轻松搭建移动app应用。
好消息是:如果你能设法创建网站，你就已经知道如何构建移动应用了。
Ionic框架提供了最好的web和原生应用组件，用于构建高度交互的本地和渐进的web应用程序。

它是唯一一个允许开发者为所有应用商店和移动网络设计应用程序的移动应用程序栈，使用一个独特的代码库。此外，Ionic的平台连续性保证你的应用程序在每一个设备上看起来都很出色。

它为web开发人员提供了一个完整的移动工具包，以及你在几分钟之内就可以创建好一个完整移动应用程序所需要的一切。

您可以将Ionic看作前端UI框架，它处理您的应用程序需要的所有外观和UI交互。它就像一种“本地的引导程序”，但支持广泛的普通本地移动组件、流畅的动画和令人难以置信的设计。

我们现在将提到使Ionic框架如此坚固的关键部分。

CLI

Ionic CLI 是开发Ionic应用程序的绝佳工具。它将帮助你在开发过程中做一些事情，比如为ios或android平台构建你的应用程序，或者添加cordova插件。通过键入$ ionic --help在您的控制台中提供帮助，您可以看到您可以使用的所有可用命令的列表。

UI 组件

Ionic致力于丰富用户界面，并使用AngularJS构建功能应用程序结构。这提供了一种力量与美感的结合。核心的移动UI范例和退出盒子组件对于开发者来说很方便，允许他们集中精力组装应用程序，而不是普通的用户界面元素。
这些包括列表视图，导航组件，如侧菜单和标签栏，动作表单，等等。

Ionic API

为了构建功能应用程序结构，Ionic充分利用了Angular。
这包括用户体验交互，如表单验证、视图和所有样板间的导航逻辑，创建定制的UI组件，这些组件创建一个一致的应用程序，而不仅仅是html和css。
在官方文档中，您可以找到更多的信息和示例，例如复选框、切换、刷新、可滚动窗格、无限滚动等等。

Ionic Native

Ionic Native是一种用TypeScript包装的Cordova插件，使我们可以使用任何移动本机功能。
一个典型的例子是，如果你想在你的应用程序中使用手机的摄像头，让用户[拍照]5。有很多Ionic原生插件可以用来扩展你的应用功能。

Angular / Angular 2+

AngularJS是一个JavaScript开源前端web应用程序框架。它主要由Google和扩展的人员和公司社区共同承担，以应对开发单页，跨平台，高性能应用程序时面临的许多挑战。它完全可扩展，并且能与其他库很好地工作。有关更多细节，请访问其官方页面。

在过去几年中，Angular 2结构已经以令人印象深刻的方式展开和发展。并不是替代了AngularJS 1.x，而应该将Angular2理解为基于AngularJS 1.x经验教训下，产生的完整新框架。

因此，Angular应用于表示Angular 2，AngularJS则的暗示AngularJs 1.x。

这里我们将相互提及Angular和Angular2，但是它们都参考Angular2或更高版本，如Angular4。

重点强调Ionic 2和Ionic 1之间的差异

Ionic2+ 包含了您已经知道和热爱的关于Ionic1的东西，并构建在它的基础之上，以提供一个更加灵活和成熟的框架。就我个人而言，作为一名开发人员，我发现Ionic 2 +的应用程序比Ionic 1应用程序更出色。
Ionic 1 基于 Angular 1.x， Ionic 2 基于 Angular >= 2.x。
通过单独使用Angular >= 2.x获得的性能提升是显著的。

说到url,Ionic 2与Ionic 1和Angular 的不同。我们不使用url来导航，而是使用它们来确保我们总是能回到页面(例如，在应用程序发布上)。这意味着我们不局限于使用href来导航。然而，我们仍然可以选择在必要时使用URL导航到页面。
所有的Ionic 2组件都使用了著名的push策略，这意味着改变检测不是一直执行的，只有在输入更改时才执行。

Max Lynch’s (其中一位创始人)说：

结合Angular，我们希望使Ionic更快，更易于使用，更强大。新的组件模型使构建组件和扩展离子更容易。
Angular2应用程序更容易以更预期的方式编写和与数据进行交互。该框架自然适用于Web标准，而不是创建新标准。
学习Angular2将更容易，更多的开发人员将能够在代码基础上工作。双赢双赢* N。

Max的另一个评论是：“随着Ionic 2，我们已经回到了第一位，并完全重新考虑了移动工具包的工作原理。我们大大提高了性能，降低了编写代码的复杂性，并且可以构建完全定制的应用程序，与世界上最好的应用程序竞争。我们相信Ionic 2会改变您对移动应用程序的看法以及网络的未来。“