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

（1.上海市計(jì)算機(jī)軟件技術(shù)開(kāi)發(fā)中心，上海 201112；2.上海市計(jì)算機(jī)軟件評(píng)測(cè)重點(diǎn)實(shí)驗(yàn)室，上海 201112；3.西安交通大學(xué)，西安　710049）

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

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

（1.上海市計(jì)算機(jī)軟件技術(shù)開(kāi)發(fā)中心，上海 201112；2.上海市計(jì)算機(jī)軟件評(píng)測(cè)重點(diǎn)實(shí)驗(yàn)室，上海 201112；3.西安交通大學(xué)，西安710049）

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

HTML5；跨平臺(tái)；移動(dòng)建站；PhoneGap

0　引言

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

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

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

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

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

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

1.2移動(dòng)App應(yīng)用

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

1.3基于開(kāi)放平臺(tái)的應(yīng)用

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

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

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

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

2.1通信機(jī)制研究

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

圖1　PhoneGap通信圖

（1）JavaScript到Native的通信

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

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

（2）Native到JavaScript的通信

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

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

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

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

2.2本地存儲(chǔ)訪問(wèn)

在PhoneGap中提供的Storage API中包含了localStorage和Web SQL兩種訪問(wèn)本地存儲(chǔ)的方式。

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

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

2.3服務(wù)器交互

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

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

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

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

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

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

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

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

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

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

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

圖4　購(gòu)物流程

3.4App端整合

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

在移動(dòng)終端上通過(guò)WebView來(lái)完成對(duì)HTML的渲染解析，Phonegap中的WebView重寫(xiě)了onJsPrompt方法來(lái)捕獲前端的業(yè)務(wù)請(qǐng)求操作 （phonegap.js文件中

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

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

3.5微信端整合

圖5　Andorid端的PhoneGap整體框架圖

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

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

圖6　手機(jī)瀏覽器訪問(wèn)　

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

圖8　微信公共號(hào)

圖9　微信商城展示

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

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

5　結(jié)語(yǔ)

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

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

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

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

［4］胡勇，代紅兵，王麗清.一基于PhoneGap的跨平臺(tái)移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)研究［J］.云南大學(xué)學(xué)報(bào)（自然科學(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的跨平臺(tái)框架研究及其實(shí)現(xiàn)［J］.計(jì)算機(jī)光盤(pán)軟件與應(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-），男，山東安丘人，博士研究生，工程師，研究方向?yàn)樵朴?jì)算、移動(dòng)互聯(lián)網(wǎng)

王宇飛（1992-），男，江蘇無(wú)錫人，碩士研究生，研究方向?yàn)樵朴?jì)算、推薦算法、數(shù)據(jù)挖掘

王凌（1973-），男，碩士，浙江諸暨人，碩士，工程師，研究方向?yàn)樾枨蠓治?、?shù)據(jù)庫(kù)、軟件工程

陸奇峰（1988-），男，上海人，本科，工程師，研究方向?yàn)閃eb技術(shù)、數(shù)據(jù)倉(cāng)庫(kù)

徐承宇（1990-），女，浙江桐鄉(xiāng)人，碩士研究生，工程師，研究方向?yàn)橐苿?dòng)互聯(lián)網(wǎng)

2016-06-24

2016-09-10

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