Web APP技术框架下“大学校园助手”APP的设计与实现

摘要：本文首先阐述了建设数字化校園的重要性，接着对大学校园助手APP进行了体系结构设计，详细分析了“首页”“公告栏”“校园文化”和“学生信息”四个主要模块的具体功能，继而又对四个模块进行了数据表设计并在此基础上进行了开发。

关键词：数字化校园；Web APP；移动应用；WeX5

中图分类号：G434 文献标识码：A 论文编号：1674-2117（2017）10-0073-03

近几年，随着学生对移动学习与泛在学习认知的加深与网络资源建设的去中心化，采用移动终端获取信息已成为高校学生的操作习惯。同时，数字化校园成为充分优化利用数字资源的一种虚拟教育环境。[1]因而，不断深化和构建数字化校园系统中的APP体系，形成以移动智能为趋势的无线校园体系结构是高校构建信息化、智能化、便利化校园的重要任务之一。

● 开发环境

1.Web APP开发技术框架

Web APP开发模式使用的是Web开发的常用技术，如HTML5、CSS3、JavaScript，服务端技术JAVA、PHP、ASP等[2]，主要有HTML5云网站和移动应用客户端两个重要组成模块，HTML5云网站的作用是为移动应用提供数据支持，移动应用客户端的主要作用是为应用提供设备支持，Web APP界面简单并且凸显了跨平台的高兼容性。

2.跨平台开发环境WeX5

WeX5将移动应用开发分为三个模块：①前端UI设计技术和标准采用w3c的html+css+js，框架采用jquery、require js和bootstrap的发展路线，不断深化用户与界面之间的交互体验，提升应用价值；②后服务端对开发语言没有硬性要求，设计人员可以采用熟悉的语言来开发程序；③前端设备API的apiframe work采用了codova/phonegap。另外，WeX5开发平台是开源性的，可进行跨平台多前端应用开发，具备高效精致的UI组件体系和可视化拖拽式集成开发环境IDE，具有全能的调试支持和智能代码提示功能，是APP开发的首选。

● “大学校园助手”APP的设 计

1.系统体系结构设计

笔者设计开发的大学校园助手APP主要是为了实现对所在学校基本信息的收集、管理与发布等。大学校园助手APP系统总体结构设计分为两部分：第一部分是前端设计技术和标准；第二部分是界面数据设计。其界面内容有两种数据类型：一是内容需要及时更新与管理的数据（存放在服务器端的数据库中）；二是短时间不需要进行调整的数据（存放在本地数据库或者设备上）。

2.系统功能结构设计

大学校园助手APP主要面向新生及预报考的人群，因而各模块功能应符合用户的特定要求，不但需要满足用户获取学校最新资讯的需求，而且还要保证其良好的交互体验。笔者通过需求分析，将大学校园助手APP分为四个功能模块，分别为首页、公告栏、校园文化和学生信息。各模块功能的详细介绍如下：①首页模块主要通过“简介”传达建校历史、专业设置、学校部门设置等信息。②公告栏模块传达校园新闻，让用户及时了解校园动态，参与到校园活动中来。③校园生活模块分为八个子模块，分别展示科技创新、志愿服务、文化艺术、校园生活、教育教学、学生生活、社会实践和美丽校园。④学生信息功能模块主要用来收集新生个人学籍信息。

3.数据库设计

大学校园助手APP的页面数据分为静态数据和动态数据，笔者将静态数据设置为Json文件，动态数据存储在与WeX5绑定的MySQL数据库中。下面，笔者以“校园文化”和“公告栏”为例，进一步阐述。

（1）校园文化数据表设计

校园文化数据表储存的数据分为七部分内容，其中包括文化艺术、科技创新等，该模块更新间隔短，因而设置为动态数据，数据库表动作为只查询数据，字段设计如表1所示。

（2）公告栏数据表设计

公告栏数据表（news）存储的信息是新闻资讯，这一模块的内容需要频繁更新，因此将数据设置为动态数据，数据库表动作为只查询数据。利用newsID字段将各个新闻热点区分开来，用户打开内容详细页时将通过newsID来筛选具体的新闻内容，字段设计如表2所示。

● 大学校园助手APP的开发

