基于網站群提供信息服務的移動校園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 展示效果