前幾天,教育部公布了《全國第四輪學(xué)科評估結(jié)果》,在手機(jī)上看起來不太方便,就“擼起袖子加油干”,寫了一套腳本把數(shù)據(jù)收集了一下,做成了微信小程序,叫「學(xué)科排名」。 界面 界面長這樣: 界面參考了一些優(yōu)秀設(shè) ...
前幾天,教育部公布了《全國第四輪學(xué)科評估結(jié)果》,在手機(jī)上看起來不太方便,就“擼起袖子加油干”,寫了一套腳本把數(shù)據(jù)收集了一下,做成了微信小程序,叫「學(xué)科排名」。
界面長這樣:
界面參考了一些優(yōu)秀設(shè)計元素,盡量簡潔、易用。
學(xué)科評估的結(jié)果,說白了就是某個高校的某個學(xué)科怎么樣。數(shù)據(jù)庫設(shè)計如下:
CREATE TABLE `ranking` (
`universityNum` INTEGER NOT NULL, -- 高校代碼
`university` TEXT NOT NULL, -- 高校名稱
`universityLogo` TEXT NOT NULL, -- 高校?;?/span>
`klassCode` TEXT NOT NULL, -- 學(xué)科門類代碼
`klass` TEXT NOT NULL, -- 學(xué)科門類名稱
`subjectCode` TEXT NOT NULL, -- 學(xué)科代碼
`subject` TEXT NOT NULL, -- 學(xué)科名稱
`resultNum` INTEGER NOT NULL -- 學(xué)科評估結(jié)果
)
高校代碼有5位,如北京大學(xué)的是10001,其他大學(xué)的都比這個數(shù)大,所以就用INTEGER類型了。
學(xué)科評估結(jié)果用數(shù)字1-9來表示,其具體含義和對應(yīng)關(guān)系如下表:
數(shù)字 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
---|---|---|---|---|---|---|---|---|---|
結(jié)果 | A+ | A | A- | B+ | B | B- | C+ | C | C- |
含義 | 前2%或前2名 | 2%~5% | 5%~10% | 10%~20% | 20%~30% | 30%~40% | 40%~50% | 50%~60% | 60%~70% |
具體數(shù)據(jù)是通過爬蟲腳本從官網(wǎng)獲取的,有5000+條數(shù)據(jù)。
考慮到后端用到了兩個SELECT語句,一個是按學(xué)科代碼,一個是按高校代碼,建立兩個單列索引:
CREATE INDEX idx_subjectCode ON ranking (subjectCode)
CREATE INDEX idx_universityNum ON ranking (universityNum)
為了讓高校排名頁面視覺上更簡潔大方,加上校徽元素是個不錯的選擇。
<image class="university-logo" src="{{item.universityLogo}}" mode="aspectFit">image>
由于校徽是圖片形式,加載需要一定的時間。為了更好的體驗,有必要上CDN,即內(nèi)容分發(fā)網(wǎng)絡(luò)。這里采用的是七牛云的對象存儲。
數(shù)據(jù)庫中不同高校有近500所,校徽字段universityLogo只需存儲文件名稱,待響應(yīng)請求的時候補全外鏈即可。
高校排名頁面有個二級聯(lián)動學(xué)科選擇器,先選學(xué)科門類,再選當(dāng)前門類下的學(xué)科。考慮到學(xué)科數(shù)據(jù)不多,也不會變更,所以將這部分?jǐn)?shù)據(jù)放在本地了。
其數(shù)據(jù)結(jié)構(gòu)如下:
[
{
"klassCode": "06",
"klass": "人文社科類",
"children": [
{
"subjectCode": "0101",
"subject": "哲學(xué)"
},
{
"subjectCode": "0201",
"subject": "理論經(jīng)濟(jì)學(xué)"
},
...
]
},
{
"klassCode": "07",
"klass": "理學(xué)",
"children": [
{
"subjectCode": "0701",
"subject": "數(shù)學(xué)"
},
{
"subjectCode": "0702",
"subject": "物理學(xué)"
},
...
]
},
...
]
使用兩個普通選擇器組件就可以方便地實現(xiàn)二級聯(lián)動。
<view class="selector">
<picker class="picker" bindchange="bindKlassPickerChange" value="{{klassIdx}}" range="{{klasses}}" range-key="klass">
<view class="picker-wrapper">{{klasses[klassIdx].klass}}view>
picker>
<picker class="picker" bindchange="bindSubjectPickerChange" value="{{subjectIdx}}" range="{{subjects}}" range-key="subject">
<view class="picker-wrapper">{{util.getSubject4Short(subjects[subjectIdx].subject, 8)}}view>
picker>
view>
高校排名頁面每次加載時,按選定學(xué)科去請求高校排名數(shù)據(jù)。不少學(xué)科對應(yīng)的高校數(shù)據(jù)量很大,而我們首先看到的只是前幾個,可以對高校列表進(jìn)行分頁。
結(jié)合實際情況,只分兩步走——首先請求前10條高校記錄,然后請求剩下的部分。當(dāng)然,如果第一次請求獲得的高校記錄少于10條,也就沒必要再次請求了。
分步請求的邏輯如下:
requestUniversities: function () {
wx.showNavigationBarLoading();
wx.request({
url: config.getUniversityRankingUrl(this.data.subjects[this.data.subjectIdx].subjectCode, 1),
success: (res) => {
wx.hideNavigationBarLoading();
this.setData({
universities: res.data.data
});
if (this.data.universities.length === 10) {
wx.request({
url: config.getUniversityRankingUrl(this.data.subjects[this.data.subjectIdx].subjectCode, 0),
success: (res) => {
this.setData({
universities: this.data.universities.concat(res.data.data)
});
}
});
}
}
});
}
采用分步加載后,首頁加載速度提升明顯,加上?;战o力的CDN,次次秒開不是夢。
先看現(xiàn)象:
就是中間的那條白線——它并不是設(shè)計元素!
對應(yīng)的CSS代碼如下:
.background {
position: relative;
height: 375rpx;
background-color: #4facf7;
}
.background::after {
position: absolute;
bottom: -150rpx;
left: 0;
border-top: 150rpx solid #4facf7;
border-right: 375rpx solid transparent;
border-left: 375rpx solid transparent;
width: 0;
height: 0;
content: "";
}
經(jīng)過測試,發(fā)現(xiàn)當(dāng)屏幕寬度大于375px時,會出現(xiàn)這個Bug。顯然,這個問題是由于rpx換算px的誤差被放大導(dǎo)致的。
解決的思路也簡單——當(dāng)屏幕寬度大于375px時,往上挪1px就好了。
.background-plus::after {
bottom: calc(-150rpx + 1px);
}
那怎么判斷屏幕寬度大于375px?小程序提供了現(xiàn)成的API:
wx.getSystemInfo({
success: (res) => {
if (res.screenWidth > 375) {
this.isPlus = true;
}
}
});
小程序「學(xué)科排名」已發(fā)布,歡迎體驗。
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)