基于PhoneGap跨平臺移動開發(fā)框架的研究與應(yīng)用

戴炳榮，王宇飛，王凌，陸奇峰，徐承宇

（1.上海市計算機軟件技術(shù)開發(fā)中心，上海 201112；2.上海市計算機軟件評測重點實驗室，上海 201112；3.西安交通大學(xué)，西安　710049）

基于PhoneGap跨平臺移動開發(fā)框架的研究與應(yīng)用

戴炳榮1，2，王宇飛3，王凌1，陸奇峰1，徐承宇1

（1.上海市計算機軟件技術(shù)開發(fā)中心，上海 201112；2.上海市計算機軟件評測重點實驗室，上海 201112；3.西安交通大學(xué)，西安710049）

快速發(fā)展的移動互聯(lián)網(wǎng)技術(shù)使得移動終端成為實現(xiàn)對互聯(lián)網(wǎng)訪問的一種主流途徑。目前主流的移動應(yīng)用有移動網(wǎng)站、App、微信，移動終端操作系統(tǒng)有Android、iOS和Windows Phone。同一款移動應(yīng)用若想覆蓋三種操作系統(tǒng)，須逐一進行開發(fā)。這就造成移動終端研發(fā)復(fù)雜、風格統(tǒng)一困難、運維成本大等問題。針對這種情況，提出采用HTML5及PhoneGap等技術(shù)，解決移動網(wǎng)站、App、微信端的研發(fā)差異性。最后，搭建完整地系統(tǒng)技術(shù)架構(gòu)，并以網(wǎng)站購物為例驗證跨平臺移動建站的可行性。

HTML5；跨平臺；移動建站；PhoneGap

0　引言

隨著移動互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展、移動終端設(shè)備普及率的不斷提高，移動應(yīng)用已滲透到生活中的每個角落。在目前的市場中主流的移動應(yīng)用包含了：移動網(wǎng)站、App、微信；主流的移動終端操作系統(tǒng)包含了：Android、iOS和Windows Phone［1］。不同的操作系統(tǒng)之間的訪問接口差異大，如果同一款移動應(yīng)用需要同時覆蓋以上幾種平臺，則必須要針對不同的平臺分別進行研發(fā)。于是帶來了移動終端重復(fù)研發(fā)、風格統(tǒng)一困難、運維成本大等問題。為了解決這一問題，朱宇翔在對PhoneGap功能特點、通信機制以及各類API研究的基礎(chǔ)上，實現(xiàn)了移動中間件在通信、網(wǎng)絡(luò)、多媒體等五個方面的功能擴展，提高了開發(fā)的效率［2］。潘春華等人深入研究了PhoneGap的框架、特性以及原理，提出并實踐了一種跨平臺的移動應(yīng)用解決方案［3］。胡勇、代紅兵等人分析了PhoneGap跨平臺原理，闡述了相機、定位系統(tǒng)等插件功能的實現(xiàn)，有益于解決JSON數(shù)據(jù)讀取和地圖定位不精確的問題［4］。

這里通過對當前的移動開發(fā)解決方案以及主流開發(fā)技術(shù)進行深入的研究分析，提出了一套以HTML5和PhoneGap等技術(shù)來實現(xiàn)跨平臺移動應(yīng)用的方案，通過對關(guān)鍵技術(shù)點的研究，搭建了一個完整的系統(tǒng)技術(shù)架構(gòu)，并通過一個網(wǎng)站購物系統(tǒng)的實例來對此方案的可行性進行驗證。

1　移動應(yīng)用開發(fā)技術(shù)比較

目前主流的移動應(yīng)用類型分為三種，即基于B/S架構(gòu)的移動網(wǎng)站、移動App、基于微信平臺的二次研發(fā)。

1.1基于B/S架構(gòu)的移動網(wǎng)站

