Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ionic
Code

Ionic 入门 ︰ 简介

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Getting Started With Ionic.
Getting Started With Ionic: JavaScript Components

Chinese (Simplified) (中文(简体)) translation by Qiang Ji (you can also view the original English article)

Ionic 是一个流行的移动应用程序框架,它使用 HTML,CSS 和 JavaScript,帮助你快速创建混合移动应用程序。 在本系列中,你将通过创建一个功能齐全的移动应用程序去学习如何用 Ionic 设置和创建属于你自己的移动应用程序。 我们首先介绍 Ionic,并学习如何开始使用工具。

在本教程中,我们将介绍:

  • Ionic 是什么和它的各个组成部分
  • 为什么你会选择使用 Ionic
  • 如何为创建 Ionic 混合应用程序去设置你的电脑
  • 开发流程,从开始到部署应用程序

1. Ionic 堆栈:Cordova, Angular, Ionic

Ionic 包含并且统一管理了几种技术。 我喜欢把 Ionic 想成是由几个框架构成的一个堆栈。 是这些技术之间的相互作用创造了最终的应用程序,并且为开发者和使用者提供了一个好的体验。

Cordova:混合应用程序框架

作为一个基础,Ionic 使用 Cordova 作为混合应用程序的框架。 本质上,它允许一个 web 应用程序被打包进一个原生的应用程序,并且可以被安装在一个设备上。 它会嵌入一个 web 视图,而此 web 视图则是一个可以运行 web 应用程序的独立浏览器。

它还提供一个 API,你可以用它与设备本身进行通信,例如,获取 GPS 坐标或访问照相机。 许多这些额外的硬件功能是通过 Cordova 插件系统被启用的,所以你只需要安装和使用你需要的功能。 在以后的教程里,我会给你介绍更多关于 Cordova 的东西。

Angular:Web 应用程序框架

Angular 是一个众所周知的 Javascript 框架,用于构建 web 应用程序,Ionic 是建立在它之上的。 Angular 提供 web 应用程序逻辑,它可用来创建实际的应用程序。

如果你已经熟悉它,那么你就能够很快地掌握 Ionic 的特性。 如果你是 Angular 新手,你可以继续阅读,你将开始掌握一些基本的 Angular。

我不会讨论太多涉及 Angular 细节的东西,所以我建议你花一些时间,通过阅读 Angular 的文档来学习它的基础知识。

Ionic:用户界面框架

Ionic 的主要卖点是一组清新的用户界面组件,这些组件是专为移动设备而设计的。 当你创建一个原生的应用程序,会有原生的 SDK 为你提供一些界面组件,例如选项卡和对话框。

Ionic 提供了一组类似的界面组件,这些组件可以在混合应用程序中被使用。 Ionic 总声称它正是混合应用程序缺少的 SDK,并且它很好的担当了这个角色。 此外,Ionic 还有许多其他显著的特点,这些使其成为一个非常有吸引力的选择。

 2. 为什么是 Ionic

Ionic 不仅仅只是一组用户界面组件,它也是一组供开发人员使用的工具,还是一个用于快速构建混合移动应用程序的生态系统。 我会讲到为什么混合应用程序非常适合 web 开发人员,Ionic 平台和工具的详细信息,和在什么情况下 Ionic 并不适合你的项目。

为什么使用混合技术 V.S. 使用原生技术或移动网站技术

这里有些旧的争论,有关那些用不同方法创建的应用程序的品质之争。 几个月前,我写了一篇关于三类移动体验的详细文章。 如果你不确定这些不同的方法用在现代设备上的优缺点,我推荐你去看一下它。

混合应用程序的优势在于它能让 web 开发人员使用他们已有的技能去创建外观和体验都和原生应用程序相似的移动应用程序。

强大的工具 & Ionic 平台

很少有移动框架的工具质量能和Ionic的工具质量相媲美。 在余下的教程中我们仔细看一下主要的工具,但是我会介绍一些随着时间的推移你可能会发现有用的功能。

Ionic CLI

Ionic 的 CLI 工具是第一流的工具,它提供了大量的功能,那些功能可以帮助你开始一个项目,预览它,并最终创建它。

Ionic 平台

Ionic 提供了许多功能,一些是免费的一些不是,这对专业的发展非常有用,比如应用程序分析,推送通知和部署工具。

Ionic 市场

有许多付费的和免费的 Ionic 插件能被轻松地整合进你的应用程序中。 有主题,独特的组件,和其它插件。

Ionic 局限性

Ionic 不是对每一个移动应用程序都完美的适合。 考虑下面的情况,以决定 Ionic 是否是你项目正确的选择。

  • Ionic 不支持所有的平台。 Ionic 完全支持 IOS 和 Android,但对其它平台只有一定程度的支持。 它在平台最新的版本中表现的最好。 支持旧设备或更老的操作系统,可能会导致性能下降,这通常是由于在那些设备和系统中的浏览器没有执行的很好。
  • Ionic 不会给你一个真正的原生应用程序。 如果你的应用程序需要与原生平台进行重度交互,例如大量的图形处理,Ionic 可能无法提供所需的全部能力。 这是因为它需要借用 Cordova 才能让 web 应用程序连接到硬件,而这会增加一些滞后。

