Ionic在混合模式APP中的应用
2017-05-31 19:38商锦林亮王雨
软件导刊 2017年5期
商锦 林亮 王雨
摘要摘要：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及相应的控制器。
基于上述路由机制，为了便于区分状态机及控制器，在项目包含的js文件夹会看到3个不同的js文件。
app.js用于为整个应用配置状态机，controller.js用于内联模块的状态跳转，services.js用于存放本地数据。
3.2Ionic 关键视图
默认模板创建的项目中有一个templates文件夹，用于存放各内联模块具体实现的html文件，其中index.html是总视图文件，相当于源程序中的main函数，运行即可查看整个应用。
（1）模板视图。在Ionic 中，总是使用指令
（2）导航栏。
（3）内容。
3.3Ionic 侧边栏
在Ionic项目中灵活运用内置的侧边栏可以创建美观实用的应用界面。侧边栏菜单是一个最多包含3个子容器的元素，包括：ionsidemenucontent、ionsidemenuleft、ionsidemenuright。默认情况下，侧边栏菜单将只显示中间容器的内容。向左滑動时，将显示右边栏容器的内容；向右滑动时，将显示左边栏容器的内容。
3.4Ionic tab结合高级路由
iontabs是选项卡组件，即带有标签栏的多标签界面，功能是通过标签切换一组“页面”。在某个元素上可以指定任何标签类或动画类来定义它的外观和感觉。选项卡默认位置是在下端，可以通过设置调节选项卡的位置及风格。
通过tabs可以轻松切换不同的功能状态，iontabs触发状态迁移有3种方式：①在controller里调用$state.go（）方法，便利而高效；②点击包含 uisref 指令的链接 Go State 1，响应较慢；③通过href导航到与状态相关联的url。
4Ionic在移动地铁售票系统中的应用
此款移动地铁应用采用Ionic框架进行开发[4]，涉及的主要功能有：查看地铁站台信息、在线购票及充值交通卡、浏览地铁相关新闻等。应用充分利用了Ionic的ModelViewViewModel特性及其提供的UI组件进行设计，具有功能完善、性能良好、界面美观等特点。
4.1路由设计（以购票功能为例）
（1）app.js中的状态机配置。
5结语
在Ionic平台上开发，充分发挥此框架代码的开源性、良好的UI设计、相比于其它h5开发的APP运行更流畅等优点[56]。同时由于技术不够完善，在低版本的安卓及iOS平台上运行会出现卡顿现象。因此，应利用Ionic代码库的开源特性不断完善框架的稳定性与适配性，实现更好的性能。
参考文献参考文献：
[1]汪佳佳.MUI在web APP开发中的应用与研究[J].数码世界，2016（10）：12.
[2]冯明.基于混合模式（Hybrid App）移动终端设计的方法[J].数字技术与应用，2015（4）：148149.
[3]朱凯南，李艳平，申闫春，等.基于Ionic和Cordova的跨平台移动APP的研究与应用[J].电脑知识与技术，2016，12（1）：119121.
[4]陈理兵.基于Ionic的某医院移动办公系统设计与实现[D].厦门：厦门大学，2015.
[5]聂启阳.基于HTML5的政府移动OA系统设计与实现[J].网络安全技术与应用，2014（7）：4141.
[6]JEREMYWILKEN，威尔肯斯，奇舞团.Ionic实战：基于Angular JS的移动混合应用开发[M].北京：电子工业出版社，2016.
责任编辑（责任编辑：孙娟）
猜你喜欢
军民两用技术与产品(2022年5期)2022-06-28
电脑报(2021年11期)2021-07-01
测控技术(2018年9期)2018-11-25
东方教育(2016年18期)2017-01-16
电测与仪表(2015年21期)2015-04-09
电机与控制应用(2015年1期)2015-03-01
浙江理工大学学报(自然科学版)(2015年5期)2015-03-01
