Ionic！用Web技术开发移动应用！

小编说：只需掌握Web技术就能开发移动应用是不是很爽？Ionic就可以做到！Ionic是近几年很火的一项跨平台开发技术，有了它之后，用我们熟知的HTML、CSS和JavaScript技术就可以同时开发iOS和Android应用。让我们来初步了解下Ionic吧！

1

Ionic是什么

Ionic 通过整合各种技术和功能使构建Hybrid 应用更加快速、容易和美观。Ionic 的生态系统基于Angular 和Cordova，前者是Web 应用框架，后者是构建和打包原生应用的工具。

下图展示了整个技术栈的概况

技术栈的起点是用户在设备上打开应用。假设是一台运行iOS 的iPhone 或者一台运行Android 的Nexus 10。下面是各个部分的介绍。

• 设备—设备可以加载应用。设备中的操作系统负责安装从平台对应商店下载的应用。操作系统还会提供一系列应用可以使用的功能API，比如GPS 位置、通讯录列表和照相机。
• „Cordova 应用包装器—这是一个能够加载Web 应用代码的原生应用。Cordova 是一个平台，用于构建能够执行HTML、CSS 和JavaScript 的原生应用，这种应用被称为Hybrid 移动应用。它是平台和应用之间的桥梁，可以创建一个能够安装的原生应用（上图 中被称作应用封装器）。这个原生应用中包含WebView（实际上是一个独立的浏览器窗口），可以通过JavaScriptAPI 来运行Web 应用。
• „Cordova JavaScript API—这是沟通应用和设备的桥梁，应用封装器可以通过JavaScript API 来联通Web 应用和原生平台。具体的实现细节不用在意，总之最后Cordova 会帮你生成原生应用。
• Angular—用来控制应用路由和功能的Web 应用。Angular Web 应用运行在WebView 中。Angular 是一个流行的Web 应用构建框架，主要管理Web 应用的逻辑和数据。
• „Ionic—控制应用中用户界面组件的渲染。Ionic 基于Angular 构建，主要用来设计用户界面和用户体验。Ionic 包含一些视觉元素，比如选项卡、按钮、导航头部。这些界面控件是Ionic 的核心，可以在Hybrid 应用中提供接近原生界面的体验。Ionic 还提供了许多功能和特性，可以帮助你完成创建- 预览-发布整个流程。

Ionic 将上述这些技术整合起来，成为一个非常强大的移动端应用开发平台。现在你对Ionic 及其相关技术有了初步了解，下面我们来对比一下三种主流的移动应用，同时介绍Ionic 的优势。

2

移动开发类型

为移动设备开发应用有好几种方法，有必要知道每种方法的优点和缺点。一共有三种基础类型：原生应用、移动端网站和Hybrid 应用，我们会详细介绍它们的区别。

在下图中，你可以看到三种类型在设计和架构上的对比。图中还展示了应用如何通过访问数据库或者Web 服务API 来加载数据。

2.1

原生移动应用

要创建原生应用，开发者需要使用移动平台默认的语言，对iOS 来说是Objective-C或者Swift，对Android 来说是Java。写完之后需要编译应用并把它安装到设备上。开发者可以使用平台的软件开发套件（SDK）来和平台API 通信，从而可以访问设备中的数据或者使用HTTP 请求从外部服务器加载数据。

iOS 和Android 都提供了一系列预先定义好的API，可帮助开发者在可控的范围内使用平台特性。有许多官方或者非官方出品的工具可以辅助开发原生应用。对开发者来说，在原生应用中使用框架来简化开发是很常见的。

原生应用的好处

比起Hybrid 应用和移动端网站，原生应用有很多好处，主要得益于和设备平台紧密结合：

• „原生API—原生应用可以在应用中直接使用原生API，这和平台的交流最紧密。
• „性能—原生应用性能最好。
• „环境相同—原生应用使用原生API 写成，对于其他原生开发者来说很容易理解。
• 但是原生应用也有很多缺点。

原生应用的缺点

原生应用的缺点主要是开发和维护难度大。

• „语言要求—原生应用要求开发者掌握平台对应的语言（比如Java）并且知道如何使用平台提供的API。
• „不支持跨平台—每个平台都要单独开发。
• „费时费力—通常来说，需要做很多构建工作，增加成本。

