移动WEB开发从入门到精通 基于HTML 5 JQUERYMOBILEPHONEGAP
王敏 徐尤华 李翠平
文章编号： 2095-2163（2018）03-0143-05中图分类号： 文献标志码： A
摘要： 关键词： 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：
項目基金：
作者简介：
收稿日期： 引言
近年来，随着宽带无线接入技术和移动终端技术的飞速发展，在移动互联网呈现蔓延覆盖态势的校园生活中，在校大学生都会希望能够随时随地从互联网上及时获取有关校园生活的迅捷信息与服务。这就使得在现代校园生活中，一个能够全面整合各种信息，并以个性化手段展现给用户的移动应用即已成为数字化校园的配置必需。而时下的移动设备不同平台（主要是Android、IOS系统）访问同一基于PC的Web应用时，经常会出现页面布局不协调、页面字体过大或过小等特点，导致移动设备用户群较少。同时，现在各大主流的移动平台之间互不兼容，若需自行开发一套系统功能应用，就要在每个平台调用各自原生的API。这样会让程序开发人员耗费可观的人力物力，维护成本也直线上升。
为了解决上述问题，该项目研究使用了近年来兴起的Hybrid App混合模式开发系统，尤其是使用跨平台打包技术PhoneGap和jQuery Mobile框架组合；在形式上取得创新的校园Web项目使得应用能在PC端访问的同时，也能在不需要更改代码的情况下顺利地移植到不同平台中，实现跨平台推广使用，从而保障Web系统无缝融入移动互联网，做到开发一个Web项目，却能够收获“一个网站，两个App”的设计成果。
1移动校园WebApp系统的建设
1.1需求分析
1.1.1功能需求
经过历时半年的校园需求调研，并采用与师生们开展访谈、问卷调查等形式，项目小组最终确定该系统的整体需求可分析表述如下：
（1）校园资讯模块。包含信息展示的分类，其中涉及了校园新闻、校园活动、校园快讯、办学成果等内容。
（2）校园师生疑问帮答模块。在互动流程上可概括为：学生发帖提问、同学互助解答、教师帮答等。
（3）校园移动课堂模块。整体上涵盖了教师添加课程信息、上传课程学习小视频、学生观看视频等部分。
（4）课程信息查询模块。主要包括有：校园课程信息查询、班级课程表查询等。
（5）课程考核成绩查询模块的数据展示。具体表现在：学生成绩上传、学生查询课程期末成绩等方面。
1.1.2非功能性需求
（1）支持的终端数在10 000以上。为了能够实际应用在广东松山职业技术学院的校园内，系统限定的终端实时在线人数应该涵盖校园用户数。
（2）系统响应流畅。为了使用户体验趋于理想，在正常情况下，系统应做到界面交互性良好，运行处理稳定，响应时间应小于5 s。
1.2系统架构设计
该系统的架构采用B/S结构模式。该模式可划定为3层，分别是：数据层、业务逻辑层、表示层。
系统设计架构如图1所示。其中，表示层可以是浏览器访问的网页，也可以是移动端的App，作为用户接受信息和发送信息的空间接口。业务逻辑层是系统的核心，主要用于响应用户的请求。数据层是对系统数据进行存储，根据请求的需要将结果返至业务层。
由图2可知，系统中各项关键技术的重点研发模式可阐释如下：
（1） 客户端技术。运用当前流行的JQuery Mobile前端开发框架作为页面设计的基础，主要用于定制数据的展示方式。该框架的特点是目前大部分的移动设备浏览器都支持HTML5标准，jQuery Mobile以HTML5标记配置网页，因而可以跨不同的移动设备，大大缩短了编写程序花费的时间。
（2） Http请求方式。采用Ajax的形式发送，该技术的特点是通过在后台与服务器进行数据交换，Ajax 可以使网页具备异步更新的设计效果。在实际辨识响应时，可以方便地解析JSON数据格式，并结合jQuery脚本技术选择页面元素，进行数据赋值，这样就能在静态页面中实现数据的解析，解决了项目中数据动态获取的关键问题。
（3） 服务器端技术。运用基于Java的Servlet技术传递JSON数据格式进行数据响应。该数据格式的优点是：数据格式比较简单， 易于读写， 格式都是压缩的， 占用带宽小；尤其是，采用了这种易解析性语言， 客户端JavaScript可以简单地通过函数进行JSON数据的读取。
（4）数据存储。采用体积小、速度快的MySql关系型数据库管理系统进行数据管理。
（5）跨平台打包技术。采用PhoneGap框架，该框架是一个选用基于HTML、CSS和JavaScript等网页资源，创建跨平台移动应用程序的快速开发平台。
总地来说，采用的是jQuery Mobile+Ajax+HTML5+Servlet+MySql+PhoneGap的开发环境进行项目开发，结合项目的功能需求，这个开发路线能够解决项目的开发技术的问题。
1.3数据库设计
根据该系统的功能需求，系统研发的数据库可详见表1。
1.4.1平台搭建
本次研发是基于B/S结构，通过创建Web服务器，用于Http请求的响应，采用的是Tomcat 7.0版本；数据库采用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系统功能实现
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，而在页面中实现菜单功能可以使用div标签，并设置标签的data-role属性。主要设计代码可见如下：
首页
...
...
界面設计效果如图3所示。
1.4.2.2数据跨域请求
本小节以“互动课堂”的课程列表展示为例，详细论述数据跨域请求由提交到获取数据解析的过程。在“互动课堂”模块中点击“课程学习”按钮，则跳转到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页面的重要执行代码即如下所示：
Servlet返回数据形式：
{message："查询成功"，
"resoArrayList"：[{"item.resoID"："1"，"resoName"： "Java基础与设计"}，
{"item.resoID"："2"，"resoName"： "大学英语"}，
{"item.resoID"："3"，"resoName"： "计算机导论"}，
{"item.resoID"："4"，"resoName"： "Java面向对象分析"}]
}
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参数中的WERURL是运行在服务器的项目的IP地址，在本项目中值为http：//192.168.1.11：8080/WebSchool/；服务器采用Servlet技术作为响应，并将Http请求的响应以JSON数据格式返回，参考指令可表述为：
jsonObject.put（"resoArrayList"， resoArrayList）；
jsonObject.put（"message"， "查询成功"）；
此后，于前端解析数据，并利用jQuery Mobile渲染展示页面，运行效果如图4所示。
1.4.2.3视频播放
在移动端的教学资料界面中，当教师添加课程的视频文件时，服务器将存储该视频，并在resource表中添加一条记录。其中，url字段记录的是视频在服务器中的地址，如：videopath：File/Video/name.mp4。当学生点击图4界面中的某一门课程，将跳转到该课程的章节列表，继续点击某个章节系统将跳转到该章节的视频播放界面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
在本節中，将以PhoneGap打包Android App为例，综述打包App过程。详情如下：
（1）在Eclipse带Android插件的版本中创建Android Application project，并在该项目的libs文件夹下粘贴cordova-2.9.0.jar文件，使项目自动引用PhoneGap的包。
（2）在res文件夹下新建xml文件夹，再将PhoneGap框架的config.xml文件粘贴到xml文件夹下。
（3）在项目的AndroidManifest.xml文件下根据项目需要添加指定项目权限设置。设计代码可展开如下：
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（）方法，在方法中调用如下语句：
super.loadUrl（"file：///android_asset/www/SchoolHome.html"，7000）；
语句中，loadUrl（）函数用于读取放置在assets文件下本项目的启动首页SchoolHome.html。
（6）将项目编译处理为apk。该apk可运行在Android设备上，与服务器实现跨域数据连接。同样，在IOS系统的Xcode上利用PhoneGap框架即能输出得到IOS手机系统的应用安装包。
通过上述方法，能快速生成目前移动市场上占据优势份额的两大操作系统的安装包，这就为快速推广提供了可能，并节省了开发成本。
2结束语
本系统利用jQuery Mobile進行移动Web端的界面UI渲染，jQuery的Ajax异步加载用于应对跨域数据请求，Servlet技术用于研发请求响应，PhoneGap用于实现移动Web的App打包的Hybrid App开发模式，快速构建出内容丰富、界面美观、功能实用的校园生活App，更好地为教师和学生提供校园信息、疑问解答、课程资源共享的校园移动端平台，拓宽了师生交流的渠道，是一次快速迭代开发推广的成功案例。
参考文献
[1] 李丽平，薛玉倩. 基于HTML5跨平台移动应用开发的研究与实践[J]. 河北软件职业技术学院学报，2017，19（2）：35-38.
[2] 王健，杨丽娟. 基于PhoneGap的跨平台移动应用开发研究[J]. 北华航天工业学院学报，2017，27（2）：19-21.
[3] 崔丽梅，薛斐斐. 基于PhoneGap技术的跨平台移动应用开发探讨[J]. 电脑知识与技术，2016，12（15）：30-33.
[4] 赵永晖. 基于公众平台的移动校园信息服务系统的研究与实现[J]. 齐齐哈尔大学学报（自然科学版），2017，33（1）：14-17，23.
[5] 徐尤华，熊传玉. JQuery Mobile 1.2移动Web开发方法研究[J]. 信息技术，2013，37（8）：85-88.
[6] 肖智，杨文军. 基于jQuery Mobile的移动高校信息公开系统的设计与开发[J]. 图书馆学研究，2012（23）：47-51.
[7] 万菲，代毅. 基于HTML5+JQueryMobile的校园移动Web快速开发的实践—以珠海广播电视大学为例[J]. 教育信息技术，2016（5）：25-27.（上接第142页）
[3] 周晓艳. 企业服务总线（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架构的分布式ESB总线的研究与实现[D]. 南京理工大学， 2009.
[7] 牛栩，荆泽泉.基于SOA的企业应用集成研究[J].数字技术与应用，2011（12）：107-108.
[8] 高亮，杨林，胡映兵.基于ESB的企业应用集成研究[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中的数据交换技术[J].计算机系统应用，2005（10）：42-45.
[12] 谢继晖，白晓颖，陈斌，等. 企业服务总线研究综述[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企业应用集成架构研究与应用[D]. 太原理工大学， 2013.
