摘要：本文首先闡述了建設數(shù)字化校園的重要性，接著對大學校園助手APP進行了體系結構設計，詳細分析了“首頁”“公告欄”“校園文化”和“學生信息”四個主要模塊的具體功能，繼而又對四個模塊進行了數(shù)據(jù)表設計并在此基礎上進行了開發(fā)。

關鍵詞：數(shù)字化校園；Web APP；移動應用；WeX5

中圖分類號：G434 文獻標識碼：A 論文編號：1674-2117（2017）10-0073-03

近幾年，隨著學生對移動學習與泛在學習認知的加深與網絡資源建設的去中心化，采用移動終端獲取信息已成為高校學生的操作習慣。同時，數(shù)字化校園成為充分優(yōu)化利用數(shù)字資源的一種虛擬教育環(huán)境。[1]因而，不斷深化和構建數(shù)字化校園系統(tǒng)中的APP體系，形成以移動智能為趨勢的無線校園體系結構是高校構建信息化、智能化、便利化校園的重要任務之一。

● 開發(fā)環(huán)境

1.Web APP開發(fā)技術框架

Web APP開發(fā)模式使用的是Web開發(fā)的常用技術，如HTML5、CSS3、JavaScript，服務端技術JAVA、PHP、ASP等[2]，主要有HTML5云網站和移動應用客戶端兩個重要組成模塊，HTML5云網站的作用是為移動應用提供數(shù)據(jù)支持，移動應用客戶端的主要作用是為應用提供設備支持，Web APP界面簡單并且凸顯了跨平臺的高兼容性。

2.跨平臺開發(fā)環(huán)境WeX5

WeX5將移動應用開發(fā)分為三個模塊：①前端UI設計技術和標準采用w3c的html+css+js，框架采用jquery、require js和bootstrap的發(fā)展路線，不斷深化用戶與界面之間的交互體驗，提升應用價值；②后服務端對開發(fā)語言沒有硬性要求，設計人員可以采用熟悉的語言來開發(fā)程序；③前端設備API的apiframe work采用了codova/phonegap。另外，WeX5開發(fā)平臺是開源性的，可進行跨平臺多前端應用開發(fā)，具備高效精致的UI組件體系和可視化拖拽式集成開發(fā)環(huán)境IDE，具有全能的調試支持和智能代碼提示功能，是APP開發(fā)的首選。

● “大學校園助手”APP的設 計

1.系統(tǒng)體系結構設計

筆者設計開發(fā)的大學校園助手APP主要是為了實現(xiàn)對所在學?；拘畔⒌氖占?、管理與發(fā)布等。大學校園助手APP系統(tǒng)總體結構設計分為兩部分：第一部分是前端設計技術和標準；第二部分是界面數(shù)據(jù)設計。其界面內容有兩種數(shù)據(jù)類型：一是內容需要及時更新與管理的數(shù)據(jù)（存放在服務器端的數(shù)據(jù)庫中）；二是短時間不需要進行調整的數(shù)據(jù)（存放在本地數(shù)據(jù)庫或者設備上）。

2.系統(tǒng)功能結構設計

大學校園助手APP主要面向新生及預報考的人群，因而各模塊功能應符合用戶的特定要求，不但需要滿足用戶獲取學校最新資訊的需求，而且還要保證其良好的交互體驗。筆者通過需求分析，將大學校園助手APP分為四個功能模塊，分別為首頁、公告欄、校園文化和學生信息。各模塊功能的詳細介紹如下：①首頁模塊主要通過“簡介”傳達建校歷史、專業(yè)設置、學校部門設置等信息。②公告欄模塊傳達校園新聞，讓用戶及時了解校園動態(tài)，參與到校園活動中來。③校園生活模塊分為八個子模塊，分別展示科技創(chuàng)新、志愿服務、文化藝術、校園生活、教育教學、學生生活、社會實踐和美麗校園。④學生信息功能模塊主要用來收集新生個人學籍信息。

3.數(shù)據(jù)庫設計

大學校園助手APP的頁面數(shù)據(jù)分為靜態(tài)數(shù)據(jù)和動態(tài)數(shù)據(jù)，筆者將靜態(tài)數(shù)據(jù)設置為Json文件，動態(tài)數(shù)據(jù)存儲在與WeX5綁定的MySQL數(shù)據(jù)庫中。下面，筆者以“校園文化”和“公告欄”為例，進一步闡述。

