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

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

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

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：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)成為了人們生活中不可或缺的工具，移動(dòng)互聯(lián)網(wǎng)也越來(lái)越成為人們生活、學(xué)習(xí)、工作和娛樂(lè)的載體，而隨著手機(jī)硬件的不斷升級(jí)，WIFI的廣泛覆蓋，以及4G網(wǎng)絡(luò)的發(fā)展，使得多種多樣功能豐富的應(yīng)用在移動(dòng)端的實(shí)現(xiàn)成為潮流。但是市場(chǎng)上存在著多操作系統(tǒng)，多型號(hào)的移動(dòng)智能終端，單就安卓一家來(lái)看，開(kāi)發(fā)者就幾乎要應(yīng)對(duì)碎片級(jí)的屏幕和系統(tǒng)差異，這大大提高可移動(dòng)應(yīng)用開(kāi)發(fā)的成本。

在本文中我們討論如何用Ionic，AngularJs等web技術(shù)和Cordova打包封裝來(lái)應(yīng)對(duì)跨平臺(tái)的移動(dòng)應(yīng)用開(kāi)發(fā)問(wèn)題。

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

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

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

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

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

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

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

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

2.2 Cordova及其運(yùn)行機(jī)制簡(jiǎn)述

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

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

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