换句话说,如果你不需要为旧设备开发一个应用程序,并且不需要太多的针对硬件的编程,Ionic 完全能够为你的用户提供一个优质的应用程序体验。

安装 Ionic 和 Cordova

Ionic 带有一个极其出色的 CLI (命令行界面), 可以用来帮助启动、 构建和部署你的应用程序。 你会在开发过程中大量使用 CLI。 Ionic 也依赖于 Cordova,因此你会间接地使用它。

你必须先安装 Node.js。 如果你还没有这样做,就花点时间在你的系统里安装它。 在本教程中我使用 Node.js 5.6,我推荐使用最新的稳定版本。

安装 Ionic 和 Cordova 就跟安装两个 Node 全局模块一样简单。 如果你已经这样做过,那么这应该是相当熟悉的了。 打开你的终端并运行以下命令:

这会花一些时间,但你应该得到一个它们都已安装成功的消息。 你可以通过运行下面的命令并查看输出的版本号来验证你的安装是否成功。

它应该输出 Ionic 和 Cordova 的版本号。 为了本教程的目的,我使用 Ionic 版本1.7.14和 Cordova 版本 6.0.0。

Ionic CLI 中有相当多的功能,你总是可以通过运行 ionic help 获得一个快速参考。 如果需要,你还可以看看在线文档以获得更多的帮助。

其它安装

Ionic 没有捆绑所有的,用于构建一个应用程序所需的工具,它依赖一些额外的 SDK ,和由 Apple 和/或 Google 提供的软件。 去阅读并遵循 Cordova 的平台指南是正确的,这会对设置你想要使用的每个平台很有帮助。

你可以在以后这样做,但在你预览或者在模拟器或设备上模拟一个应用程序之前你需要先设置平台工具。

4. Ionic 开发流程

当你开发一个 Ionic 应用程序时,你将经历一组常规的步骤。 这些步骤都有相应的 CLI 命令来帮助你。 让我们看一下主要的命令,这些命令代表一个典型的,创建 Ionic 应用程序的开发流程。

第一步:开始一个项目

假设你已经有一个要做什么的基本思路,第一步就是创建一个新项目。 Ionic 项目都是基于 Cordova的,这需要搭一些脚手架让Cordova在后面了解你的项目。 Ionic 有几个预先建好的模板你可以用来生成一个起始项目,但你也可以提供你自己的。

要起始一个项目,运行 ionic start sample 命令。 它在当前的目录中创建一个新的文件夹,你所提供的名字将被用于目录名(比如 sample)。 当以上命令被执行,它会从 GitHub 下载一些创建项目需要的文件并初始化你的项目。 它会使用一个默认的项目模板,此项目模板是一个有基本功能的带选项卡界面的应用程序。

运行 cd sample 命令进入新建的目录。 当你查看当前的目录,你会注意到有几个文件和目录在其中。 此时不用太在意你所看到的每一个文件。 这里有一些事情你需要先做。

  • cordova.xml: 此文件包含 Cordova 的配置。
  • ionic.project: 此文件包含 Ioinc 的配置。
  • /plugins:此目录包含所有已安装的 Cordova 插件。 在最初,它会加载Ionic 为你预先安装的几个默认的插件。
  • /platforms:此目录包含所有你针对的,已经配置了你的应用程序的平台,如 Android 和 IOS。 Ionic 也可能会为你安装一个默认的平台。
  • /scss:此目录包含应用程序SASS样式的源文件。 你马上就会知道你可以自定义它。
  • /www:此目录包含被 Cordova 加载的 web 应用程序的文件。 你所有的 JavaScript,HTML 和 CSS文件都应该在此目录中。

对于本教程的其余部分,我们将用你刚刚建立的项目,去看看如何开发和预览应用程序。

第二步:开发和预览应用程序

你已经启动了一个项目,现在要开始开发了。 在开发的初期,你可能会想在浏览器中预览一下你所做的东西。 毕竟一个 Ionic 应用程序只是一个 web 应用程序。 Ionic 附带一个本地的开发服务器,此开发服务器可创建和为你的应用程序提供服务。

运行 ionic serve 去启动这个开发服务器。 一但此服务器被启动,它会在你默认的浏览器中打开应用程序的预览。 至此,你可以使用浏览器的开发者工具来检查此应用程序,看看是否有报错,并可做你建立一个Web应用程序时通常会做的所有其他任务。

此服务器会继续在后台运行并监视项目文件的更改。 当它检测到你编辑过并保存了一个文件时,它会为你自动重载浏览器。

使用开发者工具中的设备模拟器预览在 Chrome 中运行的 Ionic 应用程序

