基于网站群提供信息服务的移动校园APP研究与实践

黄 磊 任凤君 郑礼河

（福建医科大学，福建福州，350122）

一、前言

随着移动互联网和智能终端的飞速发展，师生获取信息与服务的渠道逐渐从PC端转移到智能手机、平板电脑等移动终端。诸如邮箱、新闻阅读、地图、搜索等基础性移动服务在教育行业均得到广泛应用，颠覆了互联网以网页为核心的应用形态,APP成为移动互联网应用服务的主导形态，催生了全新的应用服务体系和生态环境。2019年2月28日，中国互联网络信息中心（CNNIC）发布第43次《中国互联网络发展状况统计报告》。报告显示，截至2018年12月，我国网民规模为8.29亿，其中手机网民占比达98.6%。

高校传统的信息服务，主要以网站为主，已经不能满足师生的需求，如何快速的占领智能终端，适应“移动优先”的发展需求，已经成为高校信息化管理人员考虑的首要问题。然而快速搭建校园移动服务的环境基础相对薄弱，师生获取信息的渠道多而繁杂，各类官方应用、本校创业团队应用和第三方通用应用参差不齐，造成使用者多渠道登录，信息不一致，无法适应师生日益增长的移动服务需求。同时移动端的信息安全，也给学校带来了挑战。

二、网站群管理平台及移动校园A P P

高校为了解决内部各单位网站制作水平不一，网站使用技术不一，网站数据互相独立，难以资源共享及网站的安全性低等方面的问题，搭建网站群管理平台，实现对各单位网站统一管理和信息互通、资源共享。为了满足师生日益增长的移动服务需求，统一信息服务的获取渠道，提高移动应用的质量，移动校园APP的建设的需求显得愈发迫切。学校急需构建一个开放、安全、可控的移动信息服务的运行环境，为师生提供统一移动应用入口、安全稳定、可信、权威的校内信息服务。

（一）网站群管理平台

网站群管理平台采用数据库服务器、制作服务器和静态发布服务器分开部署的方式。使用N层体系结构：基础设施层、技术支撑层、应用层、页面展现层、安全防护层。

1.基础设施层，主要包括：基础的网络环境和软硬件基础设施，是信息存储、运算、传输的基础。2.技术支撑平台，包括身份认证、内容管理、消息处理等，是整个体系的核心。3.应用层采用，包括模块化的组件，用户可根据需要，进行应用模块的扩展。4.页面展现层，包括模板定义，脚本文件等，是重要组成部分，通过定义不同的模板，可以很方便地展现不同特色的网站界面，这一层的功能，为网站的移动化提供了可能。5.安全防护层，包括权限设置、认证管理、安全检测等方面，贯穿于整个系统中，保证系统安全稳定高效地运行。

用户访问网站域名时，访问的是发布服务器上的静态页面，而制作服务器上有网站的动态页面，当管理员在网站制作后台正式发布文章时，制作服务器上的动态页面将转换成静态页面文件同步到发布服务器上，使得用户访问的页面是授权发布的静态页面文件，这样可以大幅提高系统的安全性。

（二）移动校园APP

移动校园APP同样采用多层架构，自下而上分为基础支撑层、应用层、服务层、终端层。

1.基础支撑层包括基础的网络环境和软硬件基础设施，2.应用层由两部分组成，第一部分是移动平台的管理系统，包括app开发者平台、统一通信平台、资讯平台等；第二部分是其他接入的业务系统，为移动校园APP提供主要的基础应用支撑。3.服务层是业务系统与移动客户端之间的桥梁，提供认证、消息、信息订阅浏览等功能。4.终端层包括移动客户端以及第三方的各种web-app、native-app等。

通过上述介绍，可以看出两个平台系统都采用多层架构，如何将两个平台有机结合，统一信息服务源头管理，利用网站群管理平台方便、快捷的来适配移动校园APP的信息服务是我们本次重点研究的内容。

三、利用网站群提供移动校园A P P信息服务

