基于PhoneGap和jQuery Mobile的移动校园WebApp的研究与实现

王敏 徐尤华 李翠平

文章编号： 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功能需求

经过历时半年的校园需求调研，并采用与师生们开展访谈、问卷调查等形式，项目小组最终确定该系统的整体需求可分析表述如下：