对于那些希望构建混合移动应用程序的人来说，ionic 是您将遇到的首批框架之一。它在希望从单个代码库为多个移动设备创建应用程序的开发人员中获得了广泛的使用，这是有充分理由的。

Ionic 具有许多超越其他产品的功能，适合从初级开发人员到退伍军人的每个人。

继续阅读以了解有关 Ionic 的更多信息，并发现可帮助您提高技能的教程，无论您当前的水平如何。

离子框架

Ionic 旨在解决智能设备爆炸式增长带来的巨大问题。如果有十几种不同的移动操作系统，您如何使用最少的资源构建应用程序？

最近，市场已被两种移动操作系统 ios 和 android 主导。但是，每个应用程序仍然需要使用自己的一组语言和库来创建单独的应用程序。但是，使用 Ionic 之类的框架，可以使用单个代码库创建您的移动应用程序，并将其部署到多种类型的设备上。

Ionic 到底是做什么的？

它允许开发人员使用熟悉的 Web 技术创建移动应用程序：html、css 和 javascript。它还具有一组库，可帮助为每种类型的移动设备上的系统功能创建抽象。这意味着从 Android 相机和 Apple 相机中抓取图片的命令在 JavaScript 代码中看起来基本相同，尽管在底层存在很大差异。

这样做的好处是它可以将开发时间和资源减少一半，如果您的目标受众不仅仅是 Android 和 iOS，甚至更多。这也意味着您不再需要成为移动开发专家来创建移动应用程序，因为 javaScript 是一种常见的 Web 开发语言。这种可迁移语言的使用意味着如果您以前做过 Web 开发，使用 Ionic 构建很容易，而且它还增加了能够创建移动应用程序的开发人员的数量。

不过，在开始使用 Ionic 之前，您需要对 JavaScript 有一个扎实的掌握。

JavaScript 基础

Ionic 是一个框架，它建立在可以说是有史以来最受喜爱同时也是最讨厌的编程语言 JavaScript 之上。JavaScript 已经存在了二十多年，在网络上的普及使其成为最常用的语言之一。

那么，要开始使用 Ionic，您首先需要了解 JavaScript。

有很多方法可以加快 JavaScript 速度，其中一门可用的课程是Dan Wellman 的“现代 JavaScript 基础”。这个 6 小时的课程将带您了解 JavaScript 的所有基础知识，让您为使用它做好准备，并为它的许多框架中使用奠定基础。

• FREE  

• JavaScript 现代 JavaScript 基础知识 Dan Wellman

接下来，您可以查看“实践 JavaScript 和学习”系列课程，这将帮助您获得该语言的一些动手经验。练习 JavaScript 和学习：函数和练习 JavaScript 和学习：面向对象编程是两个在使用 Ionic 时特别有用的，因为它使用状态和对象。

•  

  练习 JavaScript 并学习：面向对象编程

  JavaScript 对面向对象编程有很强的支持，尽管有时该语言的面向对象特性会被误解。在...

学习角度

一旦你掌握了 JavaScript 的速度，你就会想看一些关于 angular 的教程或课程。Ionic 构建在 Angular 框架之上（类似于 react Native 构建在 React 上的方式），因此掌握框架的基础知识将大大有助于使您的学习路径顺利进行。Angular Fundamentals 课程将帮助你在框架内发挥你的技能。

• Angular Angular 基础知识 Dan Wellman

一旦您熟悉了 JavaScript，就该开始深入研究 Ionic。

离子框架的基础

在开始制作成熟的应用程序之前，让我们先从基础开始。虽然我们已经讨论了一点 Ionic 框架，但重要的是要知道 Ionic 实际上是一系列相关的服务。

我们将专注于开源框架，但也有扩展工具，例如拖放编辑器、框架的企业版本和持续部署方面。拖放编辑器特别有趣，如果您想开始使用它，请查看 Reginald Dawson 的课程“Easy Mobile Apps With Ionic Creator”。

• 带有 Ionic Creator Reginald Dawson 的 Ionic 2 简易移动应用程序

要开始了解 Ionic 背后的代码和概念，请查看“Ionic from scratch: Getting Started With Ionic”。设置好环境后，“Ionic from Scratch：使用 Ionic 组件”将帮助您熟悉框架的组件和屏幕。之后，花点时间查看Ionic 开发者文档。对于希望使用该框架制作完整的移动应用程序的任何人来说，介绍、组件和主题区域都是必读的。

离子从零开始：离子入门

所以你听说过 Ionic 并且想知道如何开始？了解如何设置 Ionic 开发环境并创建 Ionic 项目。

Ionic From Scratch：使用 Ionic 组件

