Ionic入门：简介

ionic 是一种流行的移动应用程序框架，可帮助您使用 html、css 和javascript快速构建混合移动应用程序。在本系列中，您将通过一起创建功能齐全的移动应用程序来学习如何使用 Ionic 设置和构建自己的移动应用程序。我们首先介绍 Ionic，然后学习如何开始使用该工具。

在本教程中，我们将介绍：

• 什么是离子及其各种组件

• 为什么你会选择使用 Ionic

• 如何设置您的机器以构建Ionic混合应用程序

• 开发工作流程，从开始到部署应用程序

1.  Ionic Stack：cordova、angular、Ionic

Ionic是几种巧妙地捆绑和管理在一起的技术。我喜欢将 Ionic 视为多个框架的堆栈。这些技术之间的相互作用是最终创建最终应用程序并提供良好的开发人员和用户体验的原因。

Cordova：混合应用程序框架

作为基础，Ionic 使用Cordova作为混合应用程序框架。从本质上讲，它允许将 Web 应用程序捆绑到可以安装在设备上的本机应用程序中。它嵌入了一个 Web 视图，这是一个运行 Web 应用程序的隔离浏览器实例。

它还提供了一个api，您可以使用它与设备本身进行通信，例如，询问 GPS 坐标或访问相机。许多这些附加硬件功能都是通过 Cordova 插件系统启用的，因此您只需安装和使用您需要的功能。我将在稍后的教程中向您介绍更多 Cordova。

Angular：Web 应用程序框架

Angular是一个著名的用于构建 Web 应用程序的 JavaScript 框架，而 Ionic 就是在它之上构建的。Angular 提供了用于构建实际应用程序的 Web 应用程序逻辑。

如果您已经熟悉它，那么您将能够快速掌握 Ionic 功能。如果您是 Angular 新手，您可以继续阅读，您将开始学习一些基本的 Angular。

我不会详细介绍 Angular，因此我建议花一些时间阅读 Angular 文档来学习基础知识。

离子：用户界面框架

Ionic 的主要卖点是为移动设备设计的一组干净的用户界面组件。当您构建原生应用程序时，有原生 SDK 为您提供界面组件，例如选项卡和对话框。

Ionic 提供了一组类似的接口组件，用于混合应用程序。Ionic 喜欢声称它是混合应用程序缺少的 SDK，它很好地填补了这个角色。此外，Ionic 还有许多其他重要功能，使其成为非常引人注目的选择。

2.为什么是离子

Ionic 不仅仅是一组用户界面组件，它还是一组开发人员工具和快速构建混合移动应用程序的生态系统。我想介绍为什么混合应用程序非常适合 Web 开发人员，有关 Ionic 平台和工具的详细信息，以及 Ionic 何时可能不适合。

为什么混合与原生或移动 Web

关于构建应用程序的不同方法的质量存在古老的争论。几个月前，我写了一篇关于 三种移动体验的详细文章。如果您不确定这些不同方法在现代设备上的优缺点，我建议您查看它。

混合应用程序是为 Web 开发人员提供使用他们已经知道的技能来构建看起来和感觉像原生应用程序的移动应用程序的能力的最佳点。

伟大的工具和离子平台

很少有可用的移动框架具有接近 Ionic 工具质量的工具。我们将仔细研究本教程其余部分中可用的主要工具，但我想介绍一些随着时间的推移您可能会发现有用的功能。

离子 CLI

Ionic 的 CLI 工具是一流的，它提供了许多帮助您启动项目、预览项目并最终构建项目的功能。

离子平台

Ionic 提供了许多对专业开发有用的功能，有些是免费的，有些是付费的，例如应用程序分析、推送通知和部署工具。

离子市场

Ionic 有许多免费和付费的附加组件，可以轻松集成到您的应用程序中。有主题、独特的组件和其他插件。

离子限制

Ionic 并不完美适合每个移动应用程序。考虑以下情况来确定 Ionic 是否适合您的项目。

• Ionic 并不支持所有平台。完全支持ios和android，但 Ionic 可能在某种程度上与其他人一起使用。它也适用于更现代的版本。支持旧（er）设备或旧（er）操作系统可能会导致性能下降，通常是由于浏览器实现不佳。

• Ionic 不提供真正的原生应用程序。如果您的应用程序需要与本机平台高度集成，例如密集图形，Ionic 可能无法提供所需的全部功能。这是因为需要通过 Cordova 从 Web 应用程序接口连接硬件，这可能会增加一些延迟。

