王敏 徐尤華 李翠平

文章編號(hào)： 2095-2163（2018）03-0143-05中圖分類號(hào)： 文獻(xiàn)標(biāo)志碼： A

摘要： 關(guān)鍵詞： mobile campus WebApp based on PhoneGap and jQuery Mobile

（Guangdong Songshan Polytechnic， Shaoguan Guandong 512126， China）

Abstract： This paper takes the mobile campus system construction of Guangdong Songshan Polytechnic as an example to develop a cross-platform WebApp system using PhoneGap technology. Through the research and analysis of the teachers and students in the college， the project team analyzes the function of the system and designs the functional modules to meet the needs of teachers and students. In the development mode， the system adopts the design mode of MVC， and constructs the development architecture with the technology of PhoneGap+jQuery Mobile+AJAX+HTML 5+Servlet+MySql. This paper proposes a solution for cross-domain data exchange and video broadcast， and develops a Web project， which could get the design results of "one website and two Apps".

Key words：

項(xiàng)目基金：

作者簡(jiǎn)介：

收稿日期： 引言

近年來(lái)，隨著寬帶無(wú)線接入技術(shù)和移動(dòng)終端技術(shù)的飛速發(fā)展，在移動(dòng)互聯(lián)網(wǎng)呈現(xiàn)蔓延覆蓋態(tài)勢(shì)的校園生活中，在校大學(xué)生都會(huì)希望能夠隨時(shí)隨地從互聯(lián)網(wǎng)上及時(shí)獲取有關(guān)校園生活的迅捷信息與服務(wù)。這就使得在現(xiàn)代校園生活中，一個(gè)能夠全面整合各種信息，并以個(gè)性化手段展現(xiàn)給用戶的移動(dòng)應(yīng)用即已成為數(shù)字化校園的配置必需。而時(shí)下的移動(dòng)設(shè)備不同平臺(tái)（主要是Android、IOS系統(tǒng)）訪問同一基于PC的Web應(yīng)用時(shí)，經(jīng)常會(huì)出現(xiàn)頁(yè)面布局不協(xié)調(diào)、頁(yè)面字體過大或過小等特點(diǎn)，導(dǎo)致移動(dòng)設(shè)備用戶群較少。同時(shí)，現(xiàn)在各大主流的移動(dòng)平臺(tái)之間互不兼容，若需自行開發(fā)一套系統(tǒng)功能應(yīng)用，就要在每個(gè)平臺(tái)調(diào)用各自原生的API。這樣會(huì)讓程序開發(fā)人員耗費(fèi)可觀的人力物力，維護(hù)成本也直線上升。

為了解決上述問題，該項(xiàng)目研究使用了近年來(lái)興起的Hybrid App混合模式開發(fā)系統(tǒng)，尤其是使用跨平臺(tái)打包技術(shù)PhoneGap和jQuery Mobile框架組合；在形式上取得創(chuàng)新的校園Web項(xiàng)目使得應(yīng)用能在PC端訪問的同時(shí)，也能在不需要更改代碼的情況下順利地移植到不同平臺(tái)中，實(shí)現(xiàn)跨平臺(tái)推廣使用，從而保障Web系統(tǒng)無(wú)縫融入移動(dòng)互聯(lián)網(wǎng)，做到開發(fā)一個(gè)Web項(xiàng)目，卻能夠收獲“一個(gè)網(wǎng)站，兩個(gè)App”的設(shè)計(jì)成果。

1移動(dòng)校園WebApp系統(tǒng)的建設(shè)

1.1需求分析

1.1.1功能需求

經(jīng)過歷時(shí)半年的校園需求調(diào)研，并采用與師生們開展訪談、問卷調(diào)查等形式，項(xiàng)目小組最終確定該系統(tǒng)的整體需求可分析表述如下：

（1）校園資訊模塊。包含信息展示的分類，其中涉及了校園新聞、校園活動(dòng)、校園快訊、辦學(xué)成果等內(nèi)容。

（2）校園師生疑問幫答模塊。在互動(dòng)流程上可概括為：學(xué)生發(fā)帖提問、同學(xué)互助解答、教師幫答等。

（3）校園移動(dòng)課堂模塊。整體上涵蓋了教師添加課程信息、上傳課程學(xué)習(xí)小視頻、學(xué)生觀看視頻等部分。

（4）課程信息查詢模塊。主要包括有：校園課程信息查詢、班級(jí)課程表查詢等。