大学校园助手APP采用单页应用开发模式，由外壳页面、主页面、功能页、子页面组成。下面，笔者以“主页面”“校园文化”及“公告栏”功能模块为例，阐述开发程序。

1.主页面的开发

主页面主要用来展示“首页”等功能模块。主页面是被外壳页面调用shell实例打开，因此为避免初始运行时出现空白页面，要将外壳页面的autoload属性值设为false，并引用shell实例的showpage方法在加载外壳页面的同时展示主页 面。

主页面的页面设计过程是：首先，新建index.w文件，在界面上放置panel组件形成底部固定的页面；接着，在panel组件的bottom部分放置buttongroup组件，新建四个button按钮，分别为四个按钮设置各自的xid、label、icon；然后，在panel组件的content部分放置contents组件，在contents组件上新建四个content，分别将xid命名为homecontent、noticecontent、campuscontent和studentcontent，并将buttongroup组件中四个按钮的target设置为对应的content页面；最后，运行APP激发四个按钮显示出相应的功能页面。

2.校园文化功能模块开发

校园文化页面主要分为八个子模块。为了将八个方面的内容放置在同一个content内，笔者的campuscontent页面设计过程为：首先，在campuscontent页面放置一个panel组件，在panel组件的top部分放置一个titlebar组件，并设置title属性值为“我思故我在”；接着，在panel组件的body部分放置一个row组件，并分为两个列col组件，所占列宽分别为4和8。在第一个col组件中放置一个buttongroup组件，添加八个按钮并分别设置对应的label属性。在第二个col组件中放置一个contents组件，新建八个content并分别设置相应的xid属性。将buttongroup的八个button组件的target设置为对应的xid。“校园文化”功能模块页面如图1所示

3.公告栏功能模块开发

公告栏的content页面内的内容是用来展示新闻资讯的，其页面设计过程为：首先，在model组件中放入一个windowDialog组件和data组件，将windowDialog组件改名为detailDialog，src属性值设置为new.w的绝对路径；接着，将data组件改名为newsdata，在组件的onCustormRefresh方法上编写代码，在“公告栏”页面被激活时，用newsdata组件的onCustomRefresh事件加载news数据表；然后，在newscontent页面中放置一个scrollview组件，在scrollview的content部分放list组件和titlebar组件，为titlebar添加title属性值为“热点/资讯”，为list组件xid值设置为newslist；最后，在newslist组件的li中放入output组件，并设置bind-ref为newsTitle，设置bind-click事件为listClick，点击标题时利用detailDialog组件的打开事件将新闻表当前行作为参数传入新闻详细页。公告栏功能模块页面如图2所 示。

● 应用测试

大学校园助手APP应用测试总共分为前端UI、功能和性能三个方面，笔者分别采用了夜神安卓模拟器和智能设备进行测试。具体测试步骤为：首先，在WeX5开发环境下，打包应用时进行参数配置——资源通过UIserver访问，应用名为大学，Web服务器地址为本机IP地址加8080端口号，首页配置为index.w，版本号为1.1.0，应用包命名为com.wex5.tongda，配置cordova组件device、geolocation和baidulocation；接着，将打包好的APP安装到夜神模拟器和智能终端设备上运行，测试终端包括Android虚拟机、小米4、酷派大神F2、华为P5等，测试系统为Android 5.0到Android 7.6.3。

测试结果显示，大学校园助手APP应用界面合理、操作简单；功能涵盖齐全，各个模块的功能正常展示，贴近新生的需求；同时，性能测试表现出了较强的兼容性和跨平台性。

参考文献：

[1]数字化校园[EB/OL].http：//baike.baidu.com/view/474879.htm.

[2]顾春来.APP应用程序开发模式探究[J].硅谷，2014，149（5）：35，155.

作者简介：张天云（1976—），男，汉族，内蒙古人，硕士，讲师，研究方向为计算机技术。

基金項目：山西省“十二五”规划课题“三维虚拟环境下教学模式研究”，项目编号：GH-12063；2016年山西大同大学教育改革创新重点项目“以服务地方文化产业为导向的数字媒体技术专业人才培养模式研究”，项目编号：XJG2016106。