通過服務(wù)器Server+手機Web瀏覽器的架構(gòu)模式，使用瀏覽器的內(nèi)核WebKit，來解析服務(wù)器端推送的頁面與數(shù)據(jù)。WebKit內(nèi)核采用W3C標準技術(shù)規(guī)范，統(tǒng)一解析服務(wù)器端的HTML5、CSS3、JavaScript頁面，數(shù)據(jù)接口支持XML、JSON格式，同時還包括與平臺相關(guān)的一些功能，如圖片、字體、輸入法、I/O交互等。

1.2移動App應(yīng)用

傳統(tǒng)的移動應(yīng)用需要根據(jù)手機的不同類型的操作系統(tǒng)進行針對性的開發(fā)。主流操作系統(tǒng)的安裝包有Android系統(tǒng)的APK安裝包，iOS系統(tǒng)的PXL、DEB、IPA安裝包。移動應(yīng)用程序的研發(fā)當前主要采用了：1.原生開發(fā)、2.跨平臺技術(shù)開發(fā)，這兩種技術(shù)路線［5］。原生開發(fā)采用了底層所提供的一套標準接口，不同的操作系統(tǒng)會提供不同的標準接口與開發(fā)語言。跨平臺技術(shù)開發(fā)會將不同手機的原生態(tài)接口進行統(tǒng)一的封裝，對外提供可以進行調(diào)用的JavaScript接口函數(shù)。以Phone-Gap跨平臺技術(shù)為例，使用callCamera（）函數(shù)，可以忽略平臺的差異性，在Android、iOS、Windows Phone操作系統(tǒng)的手機上，統(tǒng)一為調(diào)用照相機功能。跨平臺App研發(fā)避免了手機操作系統(tǒng)的差異性，對于運行在不同操作系統(tǒng)下的同一款移動App，只需進行一次開發(fā)，便可各處運行。

1.3基于開放平臺的應(yīng)用

在安裝騰訊公司提供的微信軟件基礎(chǔ)上，使用微信提供的接口，進行微信門戶網(wǎng)站的二次開發(fā)。目前，微信已經(jīng)發(fā)展成一個“平臺App”或“智能App Store”，各種原生態(tài)的App應(yīng)用正逐漸融合到微信上，面向企業(yè)、政府、社會名人等，建立個性化的二次開發(fā)［6］。微信二次開發(fā)具有跨平臺、多媒體、消息實時推送等顯著特點。

目前主流的三種移動應(yīng)用類型都對HTML5技術(shù)具有非常好的支持，這使得采用HTML5技術(shù)進行跨應(yīng)用建站有了可能，其關(guān)鍵是如何針對不同的移動應(yīng)用接入統(tǒng)一的HTML5所開發(fā)出的界面。本文采用HTML5、Phonegap、JQuery Mobile、Bootstrap等技術(shù)，提出跨應(yīng)用建站的一套解決方案，并以購物系統(tǒng)為例，實現(xiàn)了該方案。

2　基于HTML5的移動中間件關(guān)鍵技術(shù)研究

PhoneGap作為目前市場上主流的移動中間件產(chǎn)品之一，是一個使用標準的Web技術(shù)語言例如：JavaScript、HTML5、CSS3，的跨平臺移動開發(fā)框架［7-8］，能夠在Android、iOS、Blackberry等7種平臺上實現(xiàn)應(yīng)用程序的部署［9］。PhoneGap使用JavaScript實現(xiàn)與本地操作系統(tǒng)的動態(tài)交互，支持用HTML5實現(xiàn)用戶界面，CSS3實現(xiàn)布局和樣式。主要對PhoneGap的通信機制、本地存儲訪問等關(guān)鍵技術(shù)進行研究。

2.1通信機制研究

PhoneGap在繼承原生WebView的同時，為其提供了一套橋接方法來實現(xiàn)JavaScript與本地代碼的相互通信，完成對本地硬件功能的訪問控制，如圖1所示。

圖1　PhoneGap通信圖

