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。