我推荐使用 Chrome 作为你的浏览器,因为它有强大的开发者工具可用。 一个特别有用的功能是它能够模拟设备的尺寸,这易于在特定的设备上预览你的应用程序。 它并不是一个真正的模拟器,像一个真的设备那样去运行应用程序,它只是模仿应用程序的尺寸。

第三部:添加一个平台

Cordova 支持许多不同类型的移动设备,我们称之为平台。 你必须去注册你的应用程序的目标平台并安装相应的项目文件。 幸运的是,这主要是通过 Ionic CLI 来实现的。 Ionic 完全支持 IOS 和 Android 平台。

运行 ionic platform add android 去添加一个平台。 用 ios 代替 android 去添加 IOS 平台。 一旦添加完成,在你项目的平台目录下你将会看见一个新的文件夹。 此文件夹包涵平台特定的文件。 通常,你需要避免对此目录下的文件进行太多的改动。

如果你遇上任何问题, 你可以删除这个平台然后再添加一边。 运行 ionic platform remove android 去删除一个平台。

第四部:模拟应用程序

在一些时候,你想在一个真的模拟器中预览你的应用程序。 模拟器本质上是一个真实设备的软件版本。 这对快速测试应用程序在真实设备上的表现很有用。 要注意的是,因为模拟器只是软件仿真设备,它不具有硬件设备的每项功能。

一些你的代码可能不会按预期工作,比如,如果你希望去使用该设备的联系人列表。 通常情况下,只有与硬件集成的功能可能无法按预期工作,但对大多数的东西,它应该工作的不错。

设置模拟器需要花点功夫,但这取决于你使用什么类型的电脑和你需要去测试什么。 你只能在一个运行 OS X 操作系统的电脑上去模拟一个 iPhone,而 Android 则能够在所有的操作系统里被模拟。 去设置一个模拟器,请参考我之前已提供链接的平台指南。

一旦你已完成模拟器的设置,你可以运行 ionic emulate android -c -l 去开启模拟。 就像之前说的那样,用 ios 代替 android 如果你的目标平台是 IOS。 这会在模拟器中创建,安装和启动你的应用程序。 这需要一些时间,所以你可能需要使用一些有用动态加载功能,正如你之前在浏览器中做的一样。

你可以使用可选参数 -l 在模拟器中动态地重新加载应用程序(不需要重新创建和安装)。 这个很有帮助只要你不改变任何有关该应用程序构建的设置(比如 Cordova 的设置)。 你还可以用可选参数 -c 去把控制台消息发送到终端日志。 我几乎每一次都会使用它们。

第五步:把应用程序部署到设备

预览你的应用程序的最佳方法就是在设备上安装并运行它。 这需要你有设置好的平台和与你电脑相连的设备。 此操作需要一些不同的基于你所有拥有设备类型的配置。 你可以参考上面的平台指南,去连接你的设备。

一旦你已连接上一台设备,从命令行运行应用程序是十分简单的。 使用 ionic run android -c -l ,Ionic 则会创建,部署和启动你的应用程序。 再一次,你可以用 ios 代替 android。 就像模拟器命令一样,你可以用可选参数 -l-c 去启用动态重载和转移控制台日志记录到终端。

一旦应用程序被安装在你的设备上,你就可以断开电脑和设备的连接,而安装好的应用程序将留在设备上。 如果你想在一段时间内测试它的表现并展示给别人看,这将会很有用。

5. 什么是 Ionic 2

我经常会被问到有关 Ionic 2 和是否应该使用它的问题。 在2016年初,写这篇文章的时候,对此仍然还没有一个简单的答案。 我用它创建过一些原型,我知道有些人已经用它创建了一些生产应用程序,但它还没有准备好。

好消息是,你今天学习 Ionic 1 意味着学习 Ionic 2 将是相当简单的。 你在这个系列里学习到的大部分 Ionic 特有的东西将在不同的版本里保持一致。 最大的变化将会因Ionic 2是建立在Angular 2之上而发生的。

所以,当你今天可以创建 Ionic 2 应用程序时,它还没有被正式的发布。 现在学习Ionic 1,你并不会浪费任何时间。 一旦 Ionic 2 正式发布,升级应该是相对简单的。

总结

在本篇教程中,我们讨论了很多关于Ionic的东西。

  • 你学习了一些有关Ionic的优缺点。
  • 你为创建Ionic应用程序而设置你的电脑。
  • 你创建了你的第一个项目并在浏览器中预览它。
  • 你设置了一个模拟器并且/或者连接上你的设备去预览你的应用程序。

在本系列的下一个部分,你将开始用本教程中列出的技术,创建一个真实且实用的应用程序。

创建一个Ionic 模板并赢取$1000

如果你已经熟悉了Ionic框架,你也许会考虑进入Envato之最想要的Ionic模板比赛。 怎么做?创建一个独特的Ionic模板,并在2016年4月27日之前提交给 Envato 市场。

最好的5个模板会获得$1000奖励。 有兴趣吗? 在大赛的网站上可以了解到更多的有关比赛要求和指南的详细信息。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.