（1）JavaScript到Native的通信

在PhoneGap的exec.js中，通過cordova.exec（succ ess，fail，service，action，args）方法可以實現(xiàn)對JavaScript插件的調(diào)用。其中，service是在Manifest中聲明的需要調(diào)用的服務(wù)名稱；action表示執(zhí)行的具體service操作。

在cordova.exec（）中，通過調(diào)用prompt（JSON.string fy（args），“gap：”+JSON.stringfy（［service，action，callbac k，true］））方法發(fā)出請求信息。在此方法中，“gap：”標明了請求是調(diào)用本地插件，true表示以異步的方式來執(zhí)行本地代碼。請求發(fā)出后，由onJsPrompt回調(diào)方法對“gap：”下JSON格式的字符串信息進行解析，然后轉(zhuǎn)發(fā)給PluginManager并執(zhí)行exec函數(shù)來完成對本地服務(wù)的調(diào)用。

（2）Native到JavaScript的通信

在本地服務(wù)執(zhí)行完后，需要通過CordovaBridge類實現(xiàn)返回結(jié)果給JS端的操作，此過程的執(zhí)行方式分為同步和異步兩種。

同步：調(diào)用 CordovaBridge類中的 promptOnJs Prompt函數(shù)來實現(xiàn)native到JS的通信，將JSON格式的結(jié)果用result.confirm（）函數(shù)傳遞給JS端，由JSON. parse（）實現(xiàn)對結(jié)果的解析。

異步：本地服務(wù)以異步的方式執(zhí)行時，prompt（）獲取的字符串為空，線程中的本地服務(wù)將會在執(zhí)行完后會通知JS端。CallbackServer（回調(diào)服務(wù)器）保存了一個包含著回調(diào)函數(shù)的消息和本地服務(wù)異步執(zhí)行所產(chǎn)生的結(jié)果（JS語句隊列），此隊列將會被發(fā)送到JavaScript端。

CallBackServer提供了基于XHR和基于輪詢這兩種執(zhí)行方式。基于XHR的方式是由PhoneGap不斷發(fā)出XMLHttpRequest請求，CallBackServer會返回要執(zhí)行的JS語句，然后通過eval（）方法來執(zhí)行；基于輪詢的方式是通過Cordova.JSCallbackPollin（）來發(fā)送請求，由CallbackServer.getJavascript（）來獲取將要執(zhí)行的JS語句，調(diào)用result.confirm（）將結(jié)果返回到JS端。

2.2本地存儲訪問

在PhoneGap中提供的Storage API中包含了localStorage和Web SQL兩種訪問本地存儲的方式。

localStorage是以鍵值對的方式來完成數(shù)據(jù)的存儲、訪問，這里需要先創(chuàng)建localStorage對象，然后通過key（）、setItem（）、getItem（）等方法來實現(xiàn)具體的功能。

相比 localStorage，Web SQL支持通過 open-DataBase（）等方法實現(xiàn)SQLite數(shù)據(jù)庫的創(chuàng)建，例如：var dbSQL=window.openDatabase（name，version，display_name，size）。在數(shù)據(jù)庫創(chuàng)建完成后，可以使用db-SQL.transaction（popularDB，errorCB，successCB）來運行一個數(shù)據(jù)庫事務(wù)，并且關(guān)于對數(shù)據(jù)表的操作是在popularDB（回調(diào)函數(shù)）中通過executeSql（）方法來完成的。另外，在executeSql（）方法中也可以包含querysuccess 和errorCB這兩個回調(diào)函數(shù)，在querySuccess中可以得到SQLResultSet結(jié)果對象，此對象中包含了insertID（插入行ID）、rowAffected（影響的行數(shù)）和rows（返回的數(shù)據(jù)結(jié)果）。

2.3服務(wù)器交互

