基于微信小程序的高校新生預報到系統設計與實現

李霞

(南京師范大學泰州學院， 信息工程學院， 江蘇， 泰州 225300)

0 引言

近幾年來我校招生人數在逐年增加，大大增加了新生報到工作的負擔。目前，我校學生報到主要是采取傳統的現場登記、填寫相關表格，報到高峰期學生需要排隊，給工作人員和學生都帶來了很多不便。目前大多數高校的迎新系統采用傳統的PC端Web網站，但由于移動端屏幕尺寸、網頁設計風格等，使移動終端用戶體驗不佳。隨著移動應用技術的快速發展，微信小程序依托微信的開發標準開發，可自動適配IOS系統和Android系統。小程序基于跨平臺的屬性，大大降低了建設維護的成本、提高版本更新的效率[1]。微信小程序即用即走，使用便捷，無需下載安裝，充分發揮了移動互聯網時代入口輕量化的優勢。

針對目前我校傳統迎新存在的問題，結合小程序所具備的優勢，設計開發基于微信小程序的高校新生預報到程序，將會給新生帶來便利，提高迎新工作效率和服務質量。

1 關鍵技術介紹

1.1 MINA框架簡介

微信小程序采用MINA應用框架。框架主要包含：頁面視圖層和應用邏輯層。頁面視圖層由wxml與wxss文件組成，處理事務交給AppService應用邏輯層處理，視圖層和邏輯層通過JSBridge實現通信。MINA框架封裝了文件系統、網絡通信、任務管理等基礎功能，對上層提供JavaScript API，開發者可以使用微信客戶端提供的各種功能，快速構建應用[2-6]。微信小程序的框架如圖1所示。

圖1 微信小程序框架圖

1.2 小程序云開發

小程序云開發平臺，提供云函數、云數據庫等數據存儲的一項后端云服務。微信小程序云提供的是JSON格式數據庫，通過調用add()，remove()，update()，get()方法進行數據的增加、刪除、修改和查找，同時支持在控制臺進行可視化管理。小程序提供的云存儲，通過調用uploadFile()、downloadFile()、deleteFile()方法進行文件的上傳、下載和刪除，并支持對文件設置訪問權限[7]。云函數是運行在云端的代碼，運用callFunction()來調用云函數，如果涉及其他用戶改動他人創建的數據，建議使用云函數。

2 微信小程序預報到系統結構設計

2.1 系統要求

小程序預報到系統主要用在正式報到前，新生通過該系統提前了解學校最新通知，宿舍安排、課表和熟悉校園周邊環境以及進行個人信息和返校方式的登記。因此，小程序預報到系統必須滿足如下要求。

(1) 易操作。對手機系統沒有特別要求，可以跨平臺訪問，新生只需要掃描小程序碼，無需下載安裝，成功登錄后可使用相應的服務，同時高校新生預報到系統要界面美觀、簡潔，給用戶良好的體驗。

(2) 實用性。系統能夠幫助新生提前熟悉校園和周邊，了解學校最新通知、室友、課表等，同時便于教師提前掌握學生的基本信息、返校時間和方式，有助于新生接待工作的合理安排。

(3) 健壯性。高校新生預報到系統依托微信小程序開發平臺，使用JavaScript作為開發的高級程序語言，使用小程序云數據庫存儲技術，使得小程序運行平穩，系統能夠克服用戶可能出現的錯誤。

2.2 系統功能設計

高校新生預報到系統可以提高新生的報到效率，在學校與新生之間搭起一個信息交流的平臺。該系統不但有助于學生隨時知悉學校的通知公告，還能夠幫助學校根據學生填報的返校信息做出個性化的迎接服務。整個系統的功能可以劃分為8個主要模塊，功能結構如圖2所示。

圖2 系統功能模塊圖

(1) 登錄模塊。新生在使用系統前，需要根據相應賬號和密碼進行登錄，成功登錄后才可以使用相關功能。

(2) 學校概覽。該模塊主要包括學校簡介、學校美景、院系分布、來校路線等，方便學生更好地了解新學校，便于將來迅速融入新環境。

(3) 通知公告。新生登錄后，可以查看入學通知信息，入學指南，報到地點，報到注意事項等。管理員可以發布、修改、刪除發布的通知。

(4) 課表查詢。根據班級查詢當前學期的課表，新生可提前熟悉本學期所要學習的課程，這樣可以快速適應大學的學習節奏。

(5) 宿舍查詢。通過宿舍查詢，學生可以了解宿舍信息以及室友的簡單信息。[10]

(6) 新生交流。新生可以發布討論貼，交流入學相關問題，緩解對新環境的焦慮。

