基于Ionic和Cordova的跨平台移动APP的研究与应用

朱凯南++李艳平++申闫春++魏邓航++余越

摘要：Ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的开发框架。该文讨论了如何基于Ionic和Cordova（PhoneGap）开发跨平台移动端HybridApp。使用web技术开发App，要应对很多移动端原生功能调用的问题，Cordova的插件提供了丰富的原生接口，该文中也介绍了部分插件的应用。

关键词：Ionic；Cordova；HTML5；跨平台；HybridApp

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2016）01-0119-03

The Research of Multi-platform Apps Based On Ionic And Cordova（PhoneGap）

ZHU Kai-nan，LI Yan-ping，SHEN Yan-chun， WEI Deng-hang，YU Yue

（School of Computer Science of Beijing Information Science & Technology University， Beijing 100101， China）

Abstract： Free and open source， Ionic offers a library of mobile-optimized HTML， CSS and JS components， gestures， and tools for building highly interactive apps. In this paper， how to build a multi-platform hybrid app based on Ionic and Cordova is discussed. Developing apps with web model will come to some problems on how to use the native functions provided by the mobilephone，Cordova plugins supplied rich APIs to solve these problems， this paper relates to some useful plugins.

Key words：Ionic；Cordova；HTML5；Multi-platform；HybridApp

1 概述

1.1 背景

智能手机已经成为了人们生活中不可或缺的工具，移动互联网也越来越成为人们生活、学习、工作和娱乐的载体，而随着手机硬件的不断升级，WIFI的广泛覆盖，以及4G网络的发展，使得多种多样功能丰富的应用在移动端的实现成为潮流。但是市场上存在着多操作系统，多型号的移动智能终端，单就安卓一家来看，开发者就几乎要应对碎片级的屏幕和系统差异，这大大提高可移动应用开发的成本。

在本文中我们讨论如何用Ionic，AngularJs等web技术和Cordova打包封装来应对跨平台的移动应用开发问题。

1.2 混合模式应用概念阐述

混合模式（hybrid）应用是相对于Native App和Web App而言的。Native App指的是依托于手机本地操作系统，使用原生程式编写的应用程序。Web App指的是采用HTML5语言写出，生存于浏览器中的网页应用。

而Hybrid App则是这两种模式混合开发出的应用程序，也需要下载安装，但访问的内容是基于Web的，拥有Web App跨平台和终端的优点，同时又看起来像一个Native App，能够使用提供各种系统级别的服务，有良好的用户体验。

2 基于Ionic和Cordova的跨平台应用创建与开发

2.1 应用设计选型

移动端的前端展示，基于Ionic的UI框架和UI组件，混合HTML和CSS来完成，可以应对Android和IOS的跨平台和屏幕适配问题。业务逻辑采用AngularJs和原生Javascript来编写，AngularJs遵循软件工程的MVC模式，为web应用像传统服务器端一样编程提供了解决方案。

涉及移动设备的原生接口的调用，采用Cordova的插件和API接口，最终用Cordova打包发布适用于不同平台的应用。

如果应用涉及到服务器端的支持，采取轻量的数据格式json与服务器端进行数据交互，而对服务器端程序编写的语言和模式几乎没有限制。考虑到移动端和服务器端交互的通信和功能的性能，可以采用RESTful架构。

2.2 Cordova及其运行机制简述

Cordova是一款开放源代码的App开发框架，旨在让开发者使用HTML、Javascript、CSS等Web APIs开发跨平台的移动平台应用程序，其原名为 PhoneGap，Adobe 收购Nitobi 公司后，PhoneGap 商标保留，代码贡献给了 Apache 基金会，而Apache 将其命名为 Apache Callback，其后发布新版本时，定名为 Apache Cordova。

图1 PhoneGap与设备本地API通信图

Cordova架构拥有强大的跨平台访问设备能力，但是其工作原理并不神秘，iPhone和Android平台共同点是都有内置的WebView组件，其具备两个特性：WebView组件实质是移动设备的内置浏览器，WebView这个内置浏览器特性是Web能被打包成本地客户端的基础，可方便的用HTML5、CSS3页面布局，这是移动Web技术的优势相对于原生开发；WebView提供Web和设备本地API双向通信的能力。