PhoneGap架構(gòu)的業(yè)務(wù)邏輯部分通常使用一個單一的HTML頁面作為一個單頁應(yīng)用模型［10］。PhoneGap通過標準的HTTP來與服務(wù)器程序之間實現(xiàn)交互，并獲取HTML的內(nèi)容，例如：使用loadUrl（）方法來請求服務(wù)端的HTML頁面。HTML頁面會采用AJAX或者JSON技術(shù)向應(yīng)用服務(wù)器請求自身所需的數(shù)據(jù)，并通過對DOM的更新來實現(xiàn)頁面的動態(tài)展示。

采用AJAX方式向服務(wù)器的struts2請求數(shù)據(jù)的過程如下：進入HTML觸發(fā)頁面事件-＞執(zhí)行JS的AJAX方法訪問服務(wù)器的Struts2下的Action-＞Action中執(zhí)行一系列操作然后得到數(shù)據(jù)庫返回的值-＞struts的JSON插件封裝并把對象數(shù)據(jù)以JSON格式返回到JS的callback函數(shù)中-＞JS的AJAX獲取callback的返回值，在success函數(shù)中獲取到該值，處理到HTML頁面-＞HTML頁面顯示數(shù)據(jù)。

3　基于HTML5的移動應(yīng)用設(shè)計與實現(xiàn)

3.1技術(shù)架構(gòu)圖

圖2展示了系統(tǒng)的技術(shù)架構(gòu)圖，共分為客戶端、Web服務(wù)器、數(shù)據(jù)庫這三個部分。Web服務(wù)器采用了Java環(huán)境下的流行框架Spring+Struts2+Hibernate來實現(xiàn)，供客戶端來調(diào)用服務(wù)，與數(shù)據(jù)庫進行數(shù)據(jù)的持久化交互。客戶端包括App應(yīng)用、手機瀏覽器、微信應(yīng)用，三種客戶端應(yīng)用統(tǒng)一調(diào)用同一個服務(wù)器端接口。其中App應(yīng)用端采用PhoneGap跨平臺技術(shù)，一次性覆蓋Android、iOS手機操作系統(tǒng)。

圖2　系統(tǒng)技術(shù)架構(gòu)

3.2Web數(shù)據(jù)庫

根據(jù)圖2所示的系統(tǒng)技術(shù)架構(gòu)，結(jié)合購物系統(tǒng)的業(yè)務(wù)，在該業(yè)務(wù)中共包括10張表，這里列舉了最重要的3張表：goods表，即商品的信息表，用于存儲了商品的所有信息；goods_cate表，用于存儲所有商品的類別；order_goods表，用于存儲用戶的訂單信息。且三張表之間的E-R關(guān)系如圖3所示。

3.3系統(tǒng)實現(xiàn)

系統(tǒng)分為服務(wù)器端與客戶端兩部分，服務(wù)器端采用成熟的Java Web框架SSH（Struts2+Spring+Hibernate），并使用HTML5、JQuery Mobile、Bootstrap作為展示層框架。客戶端根據(jù)應(yīng)用類型分為三種：App、微信端、移動網(wǎng)站端，移動網(wǎng)站端直接訪問Web地址即可訪問，微信端需要與微信開發(fā)接口進行整合，App端需要結(jié)合PhoneGap技術(shù)進行整合。下面以網(wǎng)站的購物流程為例，分別將服務(wù)器端與App端、微信端進行整合，并做詳細說明：

圖3　數(shù)據(jù)庫表的E-R關(guān)系

圖4　購物流程

3.4App端整合

App客戶端在與服務(wù)端進行交互前，首先需要進行PhoneGap與App端的整合，PhoneGap與App端的整合根據(jù)手機操作系統(tǒng)的不同，主要分為Android端、iOS端。現(xiàn)以Android與PhoneGap端整合為例進行說明，Andorid端的PhoneGap整體框架如圖5所示。