（5）課程考核成績(jī)查詢模塊的數(shù)據(jù)展示。具體表現(xiàn)在：學(xué)生成績(jī)上傳、學(xué)生查詢課程期末成績(jī)等方面。

1.1.2非功能性需求

（1）支持的終端數(shù)在10 000以上。為了能夠?qū)嶋H應(yīng)用在廣東松山職業(yè)技術(shù)學(xué)院的校園內(nèi)，系統(tǒng)限定的終端實(shí)時(shí)在線人數(shù)應(yīng)該涵蓋校園用戶數(shù)。

（2）系統(tǒng)響應(yīng)流暢。為了使用戶體驗(yàn)趨于理想，在正常情況下，系統(tǒng)應(yīng)做到界面交互性良好，運(yùn)行處理穩(wěn)定，響應(yīng)時(shí)間應(yīng)小于5 s。

1.2系統(tǒng)架構(gòu)設(shè)計(jì)

該系統(tǒng)的架構(gòu)采用B/S結(jié)構(gòu)模式。該模式可劃定為3層，分別是：數(shù)據(jù)層、業(yè)務(wù)邏輯層、表示層。

系統(tǒng)設(shè)計(jì)架構(gòu)如圖1所示。其中，表示層可以是瀏覽器訪問的網(wǎng)頁(yè)，也可以是移動(dòng)端的App，作為用戶接受信息和發(fā)送信息的空間接口。業(yè)務(wù)邏輯層是系統(tǒng)的核心，主要用于響應(yīng)用戶的請(qǐng)求。數(shù)據(jù)層是對(duì)系統(tǒng)數(shù)據(jù)進(jìn)行存儲(chǔ)，根據(jù)請(qǐng)求的需要將結(jié)果返至業(yè)務(wù)層。

由圖2可知，系統(tǒng)中各項(xiàng)關(guān)鍵技術(shù)的重點(diǎn)研發(fā)模式可闡釋如下：

（1） 客戶端技術(shù)。運(yùn)用當(dāng)前流行的JQuery Mobile前端開發(fā)框架作為頁(yè)面設(shè)計(jì)的基礎(chǔ)，主要用于定制數(shù)據(jù)的展示方式。該框架的特點(diǎn)是目前大部分的移動(dòng)設(shè)備瀏覽器都支持HTML5標(biāo)準(zhǔn)，jQuery Mobile以HTML5標(biāo)記配置網(wǎng)頁(yè)，因而可以跨不同的移動(dòng)設(shè)備，大大縮短了編寫程序花費(fèi)的時(shí)間。

（2） Http請(qǐng)求方式。采用Ajax的形式發(fā)送，該技術(shù)的特點(diǎn)是通過在后臺(tái)與服務(wù)器進(jìn)行數(shù)據(jù)交換，Ajax 可以使網(wǎng)頁(yè)具備異步更新的設(shè)計(jì)效果。在實(shí)際辨識(shí)響應(yīng)時(shí)，可以方便地解析JSON數(shù)據(jù)格式，并結(jié)合jQuery腳本技術(shù)選擇頁(yè)面元素，進(jìn)行數(shù)據(jù)賦值，這樣就能在靜態(tài)頁(yè)面中實(shí)現(xiàn)數(shù)據(jù)的解析，解決了項(xiàng)目中數(shù)據(jù)動(dòng)態(tài)獲取的關(guān)鍵問題。

（3） 服務(wù)器端技術(shù)。運(yùn)用基于Java的Servlet技術(shù)傳遞JSON數(shù)據(jù)格式進(jìn)行數(shù)據(jù)響應(yīng)。該數(shù)據(jù)格式的優(yōu)點(diǎn)是：數(shù)據(jù)格式比較簡(jiǎn)單， 易于讀寫， 格式都是壓縮的， 占用帶寬?。挥绕涫牵捎昧诉@種易解析性語(yǔ)言， 客戶端JavaScript可以簡(jiǎn)單地通過函數(shù)進(jìn)行JSON數(shù)據(jù)的讀取。

（4）數(shù)據(jù)存儲(chǔ)。采用體積小、速度快的MySql關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)進(jìn)行數(shù)據(jù)管理。

（5）跨平臺(tái)打包技術(shù)。采用PhoneGap框架，該框架是一個(gè)選用基于HTML、CSS和JavaScript等網(wǎng)頁(yè)資源，創(chuàng)建跨平臺(tái)移動(dòng)應(yīng)用程序的快速開發(fā)平臺(tái)。

