基于PhoneGap和jQuery Mobile的移動校園WebApp的研究與實現(xiàn)

王敏 徐尤華 李翠平

文章編號： 2095-2163（2018）03-0143-05中圖分類號： 文獻標志碼： 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：

項目基金：

作者簡介：

收稿日期： 引言

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

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

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

1.1需求分析

1.1.1功能需求

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

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

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

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

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

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

1.1.2非功能性需求

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

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

1.2系統(tǒng)架構(gòu)設計

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

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

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

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

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

（3） 服務器端技術(shù)。運用基于Java的Servlet技術(shù)傳遞JSON數(shù)據(jù)格式進行數(shù)據(jù)響應。該數(shù)據(jù)格式的優(yōu)點是：數(shù)據(jù)格式比較簡單， 易于讀寫， 格式都是壓縮的， 占用帶寬小；尤其是，采用了這種易解析性語言， 客戶端JavaScript可以簡單地通過函數(shù)進行JSON數(shù)據(jù)的讀取。

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

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

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

1.3數(shù)據(jù)庫設計

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

1.4.1平臺搭建

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

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

1.4.2.1移動端頁面布局

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

界面設計效果如圖3所示。

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

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

Servlet返回數(shù)據(jù)形式：

{message："查詢成功"，

"resoArrayList"：[{"item.resoID"："1"，"resoName"： "Java基礎與設計"}，

{"item.resoID"："2"，"resoName"： "大學英語"}，

{"item.resoID"："3"，"resoName"： "計算機導論"}，

{"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（"未知錯誤！"）；

}

}）；

Resources.html；

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

jsonObject.put（"resoArrayList"， resoArrayList）；

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

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

1.4.2.3視頻播放

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

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，并在該項目的libs文件夾下粘貼cordova-2.9.0.jar文件，使項目自動引用PhoneGap的包。

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

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

android：largeScreens="true"

android：normalScreens="true"

android：smallScreens="true"

android：resizeable="true"

andoid：anyDensity="true"/>

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

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

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

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

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

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

2結(jié)束語

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

參考文獻

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

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

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

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

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

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

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

[3] 周曉艷. 企業(yè)服務總線（ESB）在SOA中的應用研究[D]. 大連海事大學， 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總線的研究與實現(xiàn)[D]. 南京理工大學， 2009.

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

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

[9] 王云花. ServiceMix：一個開源ESB的剖析與應用[D]. 太原理

工大學， 2012.

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

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

[12] 謝繼暉，白曉穎，陳斌，等. 企業(yè)服務總線研究綜述[J].計算機科學，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è)應用集成架構(gòu)研究與應用[D]. 太原理工大學， 2013.