网站群管理平台为PC端的消息发布及获取提供了便利的平台，同时，它也能够支持移动网站的建设，搭建适应移动端访问的模板，网站栏目和数据自动继承PC网站的栏目和数据，管理人员无须维护两套数据，网站可根据来访终端识别并自动适配推送页面。基于网站群管理平台的便利性和移动校园APP的包容性，使得通过网站群管理平台适配移动端的信息展示成为可能。

（一）移动网站设计方案

互联网行业移动版网站构建策略方案主要分为响应式网页方案、服务器端适配方案和原生网页方案。[1]

1.响应式网页方案

2010年，著名网页设计师伊桑·马科特(Ethan Marcotte)在《A List Apart》上创新性地提出了响应式网页设计（Responsive Web Design，简称RWD）的理念，该设计旨在实现网站页面内容与版式的自动适配，以满足不同设备、场合和用户的需求，是一种设计的全新思维模式。从技术层面来看，响应式网页设计的构成包括流式布局（Fluid Grids）、自适应图片（Scalable Images）和媒介查询（Media Queries），多管齐下为用户提供最优适配的网页解决方案。该方案的最大优势在于覆盖面广，网页代码的一致性带来了PC端和移动端用户体验的高度一致性，从而大大降低了开发运营成本、较小了网页维护难度。

2.服务器端适配方案

服务器端适配方案同样用于解决页面显示与不同终端的适配问题，它的实现过程是基于网站服务器对用户访问请求中设备参数的识别，从而动态转换HTML、JS、CSS、图像等要素之后返回到移动端显示，它的前期识别过程真正意义上实现了平台的显示最优化，是该方案的优势所在，但是其前端JavaScript 逻辑兼容性对User Agent 参数判断和资源异步加载提出了较高的要求，同时还存在部分搜索引擎优化限制，制约了服务器端适配方案的推广应用。

3.原生网页方案

原生网页方案通过重新搭建有别于PC版网站的移动门户网站来实现不同终端设备上网页显示的适配，以前端服务器为媒介，通过URL重定向的方式在分析访问请求中的设备参数信息后进行移动端或PC端的选择跳转。该方案虽然实现了移动网站和PC网站的物理区分，但采用两套架构必将带来更高的运营维护成本和开发投入，不符合互联网PC端和移动端融合的国际趋势。

通过对上述三种方案的分析，基于各单位的PC端网站建设已经较为完善，为了不改变用户使用习惯，暂不考虑更改PC端页面，利用网站群管理平台的页面展现层能力，改进原生网页方案的设计方式，即利用网站群的统一后台管理不变，只对前端展示页面进行区分，分别设计PC端的模板和移动端的模板。当用户访问主域名时，服务器根据接收到的设备参数，跳转到对应的虚拟目录，按需提供PC端或移动端模板来适配终端屏幕大小。由于现有网站的PC端模板已经投入使用，现只要考虑移动端模板的设计。

（二）前期规划

前期规划是一个网站建设的重要环节，前期规划考虑的是否全面到位，有可能直接影响网站建设的质量。[2]以某大学门户网站为例，现行的PC端门户网站是搭建在网站群上的，页面上有比较丰富的内容，因此在规划移动端网站布局时需要考虑用户的使用习惯，合理的设计页面上需要展示的内容，不是完全推翻，也不是全部照搬。经过规划，移动端展示主要以文字新闻信息为主，加入部分图片新闻和视频新闻，像PC端页面中的大图风景展示则无需在移动端展示。

（三）页面设计

移动端网站的前端设计包括界面设计、HTML 布局结构设计、Media Queries 规划、CSS设计、动画设计等等， 其中 HTML 布局结构设计和 Media Queries 规划都涉及视口尺寸问题。[3]

移动端模板主要 HTML 布局结构：

＜!DOCTYPE html＞

＜html＞

＜head＞＜/head＞

＜body＞

＜div class=“wrapper” id=“headtop”＞＜/div＞＜!--英文版切换按钮--＞

＜div class=“wrapper” id=“header”＞＜/div＞＜!--logo--＞

