从零开始的Ionic教程：什么是Ionic？

您是否对编写移动应用程序感兴趣，但没有编程和开发ios和android应用程序的专业知识或经验？好吧，让我向您介绍ionic 框架，它可以让您编写一个应用程序并将其发布到任何移动平台。

那么，什么是离子？

简而言之，Ionic 是一个免费使用的框架，允许您从一个代码库构建适用于 iOS、Android 和 Windows Phone 的移动应用程序。换句话说，Ionic 是一个跨平台移动开发的工具。

Ionic 由一家名为 Drifty Co 的科技初创公司于 2012 年创立，现在它是世界上用于构建跨平台（混合）移动应用程序的顶级开源框架。 

离子如何工作

Ionic 使您能够使用 html、 css、javascript、angular和typescript等 Web 技术和语言开发移动应用程序。因此，可以考虑将 Ionic 视为用于创建混合移动应用程序的前端软件开发工具包 (SDK)。因此，Ionic 提供了一组模拟每个移动平台的原生外观、感觉和功能的组件。这些组件的示例包括按钮、选项卡、菜单、列表、卡片、模式等等。

除了这些为移动应用程序提供样式和“外观”的组件之外，Ionic 还提供了适当的 行为 ，如导航和手势——例如，滑动、旋转和捏合事件等等。Ionic 还包括一组称为Ionicons的图标。所有这些组件都是您在构建 Ionic 应用程序时使用的元素，以及 cordova 和 PhoneGap 插件，我们稍后会谈到。

入门有多难？

开始使用 Ionic 真的不难。Ionic 附带了一些工具来帮助您设置、构建和运行您的 Ionic 项目——这就是 Ionic 命令行界面 (CLI)。所有前端库和 CLI 都是开源项目，因此您可以在开发应用程序时免费使用它们。 

为什么使用离子？

开发原生应用程序很困难。单独开发 Android 应用程序需要您学习如何使用 Android Studio 的 IDE（集成开发环境）并了解 java 或kotlin编程语言。您还需要了解特定于 Android 的概念，例如活动和意图，并且您将使用自定义 XML 语法创建您的应用 UI。 

对于 iOS，您需要使用 Xcode IDE（仅适用于mac）以及 Apple 的 Objective-C 或swift编程语言。更不用说所有许多Mac特定的SDK 和概念了！最重要的是，如果您还决定为 Windows Phone 构建，那么您还需要学习如何使用 Visual Studio 的 IDE，以及用 C# 或 Visual Basic 编写代码等等......

因此，如果您想将您的应用程序发布到多个平台，您将不得不用三种不同的语言重写相同的功能！以这种方式开发应用程序不仅需要学习大量不同的语言和工具，还意味着您最终要为两种或三种不同的编程语言和移动平台重新编码相同的逻辑。当您需要进行任何更改时，也需要同样的重复工作。以原生方式开发应用程序需要大量时间、金钱和技能。那么拥有一个适用于所有三个平台的单一代码库不是很好吗？ 

这就是离子进来的地方！

混合应用

混合应用程序利用每个平台的库或用户界面组件，如按钮、列表等。其中一个组件是webview——一个显示网页的视图。这是一个可以运行 Web 应用程序的原生移动应用程序组件。因此，您可以使用 HTML、CSS 和 JavaScript 编写应用程序并使用 web 视图来显示它。

它们被称为混合应用程序，因为它们混合使用本机代码和 HTML、CSS 和 JavaScript。有许多框架可以很容易地创建在 web 视图中运行 web 应用程序的应用程序。最受欢迎的是Apache Cordova，通常通过其最受欢迎的发行版访问：PhoneGap。Cordova 是一个开源项目，adobe拥有的PhoneGap基于 Cordova 并在其之上提供附加功能和服务。

Ionic 使用 Apache Cordova 项目来构建和运行您的应用程序作为本机应用程序。

离子和科尔多瓦

Cordova 充当了 Ionic 本地代码的桥梁。它将您的 HTML、JavaScript 和 CSS 编译成原生应用程序，使它们能够在 Android、iOS 和 Windows Phone 设备上原生运行。

如果您只是像编写网站一样编写 Web 应用程序，然后使用 Cordova 将其打包为移动应用程序，最终结果将是一个看起来像网站的应用程序。用户会注意到样式和用户交互与“普通”移动应用程序不同。 

这就是 Ionic 提供的缺失部分——原生的外观和感觉。如前所述，Ionic 包含一组组件，这些组件具有与原生组件相同的外观和感觉，并为每个平台使用适当的样式和行为。因此，您可以使用 HTML、CSS 和 JavaScript 编写您的应用程序，但您的应用程序将看起来像原生应用程序而不是网页。

Cordova 还提供了 200 多个可用作附加组件的插件，您可以在 Ionic 项目中使用这些插件，这些插件使您能够访问本机设备api ，例如手机的摄像头、地理定位、陀螺仪等。您可以使用它们来增强应用程序的特性和功能。 

离子和角度

很有可能，您不想单独使用原生 JavaScript、HTML 和 CSS 来创建您的 Web 应用程序。相反，您可能会使用像 Angular这样的 Web 框架。Angular 是一个非常流行的框架，可以轻松构建响应式 Web 应用程序。现在，Ionic 将 Angular 的强大功能带入了移动编码！ 

Ionic 通过提供丰富的组件库以及将 Angular TypeScript 代码编译成原始 JavaScript、HTML 和 CSS 包的工具，使得使用 Angular 框架编写移动应用程序成为可能，然后 Apache Cordova 可以将其捆绑到一个本机移动应用程序。

说明上述内容的快速图表如下所示：

结论

对于希望进入开发移动应用程序世界的任何人，我强烈建议并鼓励您尝试 Ionic，因为它为您提供了开发跨平台移动应用程序的机会，所有这些都来自一个代码库。