基于微信小程序的學生信息管理系統

馮穎凌 鄭賢智

（南通大學理學院 江蘇·南通 226009）

0 引言

我們學生運用手機也可以使我們的校園生活變得更加方便快捷。學生管理系統作為一個學生在校園生活中所不可缺少的應用系統，傳統的管理系統需要運用計算機來使用并查詢各種信息。這種傳統的系統使用方式會有一定的局限性，無法隨時隨地的讓學生使用這個系統，而運用手機所開發一款基于手機智能系統的軟件能夠方便的解決這個問題。但如果是運用傳統的手機APP也會擁有一些問題。不能保證每個學生都會去下載這一 APP。雖然比傳統的計算機系統要方便許多但還是會比較有負擔。而微信這個通訊程序幾乎在所有用戶的手機中都有安裝。

1 運行環境搭建

1.1 注冊小程序賬號

要開發微信小程序，需要先注冊一個能夠使用小程序的賬戶。我們可以進入微信公眾平臺官網（https://mp.weixin.qq.com/），注冊一個小程序賬戶，填寫完郵箱信息后，可以在信息登記里選擇主體類型。主體類型有個人，企業，政府，媒體和其他組織。在這其中，企業、政府、媒體和其他組織均需要進行微信認證才能使用，個人類型包括由自然人注冊和運營的公眾賬號，所以我們選擇個人作為主體類型。之后填寫完個人身份信息提交后就完成了小程序賬號的注冊。

1.2 開發環境搭建

在注冊完小程序賬號后，我們可以用我們注冊好的賬戶登錄來進入小程序后臺，在后臺可以管理你的小程序權限，查看小程序的各種數據報表。登錄后在開發設置里獲取小程序的APP ID。

之后需要一個工具來開發小程序。開發小程序也可以用如 Sublime Text，WebStorm，Visual Studio Code等常用的開發工具，但考慮到對小程序開發的易用性以及對wxml，wxss的支持，在這里我們選擇了微信官方所提供的微信開發者工具來開發我們的小程序，系統為 PC windows10 64位。

2 功能設計

2.1 課表查詢

我們在課程表頂部設計了一個彈性盒子flex布局，來完成星期一到星期日的排列，使用wx的for循環來循環顯示周期的一到日。并且在左邊留了35rpx來空出一部分空間來和側邊對齊。并且選擇兩種對比度比較高的顏色來設置好背景色和前景色。而且頂部的星期是在最頂部的要素，所以要單獨設立標簽，并且因為不會有變化，我們固定了他的寬高并且固定在了上方。

還要設計一個節次線條來分割節次，節次線條我們可以通過設計一個高度為節次乘以100rpx，寬度為750rpx的透明箱子，并且設置成只顯示底部線條來完成。我們同樣可以用wx的for循環來循環顯示這個箱子。而節次中我們可以分為上午和下午，通常第五節為上午。我們可以設置循環并且設置一個判斷語句，因為循環中index是從0開始，所以要想在第五節的線條來做出區別的話只要判斷當index==4的時候，來標記為不同的顏色，其余時候為相同顏色。

2.2 成績查詢、教室查詢、考試信息

我們可以把成績列表中的課程名稱、成績和學分布置到一個盒子中，并且把flex布局中的justify-content屬性設置為center，align-items屬性同樣設置center，這樣我們就可以把每一行所顯現出來的數據能夠非常完美的對齊到一條線中，并且左右的間隔都能夠平均的分配出來。

而在表格部分，除了設計彈性盒子flex布局之外，還設置了一個wx的for循環遍歷一遍數組，并且設計了兩種背景顏色的flex布局樣式來更好的區分表格的行數。

教室查詢模塊和考試信息查詢模塊同樣用了成績查詢模塊的設計思路，同樣運用了彈性盒子flex布局設計一個表格，教室查詢能夠根據數組中的數據顯示出來各個教室的占用情況，空閑教室通過判斷語句判定后把那一串數據標綠顯示，用搜索功能可以查詢到各個教室的信息。考試信息查詢會顯示考試的科目、地點和時間，也同樣能夠搜索查詢。