组件使您的 Ionic 应用程序栩栩如生。在这篇文章中，我们将了解一些关键组件——Ionic 应用程序的构建块。

一旦您了解了所有这些信息，您现在就进入了有趣的一步：制作应用程序！接下来，我们将查看可以帮助您将所有内容整合在一起的资源。

使用 Ionic 构建应用程序

一旦你掌握了框架的基础知识，就可以开始制作应用程序了。此时的目标是更多地了解高级组件，以及了解如何构建和创建简单的应用程序。

下一步将更详细地查看开发人员文档，真正深入研究特定组件、架构和 Ionic 的每个核心概念的领域。然后，掌握一些完整的代码示例以分解理解可能是有意义的。

要探索高级组件，请查看文章“用于快速构建 MVP 的离子组件”。它包括指向用于 UI、社交身份验证、餐厅预订的复杂组件的链接，以及有助于扩展您对组件的理解的许多其他部分。

• Ionic Ionic Components 用于快速构建您的应用程序 MVP Kyle Sloka-Frey

一旦您对此感到满意，请查看一些现有的 Ionic 模板。这些成熟的应用程序可以帮助您了解应用程序架构的外观，以及所有组件如何组合在一起。文章“15 Ready-Made Ionic 3 App Templates”链接到许多有用的应用程序模板，每个模板都可以让您直接访问它们的源代码。

IonFullApp - 最流行的 Ionic App 模板之一

• 应用程序模板 18 个最佳 Ionic 应用程序模板（和 3 个免费提供源代码） Esther Vaati

什么是离子应用程序模板？

Ionic 模板类似于您在使用其他平台时可能遇到的前端开发主题和模板，例如 wordpress 主题。它们由一系列文件和资产组成，有助于弥合框架本身与您正在寻找的成品之间的差距。

使用 Ionic 应用程序模板有很多好处，即：

• 从已经完成的大部分项目开始

• 记录在案的专业代码

• 降低项目成本

• 用于构建项目其余部分的现有结构

将这些优势与 Ionic 提供的强大框架相结合，在应用程序开发方面为开发人员提供了巨大的优势。小型开发团队和资源有限的团队会发现它们特别有用。

这里有几个最好的：

woocommerce 的 Ionic 3 应用程序

由hakeemnala开发的适用于 WooCommerce 的 Ionic 3 App 是一个模板，如果您正在创建电子商务应用程序，您绝对应该考虑使用它。它允许您快速创建一个可以连接到您的 WooCommerce 网站的漂亮应用程序。

离子框架应用程序

如果您正在寻找具有数十个精美页面和多种有用功能的现代模板，那么此模板适合您。使用 Ionic 3 构建，它非常模块化并且非常容易扩展。事实上，它有超过 20 个模块和超过 35 个组件！

Ionic 3 UI 主题

Ionic 3 UI Theme的开发人员  承诺，您可以使用他们的 UI 应用程序模板制作几乎任何应用程序。拥有超过 100 种布局和数百个 html5 UI 组件，它们可能是正确的。除了提供最大的灵活性和轻松的定制外，该应用程序还提供 Google Analytics，以便您可以跟踪用户的行为、mailchimp 集成、Google Maps 集成等等。

高级离子和复杂功能

通常，Ionic 的重点是创建非常简单的应用程序是多么容易，尤其是使用它的拖放编辑器。但是，除此之外，它还提供了一组复杂的功能和一个健壮的框架。它甚至成为许多流行应用程序的首选框架，包括 Untappd、MarketWatch、Nationwide 和 Joule。

Ionic 最有趣的方面之一是它的主题系统，它允许使用 CSS 和 CSS-live 变量轻松交换样式。Ionic有关于其主题系统的完整文档，以及一些高级功能。

如果您希望跟随创建更复杂的应用程序，请查看“使用 Ionic 创建任务管理器应用程序”系列。之后，看看其他一些可以集成的 Ionic 服务，包括推送通知（“Ionic 服务入门：推送”）。如果您希望在大规模或企业级工作，了解 Ionic 的部署服务也很重要（“Ionic 服务入门：部署”）。

Angular 使用 Ionic 创建任务管理器应用程序：第 1 部分 Roy Agasthyan

• Ionic 开始使用 Ionic 服务：Push Wern Ancheta

您是如何学习 Ionic 框架的？

学习 Ionic 的途径有很多，但希望这能为您提供一些起点，无论您处于旅程的哪个阶段。

你是如何学习离子的？您认为哪些资源最有用？在下面的评论中让我们知道！ 

• Ionic 20+ 令人惊叹的 Ionic 应用程序模板和 Ionic 主题 Franc Lucas

• 应用程序模板 18 个最佳 Ionic 应用程序模板（和 3 个免费提供源代码） Esther Vaati