基于Ionic和Cordova的跨平臺移動APP的研究與應(yīng)用

朱凱南++李艷平++申閆春++魏鄧航++余越

摘要：Ionic是一個專注于用WEB開發(fā)技術(shù)，基于HTML5創(chuàng)建類似于手機(jī)平臺原生應(yīng)用的開發(fā)框架。該文討論了如何基于Ionic和Cordova（PhoneGap）開發(fā)跨平臺移動端HybridApp。使用web技術(shù)開發(fā)App，要應(yīng)對很多移動端原生功能調(diào)用的問題，Cordova的插件提供了豐富的原生接口，該文中也介紹了部分插件的應(yīng)用。

關(guān)鍵詞：Ionic；Cordova；HTML5；跨平臺；HybridApp

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：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 背景

智能手機(jī)已經(jīng)成為了人們生活中不可或缺的工具，移動互聯(lián)網(wǎng)也越來越成為人們生活、學(xué)習(xí)、工作和娛樂的載體，而隨著手機(jī)硬件的不斷升級，WIFI的廣泛覆蓋，以及4G網(wǎng)絡(luò)的發(fā)展，使得多種多樣功能豐富的應(yīng)用在移動端的實現(xiàn)成為潮流。但是市場上存在著多操作系統(tǒng)，多型號的移動智能終端，單就安卓一家來看，開發(fā)者就幾乎要應(yīng)對碎片級的屏幕和系統(tǒng)差異，這大大提高可移動應(yīng)用開發(fā)的成本。

在本文中我們討論如何用Ionic，AngularJs等web技術(shù)和Cordova打包封裝來應(yīng)對跨平臺的移動應(yīng)用開發(fā)問題。

1.2 混合模式應(yīng)用概念闡述

混合模式（hybrid）應(yīng)用是相對于Native App和Web App而言的。Native App指的是依托于手機(jī)本地操作系統(tǒng)，使用原生程式編寫的應(yīng)用程序。Web App指的是采用HTML5語言寫出，生存于瀏覽器中的網(wǎng)頁應(yīng)用。

而Hybrid App則是這兩種模式混合開發(fā)出的應(yīng)用程序，也需要下載安裝，但訪問的內(nèi)容是基于Web的，擁有Web App跨平臺和終端的優(yōu)點，同時又看起來像一個Native App，能夠使用提供各種系統(tǒng)級別的服務(wù)，有良好的用戶體驗。

2 基于Ionic和Cordova的跨平臺應(yīng)用創(chuàng)建與開發(fā)

2.1 應(yīng)用設(shè)計選型

移動端的前端展示，基于Ionic的UI框架和UI組件，混合HTML和CSS來完成，可以應(yīng)對Android和IOS的跨平臺和屏幕適配問題。業(yè)務(wù)邏輯采用AngularJs和原生Javascript來編寫，AngularJs遵循軟件工程的MVC模式，為web應(yīng)用像傳統(tǒng)服務(wù)器端一樣編程提供了解決方案。

涉及移動設(shè)備的原生接口的調(diào)用，采用Cordova的插件和API接口，最終用Cordova打包發(fā)布適用于不同平臺的應(yīng)用。

如果應(yīng)用涉及到服務(wù)器端的支持，采取輕量的數(shù)據(jù)格式j(luò)son與服務(wù)器端進(jìn)行數(shù)據(jù)交互，而對服務(wù)器端程序編寫的語言和模式幾乎沒有限制?？紤]到移動端和服務(wù)器端交互的通信和功能的性能，可以采用RESTful架構(gòu)。

2.2 Cordova及其運行機(jī)制簡述

Cordova是一款開放源代碼的App開發(fā)框架，旨在讓開發(fā)者使用HTML、Javascript、CSS等Web APIs開發(fā)跨平臺的移動平臺應(yīng)用程序，其原名為 PhoneGap，Adobe 收購Nitobi 公司后，PhoneGap 商標(biāo)保留，代碼貢獻(xiàn)給了 Apache 基金會，而Apache 將其命名為 Apache Callback，其后發(fā)布新版本時，定名為 Apache Cordova。

圖1 PhoneGap與設(shè)備本地API通信圖

Cordova架構(gòu)擁有強大的跨平臺訪問設(shè)備能力，但是其工作原理并不神秘，iPhone和Android平臺共同點是都有內(nèi)置的WebView組件，其具備兩個特性：WebView組件實質(zhì)是移動設(shè)備的內(nèi)置瀏覽器，WebView這個內(nèi)置瀏覽器特性是Web能被打包成本地客戶端的基礎(chǔ)，可方便的用HTML5、CSS3頁面布局，這是移動Web技術(shù)的優(yōu)勢相對于原生開發(fā)；WebView提供Web和設(shè)備本地API雙向通信的能力。