＜div class=“wrapper” id=“dan”＞＜/div＞＜!-- 每日赠言 --＞

＜div class=“wrapper” id=“slide”＞＜/div＞＜!-- 图片切换 --＞

＜div class=“wrapper” id=“container”＞＜/div＞＜!--主体内容开始--＞

＜div class="wrapper" id="xia"＞＜/div＞＜!-- 友情链接--＞

＜div class="wrapper" id="footer"＞＜/div＞＜!--底部开始--＞

＜div class="scripts"＞＜/div＞

＜/body＞

＜/html＞

在此结构的基础上还需要在网页HTML中的＜head＞部分进行部分申明：

添加 ＜meta name=“viewport”content=“width=device-width,user-scalable=0,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0 minimalui”/＞标签，禁止用户进行网页缩放。

添加 ＜meta http-equiv=“X-UA-Compatible”content=“IE=Edge,chrome=1”＞标签，如果IE有安装GCF(Google Chrome Frame)，调用安装的组件，如果没有，就会和＜meta http-equiv=“XUA-Compatible” content=“edge” /＞ 一 样， 使用最高版本的IE内核进行渲染。

添 加 ＜meta content=“ye” name=“applemobile-web-app-capable” /＞ 标签，用来删除默认的苹果工具栏和菜单栏，达到全框显示。

添加 ＜meta content=“telephone=no”name=“format-detection” /＞ 标签，这个标签的默认值是telephone=yes，可以将页面中的一连串数字识别为电话号码、并设置为手机可以拨打的一个连接。而将其值设置为telephone=no,可以阻止该识别。

除对＜head＞部分申明外，还需要在CSS样式文件中添加部分样式，以更好的适应移动端页面：

-webkit-text-size-adjust: 100%;-ms-textsize-adjust: 100%。一般情况下当用户放大网页时，字体也会随着变大，而添加了该样式后，网页中的字体只会显示当前设置的字体大小，不会随着网页放大而变大，通过设置该代码以防止iPhone在坚屏转向横屏时放大文字等情况。[3]

-webkit-font-smoothing: antialiased; -mozosx-font-smoothing: grayscale; 这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰。[4]

在定义不同模块宽度的时候，用百分比来代替固定宽度，如 width:100%；这样可以更好的适应手机端页面大小。当手机屏幕分辨率有所不同时，可以根据手机屏幕的大小进行动态缩放模块宽度，而不会像固定宽度设计那样把模块缩在一边或者超出屏幕。

（四） 调试

移动端页面设计最后一个非常重要的环节就是调试，只有在调试过程中才能更好地发现问题、解决问题。首先，通过浏览器的开发者工具进行初步测试，这里使用chrome浏览器访问移动端页面，然后打开开发者工具，再打开toggle device toolbar功能进行测试，通过修改手机型号或者自定义分辨率大小，可以模拟测试各种主流移动端网页的展示效果。然后，再在各种物理终端设备上进行测试，通过物理终端的浏览器访问，查看实际效果。最后，接入移动校园APP内进行测试。由于网站群管理平台使用的是制作和发布分开的模式，不同模板之间不会相互影响，所以仅需要测试移动端模板即可。图1、图2、图3为某大学主页在移动校园APP中展示的效果。

四、总结

随着智能终端应用越来越便捷，移动校园APP也得到快速发展，一方面能够为广大师生提供最基本的校园信息服务，另一方面朝着功能更加丰富的移动办公学习平台发展[5]。利用网站群管理平台搭建适合移动端访问的HTML5模板，同时在移动校园APP中加载网站的移动端模板，可以无需进行数据迁移或者多站点管理和发布，就可以较为方便的将现有网站群中的网站信息无缝对接到移动校园APP中，方便师生随时随地的访问。移动校园APP基于网站群提供信息服务的方法，使移动校园APP信息服务的搭建更加便捷，并能有效降低信息服务管理、维护的难度和成本，具有一定的借鉴和推广价值。

图1 展示效果

图2 展示效果

图3 展示效果