在移動終端上通過WebView來完成對HTML的渲染解析，Phonegap中的WebView重寫了onJsPrompt方法來捕獲前端的業(yè)務(wù)請求操作 （phonegap.js文件中

如圖4所示，注冊過的用戶使用手機客戶端登錄后，通過商品分類、關(guān)鍵字等篩選條件找到相應(yīng)的商品，將其加入到購物車，并對購物車中的商品進行匯總，形成訂單。通過填寫收貨人的姓名、手機號、收貨地址等信息，可以對用戶的訂單進行結(jié)算。結(jié)算后，用戶可對購買商品進行點評，至此，整個購物流程結(jié)束。exec函數(shù)中的prompt操作），從而將Web前端與后臺Java程序連接起來。

Android端需要在入口Activity中繼承DroidGap類，DroidGap類是 PhoneGap的核心類，負責銜接HTML5與Android Native的交互。入口Activity類將重寫DroidGap類的loadUrl（“http：//www.ssc.stn.sh.cn：9000/shop/mobile”）方法，并向服務(wù)器請求HTML5界面，WebView將對界面元素進行渲染，展示到App客戶端。

3.5微信端整合

圖5　Andorid端的PhoneGap整體框架圖

在進行微信端的研發(fā)前，需要建立一個微信公眾號，這里采用了“上海軟件服務(wù)”公共號作為測試號。這里需要獲取access token（全局唯一的通行證），因為只有使用access token才能完成對于公眾號平臺中不同接口的調(diào)用。access token的獲取需要用戶完成登錄，并且通過系統(tǒng)的身份驗證和授權(quán)，另外，還需要在微信公眾號中啟動開發(fā)者模式。

這里使用微信中自定義的菜單作為測試鏈接，目前支持了三個一級菜單，每個一級菜單里可支持五個二級菜單。一級菜單支持顯示四個漢字，二級菜單支持顯示七個漢字，多出來的字符將以省略號替代。在微信菜單上，將系統(tǒng)的公網(wǎng)訪問路徑添入，執(zhí)行效果為：用戶點擊測試后，跳轉(zhuǎn)至公網(wǎng)訪問地址，并加載系統(tǒng)的首頁面。

圖6　手機瀏覽器訪問　

圖7　Android Ap p應(yīng)用

圖8　微信公共號

圖9　微信商城展示

4　應(yīng)用效果展示

在服務(wù)端提供了數(shù)據(jù)及界面元素后，可以使用同一個服務(wù)端框架構(gòu)建出三種客戶端應(yīng)用。用戶可以通過瀏覽器、App、微信三種方式訪問購物系統(tǒng)。圖6是瀏覽器訪問系統(tǒng)，圖7是Android App應(yīng)用圖，用戶直接點擊即可訪問系統(tǒng)。圖8是微信公共號圖，使用了“上海軟件平臺”公共號作為應(yīng)用賬號，用戶點擊商城即可訪問系統(tǒng)，圖9為微信商城展示圖。

5　結(jié)語

本文在研究分析主流技術(shù)的基礎(chǔ)上，提出了一種基于HTML5的跨應(yīng)用建站解決方案，搭建系統(tǒng)架構(gòu)，并以購物系統(tǒng)為例驗證該方案的可行性。此方案可以極大地縮減移動應(yīng)用的開發(fā)周期，經(jīng)過測試證明，這三種應(yīng)用均運行穩(wěn)定且用戶體驗良好。其中詳細介紹了三類移動應(yīng)用的研發(fā)技術(shù)難點及實現(xiàn)。App實驗部分以Android手機為例進行試驗，由于采用PhoneGap跨平臺技術(shù)，應(yīng)用移植到iOS平臺上也非常方便。但PhoneGap與微信端提供的接口規(guī)范不相同，手機端訪問很難調(diào)用手機本地功能，這方面有待進一步的研究。

［1］陸鋼，朱培軍，李慧云，等.智能終端跨平臺應(yīng)用開發(fā)技術(shù)研究［J］.電信科學(xué)，2012，28（5）：14-17.