换句话说，如果您不是为旧设备构建应用程序并且不需要在硬件级别进行大量编程，Ionic 完全有能力为您的用户提供高质量的应用程序体验。

3.安装 Ionic 和 Cordova

Ionic 带有一个出色的 CLI（命令行界面）来帮助启动、构建和部署您的应用程序。您将在开发过程中大量使用 CLI。Ionic 也依赖于 Cordova，因此您将间接使用它。

您必须安装node.js 才能开始。如果您不这样做，请花点时间在您的系统上安装它。我在本教程中使用node .js 5.6，我建议使用最新的稳定版本。

安装 Ionic 和 Cordova 就像安装两个全局节点模块一样简单。如果您以前这样做过，那么这应该看起来很熟悉。打开终端并运行以下命令：

npm install -g ionic@1.7.14 cordova@6.0.0

这可能需要一些时间，但您应该会收到一条成功消息，说明它们都已安装。您可以通过运行以下命令来查看版本号输出来验证这一点。

ionic -v && cordova -v

它应该输出 Ionic 和 Cordova 的版本。出于本教程的目的，我使用的是 Ionic 1.7.14 版和 Cordova 6.0.0 版。

Ionic CLI 中有很多功能，您始终可以通过运行快速参考ionic help。如果需要，您还可以在线查看文档以获得更多支持。

其他安装

Ionic 没有捆绑构建应用程序所需的所有工具，它依赖于 Apple 和/或 Google 提供的一些额外的 SDK 和软件。最好阅读并遵循 Cordova 提供的平台指南，以便为您希望使用的每个平台进行设置。

• 安卓平台指南 

• iOS 平台指南

您可以稍后再执行此操作，但您需要先设置平台工具，然后才能在模拟器或设备上预览或模拟应用程序。

4. 离子开发流程

在开发 Ionic 应用程序时，您将经历一组通用步骤。这些步骤有相应的 CLI 命令来帮助您。让我们看一下代表构建 Ionic 应用程序的典型开发流程的主要命令。

第 1 步：启动项目

假设您已经对计划构建什么有了基本的了解，第一步是创建一个新项目。Ionic 项目基于 Cordova，需要一些脚手架，以便 Cordova 以后了解您的项目。Ionic 有几个预构建的模板，您可以使用它们来生成启动项目，但您也可以提供自己的模板。

要启动项目，请运行ionic start sample命令。它会根据您提供的名称（即sample）在当前目录中生成一个新文件夹。该命令运行时，它会从 GitHub 下载项目所需的文件，并为您初始化项目。它使用默认项目，该项目有一个带有基本选项卡界面的基本应用程序。

运行cd sample 以导航到新目录。检查目录时，您会注意到一些文件和目录。目前不要太在意每个文件。以下是您最初需要处理的一些事项。

• cordova.xml：此文件包含 Cordova 的配置。

• ionic.project：此文件包含 Ionic 的配置。

• /plugins：此目录包含所有已安装的 Cordova 插件。最初，它加载了几个 Ionic 为您预安装的默认插件。

• /platforms：此目录包含您为应用程序配置的任何平台的资产，例如 Android 和 iOS。Ionic 可能会默认为您安装一个平台。

• /scss：此目录包含应用程序的 SASS 样式的源文件。您可以自定义它，稍后您会发现。

• /www：此目录包含 Cordova 加载的 Web 应用程序文件。您的所有 javaScript、HTML 和 CSS 文件都应位于此目录中。

在本教程的其余部分，我们将使用您刚刚生成的项目，并了解如何开发和预览应用程序。

第 2 步：开发和预览应用程序

您已经启动了一个项目，现在您想开始开发。在最初的开发过程中，您可能会在浏览器中预览您的工作。毕竟，Ionic 应用程序实际上只是一个 Web 应用程序。Ionic 带有一个本地开发服务器，用于构建和服务您的应用程序。

要启动开发服务器，请运行ionic serve. 一旦运行，它会在您的默认浏览器中打开应用程序的预览。此时，您可以使用浏览器的开发人员工具来检查应用程序、监视错误以及您在构建 Web 应用程序时通常会执行的任何其他任务。

服务器继续在后台运行并监视项目的文件更改。当它检测到您已编辑并保存文件时，它会自动为您重新加载浏览器。

