Ionic在混合模式APP中应用.doc

Ionic在混合模式APP中应用 　　摘要摘要：Ionic是Hybrid App混合模式下实现跨平台移动应用开发的一种方案，以其开源的代码库让开发者使用Web技术如HTML、CSS、AngularJS等开发出具有原生体验的移动应用。分析Ionic关键技术，介绍如何基于Ionic平台创建高性能且美观的跨平台移动端Hybrid APP，并结合其主要技术设计一款移动地铁应用。实践证明，使用Ionic技术能够实现高效的移动端应用开发，从而解决了原生应用开发时间长、难度大、无法实现跨平台等缺陷 关键词关键词：Ionic；跨平台；移动应用；Hybrid App开发 DOIDOI：10.11907/rjdk.171018 中图分类号：TP319 文献标识码：A文章编号文章编号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 匹配的路由机制