如果（老板要求）你不得不使用Java 和Objective-C 或者团队有大量资源并且真的需要原生应用带来的好处，那最好的选择就是原生应用。除此之外，你最好考虑其他类型的应用。

2.2

移动端网站（Web 应用）

移动端网站或者说Web 应用很适合移动设备使用，可以在手机浏览器中访问。Web 应用就是在手机浏览器中访问的网站，它们专门被设计成适合手机屏幕尺寸。

有些网站的设计者会专门为移动设备开发一个版本。你在移动设备上访问网站的时候可能会被重定向到另一个功能有限的版本。比如访问eBay，你会被重定向到http://m.ebay.com 子域名。而访问其他一些网站，比如www.bostonglobe.com 时，你会发现网站的设计会根据设备的类型和屏幕尺寸进行调整。这用到了被称为响应式设计的技术。网站的内容会根据浏览器窗口尺寸自动调整大小，有些内容甚至会被隐藏起来。

移动端网站的优点

移动端网站有很多优点，主要体现在效率和设备兼容性上。

• „可维护性—移动端网站很容易更新和维护，没有任何审核流程，也不需要更新设备上的程序。
• „免安装—网站在互联网中，不需要安装到移动设备中。
• „跨平台—所有移动设备都有浏览器，它们都可以访问你的应用。

和原生应用相比，移动端网站也有很多缺点。

移动端网站的缺点

移动端网站运行在手机浏览器中，因此有很多限制和缺点。

• „不具备原生访问能力—因为移动端网站运行在浏览器中，它们不能访问原生API 和平台，只能访问浏览器提供的API。
• „需要使用键盘—用户必须在浏览器中输入地址来寻找或者使用移动端网站，这比单击一个图标困难多了。
• „受限的用户界面—很难创建对触摸友好的应用，尤其是当要同时兼容桌面版时。
• „移动端访问量下降—用户在移动设备上访问网站的时间不断减少，使用应用的时间越来越多。

不同的产品和服务需求不同，即使你已经有了移动端应用，可能还是需要一个移动端网站。不过总体来说，移动端网站的重要性不断下降，研究表明用户使用应用的时间更多。

2.3

Hybrid 应用

Hybrid 应用指的是包含独立浏览器实例的移动应用，这个实例通常被称作Web-View，可以在原生应用中运行Web 应用。Hybrid 应用会使用原生应用封装器来实现WebView 和原生设备平台的通信。这意味着Web 应用可以运行在移动设备上，并且可以访问设备的功能，比如照相机和GPS。

有很多工具可以实现WebView 和原生平台之间的通信，从而让Hybrid 应用成为可能。发布这些工具的并不是iOS 或者Android 官方平台，而是第三方，比如Apache Cordova。编译Hybrid 应用时，你的Web 应用会被转换成一个原生应用。

Hybrid 应用的优点

相比移动端网站和原生应用，Hybrid 应用有一些优点，这也是它成为有力竞争者的原因。

• „跨平台—可以只开发一次，部署到多个平台，最小化开发成本。
• „和Web 开发共用技术—可以使用开发网站和Web 应用的技术来开发移动应用。
• „设备访问能力—因为WebView 被封装在原生应用中，你的应用让你可以像原生应用一样访问所有的设备功能。
• „简化开发—开发流程简单快捷，不需要为了预览重复构建。也可以继续使用构建网站的那一套开发工具。

Hybrid 应用允许使用Web 平台的技术开发移动应用，你可以像开发网站一样开发应用的绝大部分功能。当需要使用原生API 时，Hybrid 应用框架会把API 桥接到JavaScript 中。你的应用可以像检测单击和键盘事件一样检测扫动和捏合手势。不过，如你所料，Hybrid 应用也有一些缺点。

Hybrid 应用的缺点

因为身处WebView 中，受到原生集成的限制，Hybrid 应用有如下一些缺点。

• WebView 限制—应用只能运行在WebView 实例中，这意味着应用的性能取决于浏览器。
• „通过插件访问原生功能—你需要的原生API 现在可能还没有插件实现，可能需要一些额外的开发工作来进行桥接。
• „没有原生用户界面控件—如果没有Ionic 这样的工具，开发者需要创建所有的用户界面元素。

有了Ionic，你可以使用Web 开发者已经熟悉的知识和技能来构建Hybrid 应用。