總地來(lái)說，采用的是jQuery Mobile+Ajax+HTML5+Servlet+MySql+PhoneGap的開發(fā)環(huán)境進(jìn)行項(xiàng)目開發(fā)，結(jié)合項(xiàng)目的功能需求，這個(gè)開發(fā)路線能夠解決項(xiàng)目的開發(fā)技術(shù)的問題。

1.3數(shù)據(jù)庫(kù)設(shè)計(jì)

根據(jù)該系統(tǒng)的功能需求，系統(tǒng)研發(fā)的數(shù)據(jù)庫(kù)可詳見表1。

1.4.1平臺(tái)搭建

本次研發(fā)是基于B/S結(jié)構(gòu)，通過創(chuàng)建Web服務(wù)器，用于Http請(qǐng)求的響應(yīng)，采用的是Tomcat 7.0版本；數(shù)據(jù)庫(kù)采用Mysql 5.5.56版本；同時(shí)還使用JDK的版本 1.7、Eclipse的版本4.4.1，PhoneGap2.9、Eclipse帶Android插件的版本是4.2.0、Xcode、jQuery庫(kù)使用的是1.8.1.min、jQuery Mobile 前端UI庫(kù)。

1.4.2系統(tǒng)功能實(shí)現(xiàn)

1.4.2.1移動(dòng)端頁(yè)面布局

由于項(xiàng)目頁(yè)面眾多，在此僅以移動(dòng)校園的首頁(yè)index.html和個(gè)人中心MySelf.html為例，研究探討HTML頁(yè)面采用jQuery Mobile進(jìn)行頁(yè)面布局的方法。在頁(yè)面中引用jQuery-1.8.3.min.js、jQuery.mobile-1.3.2.min.js、jQuery.mobile-1.3.2.min.css、ordova.js，而在頁(yè)面中實(shí)現(xiàn)菜單功能可以使用div標(biāo)簽，并設(shè)置標(biāo)簽的data-role屬性。主要設(shè)計(jì)代碼可見如下：

界面設(shè)計(jì)效果如圖3所示。

1.4.2.2數(shù)據(jù)跨域請(qǐng)求

本小節(jié)以“互動(dòng)課堂”的課程列表展示為例，詳細(xì)論述數(shù)據(jù)跨域請(qǐng)求由提交到獲取數(shù)據(jù)解析的過程。在“互動(dòng)課堂”模塊中點(diǎn)擊“課程學(xué)習(xí)”按鈕，則跳轉(zhuǎn)到Resources.html，該頁(yè)面引用jQuery-1.8.3.min.js、jQuery.mobile-1.3.2.min.js、cordova.js，同時(shí)還采用jQuery Mobile綁定pagebeforecreate事件，在頁(yè)面初始化及jQuery Mobile在開始增強(qiáng)頁(yè)面之前利用jQuery提交 Ajax請(qǐng)求。js和Resources.html頁(yè)面的重要執(zhí)行代碼即如下所示：

Servlet返回?cái)?shù)據(jù)形式：

