馮穎凌 鄭賢智

（南通大學(xué)理學(xué)院 江蘇·南通 226009）

0 引言

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

1 運(yùn)行環(huán)境搭建

1.1 注冊(cè)小程序賬號(hào)

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

1.2 開發(fā)環(huán)境搭建

在注冊(cè)完小程序賬號(hào)后，我們可以用我們注冊(cè)好的賬戶登錄來(lái)進(jìn)入小程序后臺(tái)，在后臺(tái)可以管理你的小程序權(quán)限，查看小程序的各種數(shù)據(jù)報(bào)表。登錄后在開發(fā)設(shè)置里獲取小程序的APP ID。

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

2 功能設(shè)計(jì)

2.1 課表查詢

我們?cè)谡n程表頂部設(shè)計(jì)了一個(gè)彈性盒子flex布局，來(lái)完成星期一到星期日的排列，使用wx的for循環(huán)來(lái)循環(huán)顯示周期的一到日。并且在左邊留了35rpx來(lái)空出一部分空間來(lái)和側(cè)邊對(duì)齊。并且選擇兩種對(duì)比度比較高的顏色來(lái)設(shè)置好背景色和前景色。而且頂部的星期是在最頂部的要素，所以要單獨(dú)設(shè)立標(biāo)簽，并且因?yàn)椴粫?huì)有變化，我們固定了他的寬高并且固定在了上方。

還要設(shè)計(jì)一個(gè)節(jié)次線條來(lái)分割節(jié)次，節(jié)次線條我們可以通過設(shè)計(jì)一個(gè)高度為節(jié)次乘以100rpx，寬度為750rpx的透明箱子，并且設(shè)置成只顯示底部線條來(lái)完成。我們同樣可以用wx的for循環(huán)來(lái)循環(huán)顯示這個(gè)箱子。而節(jié)次中我們可以分為上午和下午，通常第五節(jié)為上午。我們可以設(shè)置循環(huán)并且設(shè)置一個(gè)判斷語(yǔ)句，因?yàn)檠h(huán)中index是從0開始，所以要想在第五節(jié)的線條來(lái)做出區(qū)別的話只要判斷當(dāng)index==4的時(shí)候，來(lái)標(biāo)記為不同的顏色，其余時(shí)候?yàn)橄嗤伾?/p>

2.2 成績(jī)查詢、教室查詢、考試信息

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

而在表格部分，除了設(shè)計(jì)彈性盒子flex布局之外，還設(shè)置了一個(gè)wx的for循環(huán)遍歷一遍數(shù)組，并且設(shè)計(jì)了兩種背景顏色的flex布局樣式來(lái)更好的區(qū)分表格的行數(shù)。

教室查詢模塊和考試信息查詢模塊同樣用了成績(jī)查詢模塊的設(shè)計(jì)思路，同樣運(yùn)用了彈性盒子flex布局設(shè)計(jì)一個(gè)表格，教室查詢能夠根據(jù)數(shù)組中的數(shù)據(jù)顯示出來(lái)各個(gè)教室的占用情況，空閑教室通過判斷語(yǔ)句判定后把那一串?dāng)?shù)據(jù)標(biāo)綠顯示，用搜索功能可以查詢到各個(gè)教室的信息?？荚囆畔⒉樵儠?huì)顯示考試的科目、地點(diǎn)和時(shí)間，也同樣能夠搜索查詢。

這里的list數(shù)組我們也同樣可以保存到云數(shù)據(jù)庫(kù)中，通過調(diào)用云數(shù)據(jù)庫(kù)的list數(shù)組來(lái)獲取我們的數(shù)據(jù)，從而在表格中所顯示出來(lái)。

2.3 GPA計(jì)算器

在GPA計(jì)算器這一模塊中，我們?cè)O(shè)計(jì)了一個(gè)計(jì)算功能。用戶可以用此模塊來(lái)計(jì)算出GPA績(jī)點(diǎn)。只要輸入成績(jī)和學(xué)分，就能夠一鍵算出績(jī)點(diǎn)結(jié)果，十分方便。

我們先在上方弄了一個(gè)文字提示，給用戶介紹了此模塊的功能和用法。整個(gè)界面中間設(shè)置了兩個(gè)輸入框，分別能夠獲取用戶所輸入的成績(jī)和學(xué)分。因?yàn)橛?jì)算GPA績(jī)點(diǎn)需要多個(gè)成績(jī)和學(xué)分信息，所以我們可以讓用戶輸入多個(gè)成績(jī)和學(xué)分，并且設(shè)置了一個(gè)特殊符號(hào)，通過這個(gè)特殊符號(hào)使得輸入進(jìn)來(lái)的成績(jī)以及學(xué)分相互分開，這樣就能一次性獲取全部數(shù)據(jù)。

在我們獲取到成績(jī)和學(xué)分的兩組數(shù)組n和g后，可以設(shè)一個(gè)程序來(lái)計(jì)算GPA績(jī)點(diǎn)。首先我們要知道GPA績(jī)點(diǎn)的算法是什么樣的。GPA的計(jì)算方法為成績(jī)減去50后除以10乘以該課程的學(xué)分的總和并除以學(xué)分的總和。也就是

我們把剛才設(shè)置好的計(jì)算函數(shù)設(shè)為add，在頁(yè)面中設(shè)置一個(gè)按鈕，并且把剛才設(shè)置的函數(shù)add綁定到這個(gè)按鈕。我們?cè)谳斎肟蜉斎胪陻?shù)組后，按下綁定了add函數(shù)的按鈕就能夠計(jì)算出結(jié)果，并且刷新了頁(yè)面，將獲取到的計(jì)算結(jié)果再顯示到我們頁(yè)面中結(jié)果的顯示框。我們就完成了整個(gè)GPA績(jī)點(diǎn)計(jì)算器模塊的設(shè)計(jì)。

2.4 圖書館

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

2.5 視頻資源

視頻資源這一模塊可以把保存在云開發(fā)中云存儲(chǔ)里的視頻文件在小程序中顯示，并且在視頻下面顯示視頻相關(guān)的簡(jiǎn)介。運(yùn)用video標(biāo)簽來(lái)顯示視頻的鏈接，用text標(biāo)簽來(lái)顯示從云數(shù)據(jù)庫(kù)獲取的視頻簡(jiǎn)介。

2.6 主頁(yè)

在設(shè)計(jì)好各個(gè)模塊的功能后，我們把模塊的入口排列到主頁(yè)上，運(yùn)用彈性盒子布局，將入口分為三行，并且給每個(gè)入口設(shè)計(jì)一個(gè)圖標(biāo)，所有圖標(biāo)的風(fēng)格要一致，在圖標(biāo)下面顯示第個(gè)入口的標(biāo)題。

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

3 小結(jié)

本次所設(shè)計(jì)的學(xué)生管理系統(tǒng)是一款基于微信小程序所制作的一款應(yīng)用程序。本應(yīng)用程序?qū)W(xué)生在日常校園生活中最常用的幾個(gè)功能做了整合，用微信小程序的方式來(lái)制作完成整個(gè)系統(tǒng)。學(xué)生能夠十分方便的使用這個(gè)應(yīng)用，無(wú)須下載，上手簡(jiǎn)單，使用不復(fù)雜。

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

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