Ionic在混合模式APP中的应用

摘要摘要：Ionic是Hybrid App混合模式下实现跨平台移动应用开发的一种方案，以其开源的代码库让开发者使用Web技术如HTML、CSS、AngularJS等开发出具有原生体验的移动应用。分析Ionic关键技术，介绍如何基于Ionic平台创建高性能且美观的跨平台移动端Hybrid APP，并结合其主要技术设计一款移动地铁应用。实践证明，使用Ionic技术能够实现高效的移动端应用开发，从而解决了原生应用开发时间长、难度大、无法实现跨平台等缺陷。

关键词关键词：Ionic；跨平台；移动应用；Hybrid App开发

DOIDOI：10.11907/rjdk.171018

中图分类号：TP319

文献标识码：A文章编号文章编号：16727800（2017）005013203

1移动开发模式

近年来，随着移动技术的发展与进步，以及操作系统的增多，加上对APP需求量的不断增加，开发APP的方案已越来越多。目前有3种主流移动应用开发模式，分别是Native APP、Web APP及Hybrid APP。

（1）Native APP。Native APP 指原生APP，一般依靠操作系统，具有很强的交互性，是一个完整的APP，可拓展性不强。简单来说，原生应用是特别为某种操作系统而开发，比如iOS系统、Android系统、黑莓等，它们在各自的移动设备上运行。原生APP开发时间长、学习难度大且无法实现跨平台开发，但仍是主流模式之一。

（2）Web APP。Web APP 指采用Html5网页语言写出的APP[1]，不需下载安装即可运行使用。类似于轻应用的概念。Web APP是生存在浏览器中的应用，某种程度上而言是触屏版的网页应用。Web应用本质上是为移动浏览器设计的基于Web的应用，它们是用普通Web开发语言开发的，可以在各种智能手机浏览器上运行。但其过分依赖于网络，且有时出现适配性不好的问题，用户体验效果差。

（3）Hybrid APP。Hybrid APP（混合型应用）指介于WebAPP、NativeAPP这两者之间的APP[2]，它虽然看上去是一个Native APP，但只有一个UI WebView，访问的是一个Web APP。Hybrid APP兼具Native APP良好用户交互体验优势和Web APP跨平_开发优势。

由此可以看出，Hybrid APP具有开发成本低、后期维护容易、可扩展性较好等特点，是很有潜力的一种模式。本文主要对Hybrid技术进行讨论。

Ionic是一个用来开发混合模式手机应用的、开源的、免费的代码库。本质上是基于MVC设计模式和angularJS基础，先开发出Web应用，再将其打包成不同移动平台的apk。Ionic被誉为是目前最有潜力的一款混合模式手机应用开发框架。

2Ionic开发平台

2.1Ionic技术特点

Ionic是Hybrid APP开发模式中发展较快的专注于用Web开发的技术框架，有如下几个显著特点：①Ionic是一种轻量级的框架，支持Angularjs 的特性，MVVM（ModelViewViewModel），代码易维护；②提供了漂亮的设计，通过 SASS 构建应用程序，以其内置的很多 UI 组件来帮助开发者开发强大的应用，UI体验效果极佳；③使用HTML5+CSS3+JavaScript技术编写Web端应用，通过Ionic平台提供的本地打包服务生成Android和iOS平台安装运行的APP应用，实现跨平台开发[3]。

2.2平台搭建

首先安装Node.js，可以直接在官网下载并安装，接着在电脑的终端页面使用命令：$ npm install g cordova ionic，将自动下载最新版本的cordova 和 ionic commandline tools，可以通过参考Android 和 iOS 官方文档来安装。Webstorm IDE是网页语言编辑器，也是在官网下载并默认安装即可。

2.3通过Ionic创建项目

直接通过cmd命令符创建一个Ionic项目，可以使用Ionic官方提供的现成的应用程序模板，或用一个空白的项目创建一个Ionic应用。例如，创建一个空白项目：$ionic start demo blank，创建一个含选项卡组件的应用：$ionic start demo tabs，创建一个含侧边栏组件的应用：$ionic start demo sidemenu。

3Ionic关键技术

3.1Ionic路由管理机制

在单页应用中，路由的管理非常重要。ionic.js使用的是AngularUI 项目的 uirouter 模块。与通常基于 URL 匹配的路由机制不同，uiroute 是基于状态机的导航。 uirouter 的核心理念是将子视图集合抽象为一个状态机，导航意味着状态的切换。在不同状态下，ionic.js 渲染对应的子视图（动态加载的 HTML 片段）就实现了路由导航的功能。

由图1可以看出，路由机制可以大致分为3个过程：

（1）在js文件中使用go（）方法驱动状态机跳转到“state2”这个状态。在uiroute中的 $state服务就是一个状态机实例，在任何时刻，可以使用其 go（）方法跳转到指定名称的状态。

（2）$state服务读取“state2”状态的配置服务，如模板。视图元素ui view 有多个状态，比如：state1/state2/state3。在任何一个时刻，视图元素只能处于某一状态下，处于何种状态取决于状态机的跳转。

（3）$state服务将“state2”对应的模板插入到视图文件中，通过动态加载HTML片段看到状态所对应的视图。在$stateProvider服务中，配置着不同内联模块的id及相应的控制器。