(7) 信息登記。新生填寫個人身份信息、聯系方式、家庭住址、報道時間和方式等，方便學校建立電子檔案、布署接待工作等。

(8) 問題反饋。一方面可以收集使用中存在的問題，從而可以進行版本的優化和完善；另一方面收集新生給學校提出的建議，方便學校及時了解他們的訴求，精確地幫助新生解決問題。

2.3 系統數據庫設計

新生預報到系統使用小程序云數據庫作為系統后臺數據庫，系統使用的集合有：用戶信息、通知信息、話題討論、學生返校信息、反饋信息等。系統中通知信息集合，用來存儲管理發布的通知，含有標題、發布時間、發布內容等字段。話題討論集合，主要存儲用戶在討論區內發布的內容，包括話題發布者姓名、發布者頭像信息、話題內容、話題圖片等字段[11]。學生返校信息集合，主要保存新生填寫的入學信息，來校方式、報到方式等，便于學校進行統計。通知信息集合、話題討論集合、學生返校信息集合中包含的字段和類型分別如表1—表3所示。

表1 通知信息集合

表2 話題討論集合

3 系統功能實現

新生首先通過賬號和密碼登錄該系統，系統將輸入的數據與云端數據庫進行匹配，匹配成功則默認進入“首頁”，否則提示信息有誤。接著可以通過tabBar進行頁面切換，“首頁”可以查看學院簡介、校園美景、最新通知等；在“校園服務”模塊中新生可以查詢課表、宿舍以及進行發帖討論；在“我的”模塊，新生可以進行返校信息登記、系統使用問題和對學校相關工作的建議。預報到系統的使用流程如圖3所示。

表3 學生返校信息集合

圖3 系統操作流程

3.1 校園首頁模塊的實現

首頁內容主要展示校園的一些信息，上半部分為swiper組件，輪播校園迎新海報；下半部分通過scroll-view顯示navigator組件，用來展示學校的基本情況，比如學院簡介、校園美景、院系分布、校園VR、通知公告等。點擊相應組件，則鏈接到學校相應的頁面。首頁界面設計的部分wxml代碼如下所示。首頁界面效果如圖4所示。

……

……

圖4 系統首頁

3.2 通知公告模塊的實現

通知公告頁面視圖主要運用了image和view組件，通過wxss樣式來控制組件的顯示效果。首先通過wx.cloud.database( )進行數據庫的初始化工作，然后通過get( )方法查詢云數據的通知集合，調用setData( )方法，將轉置后的數據存儲到datalist[]數組中。在視圖層通過wx:for列表渲染出通知集合中的通知內容。通過點擊通知項，可以跳轉到相應的通知詳細頁面。查詢通知的部分代碼如下所示。通知公告顯示效果如圖5所示。

const db = wx.cloud.database({

env: 'welcome-67unz'

})

db.collection('broadcast')

.get()

.then(res => {

this.setData({

datalist: res.data.reverse()

})

})

.catch(res => {

console.log("獲取失敗", res)

})

……

3.3 個人信息模塊的實現

通過tabBar切換到“我的”頁面，用戶通過完善返校信息入口，填寫返校信息。頁面設計綜合使用了text，label，input，radio，picker，textarea等組件。完善返校信息界面,如圖6所示。用戶選擇報道方式時，有四個選項可供選擇：按時報道、請假、申請保留入學資格、放棄入學。系統根據用戶的選擇，提示用戶進一步完善信息。例如，如果選擇按時報到，需補充具體的返校日期、返校方式、隨行人數等信息。用戶提交信息，觸發表單的submit事件，通過調用數據庫的add( )方法，將數據上傳至云數據庫中。部分代碼如下。

圖6 完善返校信息

var that = this

var backdata = db.collection('backdata')

app.globalData.uploadinfo = true

app.globalData.navurl = ""

backdata.add({

data: {

stuname: that.data.stuname,

stusex: that.data.stusex,

stubirthDay: that.data.stubirthDay,

stuphone: that.data.stuphone,

……

stuqingjiareason: that.data.stuqingjiareason,

stubaoliuzige: that.data.stubaoliuzige,

stufangqireason: that.data.stufangqireason

}

})

4 總結

微信小程序具有“輕、精、快、簡”的輕量化特征，它是具有非凡潛力的新應用模式[12]。基于微信小程序的高校新生預報到系統，既能夠讓新生提前熟悉校園環境、課表和室友等，又方便教師采集新生基本信息，提前掌握新生報到時間和方式，便于迎新工作的科學安排。該系統具有很高的實際應用價值和推廣意義，并且在后續使用過程中，通過功能的擴展，可以助力校園管理，發揮更大的作用。