這里的list數組我們也同樣可以保存到云數據庫中，通過調用云數據庫的list數組來獲取我們的數據，從而在表格中所顯示出來。

2.3 GPA計算器

在GPA計算器這一模塊中，我們設計了一個計算功能。用戶可以用此模塊來計算出GPA績點。只要輸入成績和學分，就能夠一鍵算出績點結果，十分方便。

我們先在上方弄了一個文字提示，給用戶介紹了此模塊的功能和用法。整個界面中間設置了兩個輸入框，分別能夠獲取用戶所輸入的成績和學分。因為計算GPA績點需要多個成績和學分信息，所以我們可以讓用戶輸入多個成績和學分，并且設置了一個特殊符號，通過這個特殊符號使得輸入進來的成績以及學分相互分開，這樣就能一次性獲取全部數據。

在我們獲取到成績和學分的兩組數組n和g后，可以設一個程序來計算GPA績點。首先我們要知道GPA績點的算法是什么樣的。GPA的計算方法為成績減去50后除以10乘以該課程的學分的總和并除以學分的總和。也就是

我們把剛才設置好的計算函數設為add，在頁面中設置一個按鈕，并且把剛才設置的函數add綁定到這個按鈕。我們在輸入框輸入完數組后，按下綁定了add函數的按鈕就能夠計算出結果，并且刷新了頁面，將獲取到的計算結果再顯示到我們頁面中結果的顯示框。我們就完成了整個GPA績點計算器模塊的設計。

2.4 圖書館

在頁面的上方，我們設置了一個flex布局，用來制作正在借閱和歷史借閱的入口。在下方我們做了一個顯示推薦書籍的列表。列表的每單一行設置為一個flex布局，高度設置為150rpx。設定了一個有書籍的標題和簡介的list數組。從中可以獲取到書籍的標題來顯示書籍名稱，在下面可以獲取到書籍信息，并且把字符大小設為27rpx，并且顏色設置為灰色，從而突出標題并且顯得更加美觀。單一行的樣式設計好后我們可以設置wx的for循環來遍歷這個flex布局，通過數組內的書籍來循環顯示出一個列表。

2.5 視頻資源

視頻資源這一模塊可以把保存在云開發中云存儲里的視頻文件在小程序中顯示，并且在視頻下面顯示視頻相關的簡介。運用video標簽來顯示視頻的鏈接，用text標簽來顯示從云數據庫獲取的視頻簡介。

2.6 主頁

在設計好各個模塊的功能后，我們把模塊的入口排列到主頁上，運用彈性盒子布局，將入口分為三行，并且給每個入口設計一個圖標，所有圖標的風格要一致，在圖標下面顯示第個入口的標題。

首先設置一個flex布局，將所有圖標居中顯示，并在上下設置30rpx的間隔。之后設置image標簽來設置圖標入口，將其寬度設為25%，并且居中顯示。在圖片的正文設置一個text標簽并命名為各個模塊的名稱，并在每個圖標頁面設置一個navigator標簽對應各個模塊的鏈接。為了美觀，將每一行的圖標數量設置不超過三個。

3 小結

本次所設計的學生管理系統是一款基于微信小程序所制作的一款應用程序。本應用程序將學生在日常校園生活中最常用的幾個功能做了整合，用微信小程序的方式來制作完成整個系統。學生能夠十分方便的使用這個應用，無須下載，上手簡單，使用不復雜。

本應用所包含的功能都是學生最常用的幾個功能，如課表查詢，成績查詢，考試信息查詢，GPA計算等，還加入了視頻資源，新聞資訊，每日簽到，圖書館等功能。

當然，在今后的開發中，我們還可以增加一些功能，比如對收藏的老師的課程，增加提醒功能，每日的作業提醒等，頁面中加入美工元素，讓頁面更美觀。