（1）校園文化數(shù)據(jù)表設計

校園文化數(shù)據(jù)表儲存的數(shù)據(jù)分為七部分內容，其中包括文化藝術、科技創(chuàng)新等，該模塊更新間隔短，因而設置為動態(tài)數(shù)據(jù)，數(shù)據(jù)庫表動作為只查詢數(shù)據(jù)，字段設計如表1所示。

（2）公告欄數(shù)據(jù)表設計

公告欄數(shù)據(jù)表（news）存儲的信息是新聞資訊，這一模塊的內容需要頻繁更新，因此將數(shù)據(jù)設置為動態(tài)數(shù)據(jù)，數(shù)據(jù)庫表動作為只查詢數(shù)據(jù)。利用newsID字段將各個新聞熱點區(qū)分開來，用戶打開內容詳細頁時將通過newsID來篩選具體的新聞內容，字段設計如表2所示。

● 大學校園助手APP的開發(fā)

大學校園助手APP采用單頁應用開發(fā)模式，由外殼頁面、主頁面、功能頁、子頁面組成。下面，筆者以“主頁面”“校園文化”及“公告欄”功能模塊為例，闡述開發(fā)程序。

1.主頁面的開發(fā)

主頁面主要用來展示“首頁”等功能模塊。主頁面是被外殼頁面調用shell實例打開，因此為避免初始運行時出現(xiàn)空白頁面，要將外殼頁面的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激發(fā)四個按鈕顯示出相應的功能頁面。

2.校園文化功能模塊開發(fā)

校園文化頁面主要分為八個子模塊。為了將八個方面的內容放置在同一個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.公告欄功能模塊開發(fā)

公告欄的content頁面內的內容是用來展示新聞資訊的，其頁面設計過程為：首先，在model組件中放入一個windowDialog組件和data組件，將windowDialog組件改名為detailDialog，src屬性值設置為new.w的絕對路徑；接著，將data組件改名為newsdata，在組件的onCustormRefresh方法上編寫代碼，在“公告欄”頁面被激活時，用newsdata組件的onCustomRefresh事件加載news數(shù)據(jù)表；然后，在newscontent頁面中放置一個scrollview組件，在scrollview的content部分放list組件和titlebar組件，為titlebar添加title屬性值為“熱點/資訊”，為list組件xid值設置為newslist；最后，在newslist組件的li中放入output組件，并設置bind-ref為newsTitle，設置bind-click事件為listClick，點擊標題時利用detailDialog組件的打開事件將新聞表當前行作為參數(shù)傳入新聞詳細頁。公告欄功能模塊頁面如圖2所 示。

● 應用測試

大學校園助手APP應用測試總共分為前端UI、功能和性能三個方面，筆者分別采用了夜神安卓模擬器和智能設備進行測試。具體測試步驟為：首先，在WeX5開發(fā)環(huán)境下，打包應用時進行參數(shù)配置——資源通過UIserver訪問，應用名為大學，Web服務器地址為本機IP地址加8080端口號，首頁配置為index.w，版本號為1.1.0，應用包命名為com.wex5.tongda，配置cordova組件device、geolocation和baidulocation；接著，將打包好的APP安裝到夜神模擬器和智能終端設備上運行，測試終端包括Android虛擬機、小米4、酷派大神F2、華為P5等，測試系統(tǒng)為Android 5.0到Android 7.6.3。

測試結果顯示，大學校園助手APP應用界面合理、操作簡單；功能涵蓋齊全，各個模塊的功能正常展示，貼近新生的需求；同時，性能測試表現(xiàn)出了較強的兼容性和跨平臺性。

參考文獻：

[1]數(shù)字化校園[EB/OL].http：//baike.baidu.com/view/474879.htm.

[2]顧春來.APP應用程序開發(fā)模式探究[J].硅谷，2014，149（5）：35，155.

作者簡介：張?zhí)煸疲?976—），男，漢族，內蒙古人，碩士，講師，研究方向為計算機技術。

基金項目：山西省“十二五”規(guī)劃課題“三維虛擬環(huán)境下教學模式研究”，項目編號：GH-12063；2016年山西大同大學教育改革創(chuàng)新重點項目“以服務地方文化產業(yè)為導向的數(shù)字媒體技術專業(yè)人才培養(yǎng)模式研究”，項目編號：XJG2016106。