前幾天，教育部公布了《全國(guó)第四輪學(xué)科評(píng)估結(jié)果》，在手機(jī)上看起來(lái)不太方便，就“擼起袖子加油干”，寫(xiě)了一套腳本把數(shù)據(jù)收集了一下，做成了微信小程序，叫「學(xué)科排名」。

界面

界面長(zhǎng)這樣：

 

 

 

 

界面參考了一些優(yōu)秀設(shè)計(jì)元素，盡量簡(jiǎn)潔、易用。

數(shù)據(jù)庫(kù)

學(xué)科評(píng)估的結(jié)果，說(shuō)白了就是某個(gè)高校的某個(gè)學(xué)科怎么樣。數(shù)據(jù)庫(kù)設(shè)計(jì)如下：

CREATE TABLE `ranking` (
    `universityNum`	INTEGER NOT NULL, -- 高校代碼
    `university`	TEXT NOT NULL, -- 高校名稱(chēng)
    `universityLogo`	TEXT NOT NULL, -- 高校?；?/span>
    `klassCode`	TEXT NOT NULL, -- 學(xué)科門(mén)類(lèi)代碼
    `klass`	TEXT NOT NULL, -- 學(xué)科門(mén)類(lèi)名稱(chēng)
    `subjectCode`	TEXT NOT NULL, -- 學(xué)科代碼
    `subject`	TEXT NOT NULL, -- 學(xué)科名稱(chēng)
    `resultNum`	INTEGER NOT NULL -- 學(xué)科評(píng)估結(jié)果
)

高校代碼有5位，如北京大學(xué)的是10001，其他大學(xué)的都比這個(gè)數(shù)大，所以就用INTEGER類(lèi)型了。

學(xué)科評(píng)估結(jié)果用數(shù)字1-9來(lái)表示，其具體含義和對(duì)應(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ù)是通過(guò)爬蟲(chóng)腳本從官網(wǎng)獲取的，有5000+條數(shù)據(jù)。

考慮到后端用到了兩個(gè)SELECT語(yǔ)句，一個(gè)是按學(xué)科代碼，一個(gè)是按高校代碼，建立兩個(gè)單列索引：

CREATE INDEX idx_subjectCode ON ranking (subjectCode)

CREATE INDEX idx_universityNum ON ranking (universityNum)

?；?/h2>

為了讓高校排名頁(yè)面視覺(jué)上更簡(jiǎn)潔大方，加上?；赵厥莻€(gè)不錯(cuò)的選擇。

<image class="university-logo" src="{{item.universityLogo}}" mode="aspectFit">image>

由于?；帐菆D片形式，加載需要一定的時(shí)間。為了更好的體驗(yàn)，有必要上CDN，即內(nèi)容分發(fā)網(wǎng)絡(luò)。這里采用的是七牛云的對(duì)象存儲(chǔ)。

數(shù)據(jù)庫(kù)中不同高校有近500所，?；兆侄蝩niversityLogo只需存儲(chǔ)文件名稱(chēng)，待響應(yīng)請(qǐng)求的時(shí)候補(bǔ)全外鏈即可。

學(xué)科選擇器

高校排名頁(yè)面有個(gè)二級(jí)聯(lián)動(dòng)學(xué)科選擇器，先選學(xué)科門(mén)類(lèi)，再選當(dāng)前門(mén)類(lèi)下的學(xué)科?？紤]到學(xué)科數(shù)據(jù)不多，也不會(huì)變更，所以將這部分?jǐn)?shù)據(jù)放在本地了。

其數(shù)據(jù)結(jié)構(gòu)如下：

[
    {
        "klassCode": "06",
        "klass": "人文社科類(lèi)",
        "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é)"
            },
            ...
        ]
    },
    ...
]

使用兩個(gè)普通選擇器組件就可以方便地實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)。

<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>

高校列表

高校排名頁(yè)面每次加載時(shí)，按選定學(xué)科去請(qǐng)求高校排名數(shù)據(jù)。不少學(xué)科對(duì)應(yīng)的高校數(shù)據(jù)量很大，而我們首先看到的只是前幾個(gè)，可以對(duì)高校列表進(jìn)行分頁(yè)。

結(jié)合實(shí)際情況，只分兩步走——首先請(qǐng)求前10條高校記錄，然后請(qǐng)求剩下的部分。當(dāng)然，如果第一次請(qǐng)求獲得的高校記錄少于10條，也就沒(méi)必要再次請(qǐng)求了。

分步請(qǐng)求的邏輯如下：

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)
                        });
                    }
                });
            }
        }
    });
}

采用分步加載后，首頁(yè)加載速度提升明顯，加上?；战o力的CDN，次次秒開(kāi)不是夢(mèng)。

rpx在Plus機(jī)型的一處Bug

先看現(xiàn)象：

 

 

就是中間的那條白線(xiàn)——它并不是設(shè)計(jì)元素！

對(duì)應(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)過(guò)測(cè)試，發(fā)現(xiàn)當(dāng)屏幕寬度大于375px時(shí)，會(huì)出現(xiàn)這個(gè)Bug。顯然，這個(gè)問(wèn)題是由于rpx換算px的誤差被放大導(dǎo)致的。

解決的思路也簡(jiǎn)單——當(dāng)屏幕寬度大于375px時(shí)，往上挪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ā)布，歡迎體驗(yàn)。