在开发者工具中使用设备仿真预览在 chrome 中运行的 Ionic 应用程序

我推荐使用 Chrome 作为浏览器，因为它具有出色的开发人员工具。一个特别有用的功能是模拟设备尺寸的能力，它可以很容易地看到应用程序在特定设备上的样子。它不是像真实设备一样执行应用程序的真正模拟器，它只是模仿应用程序的尺寸。

第 3 步：添加平台

Cordova 支持许多不同类型的移动设备，称为平台。您必须注册您希望使用您的应用程序定位的平台并安装适当的项目文件。幸运的是，这主要是通过 Ionic CLI 管理的。Ionic 完全支持 iOS 和 Android 平台。

要添加平台，请运行ionic platform add android. 替换 android为ios添加 iOS。添加后，您将在项目的平台目录中看到一个新文件夹。此文件夹包含特定于平台的文件。通常，您需要避免对该目录中的文件进行过多更改。

如果您有任何问题，您可以删除平台并重新添加。要删除平台，请运行ionic platform remove android.

第 4 步：模拟应用程序

在某些时候，您会想要开始在真正的模拟器中预览您的应用程序。模拟器本质上是真实设备的软件版本。这对于快速测试应用程序在真实设备上的行为方式非常有用。请注意，模拟器并不具备物理设备的所有功能，因为它们只是软件模拟设备。

您的某些代码可能无法按预期工作，例如，如果您希望使用设备的联系人列表。通常，只有与硬件集成的功能可能无法按预期工作，但对于大多数情况，它应该可以正常工作。

设置模拟器可能是一项艰巨的任务，具体取决于您使用的计算机类型和需要测试的内容。只能在运行 OS X 的计算机上模拟iphone ，但可以在任何操作系统上模拟 Android。要设置模拟器，请参阅我之前链接到的平台指南。

完成后，您可以使用ionic emulate android -c -l. 像以前一样，如果您的目标是 iOS ，请替换android为。ios这将在模拟器中构建、安装和启动应用程序。这可能需要一些时间，因此您可能想要使用一些有用的实时重新加载功能，就像您之前在浏览器中所做的那样。

您可以使用可选 -l标志在模拟器中实时重新加载应用程序（无需重新构建和重新安装）。只要您不更改与应用程序的构建方式相关的任何内容（例如 Cordova 设置），这就很棒。您还可以使用可选 -c标志将任何控制台消息转发到终端日志。我几乎每次都使用它们。

第 5 步：将应用程序部署到设备

预览应用程序的最佳方式是在设备上实际安装和运行它。这需要您设置一个平台并将设备连接到您的机器。执行此操作需要根据您拥有的设备类型进行一些配置。您可以参考上面的平台指南来连接您的设备。

连接设备后，从命令行在其上运行应用程序非常简单。使用ionic run android -c -l和 Ionic 构建、部署和启动您的应用程序。同样，您可以替换ios为android. 就像 emulate 命令一样，您可以使用 optional -l和-cflags 来启用实时重新加载和控制台日志记录到终端。

应用程序在您的设备上后，您可以断开连接，该应用程序将继续安装在设备上。如果您想在一段时间内使用该应用程序来测试它的行为方式或只是向其他人展示它，这将很有帮助。

5.离子 2 怎么样

我经常被问到 Ionic 2 以及人们是否应该使用它。在 2016 年初撰写本文时，还没有一个简单的答案。我已经使用它并构建了一些原型，我认识一些人已经使用它构建了生产应用程序，但它还没有准备好。

好消息是今天学习 Ionic 1 意味着学习 Ionic 2 将相当简单。您将在本系列中学到的大多数 Ionic 特定的东西在版本之间保持相当一致。由于 Ionic 2 是在 Angular 2 上构建的，因此会发生最大的变化。

因此，虽然您今天可以构建 Ionic 2 应用程序，但它还没有正式发布。现在学习 Ionic 1 并没有浪费任何时间。一旦 Ionic 2 正式发布，升级应该相对简单。

概括

在本教程中，我们介绍了很多关于 Ionic 的内容。

• 您了解了 Ionic 的优点和一些缺点。

• 您设置您的计算机来构建 Ionic 应用程序。

• 您创建了第一个项目并在浏览器中进行了预览。

• 您设置了一个模拟器和/或连接的设备来预览您的应用程序。

在本系列的下一部分中，您将开始使用本教程中概述的技术构建一个真实的、功能强大的应用程序。