{message："查詢成功"，

"resoArrayList"：[{"item.resoID"："1"，"resoName"： "Java基礎(chǔ)與設(shè)計(jì)"}，

{"item.resoID"："2"，"resoName"： "大學(xué)英語(yǔ)"}，

{"item.resoID"："3"，"resoName"： "計(jì)算機(jī)導(dǎo)論"}，

{"item.resoID"："4"，"resoName"： "Java面向?qū)ο蠓治?}]

}

JavaScript：

$.ajax（{

type："POST"

url：WERURL+"S_Resource？method=findAllResource_APP"，

dataType："jsonp"，

jsonp："callback"，

success：function（data）{

var content=" "；

if（data.message=="查詢成功"）{

$.each（data.resoArrayList， function（i，item）{

contentcontent+"

}）；

$（"#contentList"）.html（""）；

$（"#contentList"）.append（content）.listview（refresh）；

}

}，

error：fuction（data）{

alert（"未知錯(cuò)誤！"）；

}

}）；

Resources.html；

代碼中，url參數(shù)中的WERURL是運(yùn)行在服務(wù)器的項(xiàng)目的IP地址，在本項(xiàng)目中值為http：//192.168.1.11：8080/WebSchool/；服務(wù)器采用Servlet技術(shù)作為響應(yīng)，并將Http請(qǐng)求的響應(yīng)以JSON數(shù)據(jù)格式返回，參考指令可表述為：

jsonObject.put（"resoArrayList"， resoArrayList）；

jsonObject.put（"message"， "查詢成功"）；

此后，于前端解析數(shù)據(jù)，并利用jQuery Mobile渲染展示頁(yè)面，運(yùn)行效果如圖4所示。

1.4.2.3視頻播放

在移動(dòng)端的教學(xué)資料界面中，當(dāng)教師添加課程的視頻文件時(shí)，服務(wù)器將存儲(chǔ)該視頻，并在resource表中添加一條記錄。其中，url字段記錄的是視頻在服務(wù)器中的地址，如：videopath：File/Video/name.mp4。當(dāng)學(xué)生點(diǎn)擊圖4界面中的某一門課程，將跳轉(zhuǎn)到該課程的章節(jié)列表，繼續(xù)點(diǎn)擊某個(gè)章節(jié)系統(tǒng)將跳轉(zhuǎn)到該章節(jié)的視頻播放界面PlayVideoResources.html。在播放界面初始化之前，獲取由圖4中傳遞的視頻資源地址及視頻文件名，同時(shí)設(shè)置界面中id為videoPlay的標(biāo)簽

VideoResources.html：

PlayVideoResources.js：

$（"#playVideoResources"）.live（pagebeforecreate，fuction（）{

var url=window.location.search；

var data=getUrlParam（url）；

var videoName=decodeURIComponent（data[2]）；

var videoPath=decodeURIComponent（data[4]）；

$（"#headTitle"）.append（headTitle）；

$（"#videoName"）.html（videoName）；

$（"#videoPlay"）.attr（"src"，WERURL+videoPath）.attr（"autoplay"，"true"）；

}）；

1.5PhoneGap打包成App

在本節(jié)中，將以PhoneGap打包Android App為例，綜述打包App過程。詳情如下：

（1）在Eclipse帶Android插件的版本中創(chuàng)建Android Application project，并在該項(xiàng)目的libs文件夾下粘貼cordova-2.9.0.jar文件，使項(xiàng)目自動(dòng)引用PhoneGap的包。

（2）在res文件夾下新建xml文件夾，再將PhoneGap框架的config.xml文件粘貼到xml文件夾下。

（3）在項(xiàng)目的AndroidManifest.xml文件下根據(jù)項(xiàng)目需要添加指定項(xiàng)目權(quán)限設(shè)置。設(shè)計(jì)代碼可展開如下：

android：largeScreens="true"

android：normalScreens="true"

android：smallScreens="true"

android：resizeable="true"

andoid：anyDensity="true"/>

（4）在項(xiàng)目assets文件夾中粘貼Web項(xiàng)目的html文件、CSS文件、JS文件及其它頁(yè)面引用資源。

（5）將項(xiàng)目下src中的MainActivity繼承DroidGap，并重寫父類的onCreate（）方法，在方法中調(diào)用如下語(yǔ)句：

super.loadUrl（"file：///android_asset/www/SchoolHome.html"，7000）；

語(yǔ)句中，loadUrl（）函數(shù)用于讀取放置在assets文件下本項(xiàng)目的啟動(dòng)首頁(yè)SchoolHome.html。

（6）將項(xiàng)目編譯處理為apk。該apk可運(yùn)行在Android設(shè)備上，與服務(wù)器實(shí)現(xiàn)跨域數(shù)據(jù)連接。同樣，在IOS系統(tǒng)的Xcode上利用PhoneGap框架即能輸出得到IOS手機(jī)系統(tǒng)的應(yīng)用安裝包。

通過上述方法，能快速生成目前移動(dòng)市場(chǎng)上占據(jù)優(yōu)勢(shì)份額的兩大操作系統(tǒng)的安裝包，這就為快速推廣提供了可能，并節(jié)省了開發(fā)成本。

2結(jié)束語(yǔ)

本系統(tǒng)利用jQuery Mobile進(jìn)行移動(dòng)Web端的界面UI渲染，jQuery的Ajax異步加載用于應(yīng)對(duì)跨域數(shù)據(jù)請(qǐng)求，Servlet技術(shù)用于研發(fā)請(qǐng)求響應(yīng)，PhoneGap用于實(shí)現(xiàn)移動(dòng)Web的App打包的Hybrid App開發(fā)模式，快速構(gòu)建出內(nèi)容豐富、界面美觀、功能實(shí)用的校園生活A(yù)pp，更好地為教師和學(xué)生提供校園信息、疑問解答、課程資源共享的校園移動(dòng)端平臺(tái)，拓寬了師生交流的渠道，是一次快速迭代開發(fā)推廣的成功案例。

參考文獻(xiàn)

[1] 李麗平，薛玉倩. 基于HTML5跨平臺(tái)移動(dòng)應(yīng)用開發(fā)的研究與實(shí)踐[J]. 河北軟件職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2017，19（2）：35-38.

[2] 王健，楊麗娟. 基于PhoneGap的跨平臺(tái)移動(dòng)應(yīng)用開發(fā)研究[J]. 北華航天工業(yè)學(xué)院學(xué)報(bào)，2017，27（2）：19-21.

[3] 崔麗梅，薛斐斐. 基于PhoneGap技術(shù)的跨平臺(tái)移動(dòng)應(yīng)用開發(fā)探討[J]. 電腦知識(shí)與技術(shù)，2016，12（15）：30-33.

[4] 趙永暉. 基于微信公眾平臺(tái)的移動(dòng)校園信息服務(wù)系統(tǒng)的研究與實(shí)現(xiàn)[J]. 齊齊哈爾大學(xué)學(xué)報(bào)（自然科學(xué)版），2017，33（1）：14-17，23.

[5] 徐尤華，熊傳玉. JQuery Mobile 1.2移動(dòng)Web開發(fā)方法研究[J]. 信息技術(shù)，2013，37（8）：85-88.

[6] 肖智，楊文軍. 基于jQuery Mobile的移動(dòng)高校信息公開系統(tǒng)的設(shè)計(jì)與開發(fā)[J]. 圖書館學(xué)研究，2012（23）：47-51.

[7] 萬(wàn)菲，代毅. 基于HTML5+JQueryMobile的校園移動(dòng)Web快速開發(fā)的實(shí)踐—以珠海廣播電視大學(xué)為例[J]. 教育信息技術(shù)，2016（5）：25-27.（上接第142頁(yè)）

[3] 周曉艷. 企業(yè)服務(wù)總線（ESB）在SOA中的應(yīng)用研究[D]. 大連海事大學(xué)， 2009.

[4] Schmidt M T， Hutchison B，Lambros P， et al. The Enterprise Service Bus： Making service-oriented architecture real[J]. Ibm Systems Journal， 2005， 44（4）：781-797.

[5] Java Management Extensions（JMX） Technology[EB/OL]. http：//www.oracle.com/technetwork/java/javase/tech/javamanage-men t-140525.html.

[6] 張昀. 基于SOA架構(gòu)的分布式ESB總線的研究與實(shí)現(xiàn)[D]. 南京理工大學(xué)， 2009.

[7] 牛栩，荊澤泉.基于SOA的企業(yè)應(yīng)用集成研究[J].數(shù)字技術(shù)與應(yīng)用，2011（12）：107-108.

[8] 高亮，楊林，胡映兵.基于ESB的企業(yè)應(yīng)用集成研究[J].機(jī)械設(shè)計(jì)與制造，2008（1）：221-223.

[9] 王云花. ServiceMix：一個(gè)開源ESB的剖析與應(yīng)用[D]. 太原理

工大學(xué)， 2012.

[10] Vinoski S. Java Business Integration[J]. IEEE Internet Computing， 2005， 9（4）：89-91.

[11] 劉迎春，蘭雨晴，于樂樂.ESB中的數(shù)據(jù)交換技術(shù)[J].計(jì)算機(jī)系統(tǒng)應(yīng)用，2005（10）：42-45.

[12] 謝繼暉，白曉穎，陳斌，等. 企業(yè)服務(wù)總線研究綜述[J].計(jì)算機(jī)科學(xué)，2007（11）：13-18.

[13] http：//www.mulesoft.org/what-mule-esb.

[14] Brebner P. Service-Oriented Performance Modeling the MULE Enterprise Service Bus （ESB） Loan Broker Application[C]// Software Engineering and Advanced Applications， 2009. Seaa '09. Euromicro Conference on. IEEE， 2009：404-411.

[15] 鄭鑫. 基于ESB企業(yè)應(yīng)用集成架構(gòu)研究與應(yīng)用[D]. 太原理工大學(xué)， 2013.