基于PhoneGap跨平臺移動開發框架的研究與應用

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

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

基于PhoneGap跨平臺移動開發框架的研究與應用

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

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

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

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

0　引言

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

這里通過對當前的移動開發解決方案以及主流開發技術進行深入的研究分析，提出了一套以HTML5和PhoneGap等技術來實現跨平臺移動應用的方案，通過對關鍵技術點的研究，搭建了一個完整的系統技術架構，并通過一個網站購物系統的實例來對此方案的可行性進行驗證。

1　移動應用開發技術比較

目前主流的移動應用類型分為三種，即基于B/S架構的移動網站、移動App、基于微信平臺的二次研發。

1.1基于B/S架構的移動網站

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

1.2移動App應用

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

1.3基于開放平臺的應用

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

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

2　基于HTML5的移動中間件關鍵技術研究

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

2.1通信機制研究

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

圖1　PhoneGap通信圖

（1）JavaScript到Native的通信

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

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

（2）Native到JavaScript的通信

在本地服務執行完后，需要通過CordovaBridge類實現返回結果給JS端的操作，此過程的執行方式分為同步和異步兩種。

同步：調用 CordovaBridge類中的 promptOnJs Prompt函數來實現native到JS的通信，將JSON格式的結果用result.confirm（）函數傳遞給JS端，由JSON. parse（）實現對結果的解析。

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

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

2.2本地存儲訪問

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

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

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

2.3服務器交互

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

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

3　基于HTML5的移動應用設計與實現

3.1技術架構圖

圖2展示了系統的技術架構圖，共分為客戶端、Web服務器、數據庫這三個部分。Web服務器采用了Java環境下的流行框架Spring+Struts2+Hibernate來實現，供客戶端來調用服務，與數據庫進行數據的持久化交互?？蛻舳税ˋpp應用、手機瀏覽器、微信應用，三種客戶端應用統一調用同一個服務器端接口。其中App應用端采用PhoneGap跨平臺技術，一次性覆蓋Android、iOS手機操作系統。

圖2　系統技術架構

3.2Web數據庫

根據圖2所示的系統技術架構，結合購物系統的業務，在該業務中共包括10張表，這里列舉了最重要的3張表：goods表，即商品的信息表，用于存儲了商品的所有信息；goods_cate表，用于存儲所有商品的類別；order_goods表，用于存儲用戶的訂單信息。且三張表之間的E-R關系如圖3所示。

3.3系統實現

系統分為服務器端與客戶端兩部分，服務器端采用成熟的Java Web框架SSH（Struts2+Spring+Hibernate），并使用HTML5、JQuery Mobile、Bootstrap作為展示層框架?？蛻舳烁鶕妙愋头譃槿N：App、微信端、移動網站端，移動網站端直接訪問Web地址即可訪問，微信端需要與微信開發接口進行整合，App端需要結合PhoneGap技術進行整合。下面以網站的購物流程為例，分別將服務器端與App端、微信端進行整合，并做詳細說明：

圖3　數據庫表的E-R關系

圖4　購物流程

3.4App端整合

App客戶端在與服務端進行交互前，首先需要進行PhoneGap與App端的整合，PhoneGap與App端的整合根據手機操作系統的不同，主要分為Android端、iOS端?，F以Android與PhoneGap端整合為例進行說明，Andorid端的PhoneGap整體框架如圖5所示。

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

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

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

3.5微信端整合

圖5　Andorid端的PhoneGap整體框架圖

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

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

圖6　手機瀏覽器訪問　

圖7　Android Ap p應用

圖8　微信公共號

圖9　微信商城展示

4　應用效果展示

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

5　結語

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

［1］陸鋼，朱培軍，李慧云，等.智能終端跨平臺應用開發技術研究［J］.電信科學，2012，28（5）：14-17.

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

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

［4］胡勇，代紅兵，王麗清.一基于PhoneGap的跨平臺移動應用開發技術研究［J］.云南大學學報（自然科學版），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的跨平臺框架研究及其實現［J］.計算機光盤軟件與應用，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-），男，山東安丘人，博士研究生，工程師，研究方向為云計算、移動互聯網

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

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

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

徐承宇（1990-），女，浙江桐鄉人，碩士研究生，工程師，研究方向為移動互聯網

2016-06-24

2016-09-10

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