［2］朱宇翔.基于HTML5的移動中間件的研究與實現(xiàn)［D］.北京郵電大學(xué)，2013.

［3］潘春華，李俊杰，向花，等.基于PhoneGap的智能手機跨平臺應(yīng)用［J］.計算機系統(tǒng)應(yīng)用，2014，23（7）：106-109.

［4］胡勇，代紅兵，王麗清.一基于PhoneGap的跨平臺移動應(yīng)用開發(fā)技術(shù)研究［J］.云南大學(xué)學(xué)報（自然科學(xué)版），2014，36（S2）：78-82.

［5］Charland A，Leroux B.Mobile Application Development：Web vs.Native［C］.Communications of the ACM，2011，54（5）：49-53.

［6］騰訊.微信FAQ［EB/OL］.http：//weixin.qq.com/，2013-03-22.

［7］陳宏偉，張曉斌.基于PhoneGap的跨平臺框架研究及其實現(xiàn)［J］.計算機光盤軟件與應(yīng)用，2015（2）：55-55.

［8］Raj R，Tolety SB.A Study on Approaches to Build Crossplatform Mobile Applications and Criteria to Select Appropriate Approach［C］. India Conference，2012，48（11）：625-629.

［9］NJ Pierre，M Octavien.Review of PhoneGap APIs Accessing the Native Mobile Platform APIs［J］.2016，4（1）：12-15.

［10］Batbilig B，Ionut T.PhoneGap：Potentials of a Mobile Cross-Platform Application［J］.

Research and Application of Cross Platform Mobile Development Framework Based On PhoneGap

DAI Bing-rong1，2，WANG Yu-fei3，WANG Ling1，LU Qi-feng1，XU Cheng-yu1
（1.Shanghai Development Center of Computer Software Technology，Shanghai 201112；2.Shanghai Key Laboratory of Computer Software Testing&Evaluating，Shanghai 201112；3.Xi`an Jiaotong University，Shaanxi Province，Xi'an 710049，China）

With the fast development of mobile Internet，accessing to the Internet through mobile terminal has become a mainstream way.At present，the mobile terminal provides many ways that are mobile website，App and WeChat to access the Internet.At the same time，mobile terminal operating systems also include Android，iOS and Windows Phone.Owning to different access modes having its own set of interface technology，they need the corresponding technology for development.If the same mobile terminal is applied to three systems，we must develop three versions of App.This has resulted in the repeated development of mobile terminal，difficult style uniform，high operation and maintenance costs and other issues.In view of this situation，proposes adopting HTML5 and PhoneGap to solve the difference in developing mobile website，App and WeChat.Builds a complete system technical architecture and applies it to online shopping，which proves the feasibility of cross-platform mobile station.

HTML5；Cross-Platform；Mobile App；PhoneGap

1007-1423（2016）27-0030-06DOI：10.3969/j.issn.1007-1423.2016.27.008

戴炳榮（1984-），男，山東安丘人，博士研究生，工程師，研究方向為云計算、移動互聯(lián)網(wǎng)

王宇飛（1992-），男，江蘇無錫人，碩士研究生，研究方向為云計算、推薦算法、數(shù)據(jù)挖掘

王凌（1973-），男，碩士，浙江諸暨人，碩士，工程師，研究方向為需求分析、數(shù)據(jù)庫、軟件工程

陸奇峰（1988-），男，上海人，本科，工程師，研究方向為Web技術(shù)、數(shù)據(jù)倉庫

徐承宇（1990-），女，浙江桐鄉(xiāng)人，碩士研究生，工程師，研究方向為移動互聯(lián)網(wǎng)

2016-06-24

2016-09-10

上海市科研計劃項目（No.15DZ2260502）、上海張江高新區(qū)專項（No.201501-PD-LJZ-C104-004，201505-YP-C104-021）