1.前几天，教育部公布了《全国第四轮学科评估结果》，在手机上看起来不太方便，就“撸起袖子加油干”，写了一套脚本把数据收集了一下，做成了微信小程序，叫「学科排名」。

界面

2.界面长这样：

3.界面参考了一些优秀设计元素，尽量简洁、易用。

数据库

4.学科评估的结果，说白了就是某个高校的某个学科怎么样。数据库设计如下：

CREATETABLE`subject_ranking`(`id`smallint(4)UNSIGNEDNOTNULLAUTO_INCREMENTCOMMENT'自增ID',`universityNum`mediumint(5)UNSIGNEDNOTNULLCOMMENT'高校代码',`university`varchar(10)NOTNULLCOMMENT'高校名称',`universityLogo`varchar(31)NOTNULLCOMMENT'高校校徽',`klassCode`char(2)NOTNULLCOMMENT'学科门类代码',`klass`varchar(5)NOTNULLCOMMENT'学科门类名称',`subjectCode`char(4)NOTNULLCOMMENT'学科代码',`subject`varchar(10)NOTNULLCOMMENT'学科名称',`resultNum`tinyint(1)UNSIGNEDNOTNULLCOMMENT'学科评估结果',PRIMARYKEY(`id`)USINGBTREE);复制代码

5.高校代码有5位，如北京大学的是10001，其他大学的都比这个数大，所以就用了整型。

6.学科评估结果用数字1-9来表示，其具体含义和对应关系如下表：

数字123456789结果A+AA-B+BB-C+CC-含义前2%或前2名2%～5%5%～10%10%～20%20%～30%30%～40%40%～50%50%～60%60%～70%

7.具体数据是通过爬虫脚本从官网获取的，有5000+条数据。

8.考虑到后端用到了两个SELECT语句，一个是按学科代码，一个是按高校代码，建立两个单列索引：

ALTERTABLE`subject_ranking`ADDINDEX`idx_subjectCode`(`subjectCode`)USINGBTREE;ALTERTABLE`subject_ranking`ADDINDEX`idx_universityNum`(`universityNum`)USINGBTREE;复制代码校徽

9.为了让高校排名页面视觉上更简洁大方，加上校徽元素是个不错的选择。

imageclass="university-logo"src="{{item.universityLogo}}"mode="aspectFit"/image复制代码

10.由于校徽是图片形式，加载需要一定的时间。为了更好的体验，有必要上CDN，即内容分发网络。这里采用的是七牛云的对象存储。

11.数据库中不同高校有近500所，校徽字段universityLogo只需存储文件名称，待响应请求的时候补全外链即可。

学科选择器

12.高校排名页面有个二级联动学科选择器，先选学科门类，再选当前门类下的学科。考虑到学科数据不多，也不会变更，所以将这部分数据放在本地了。

13.其数据结构如下：

[{"klassCode":"06","klass":"人文社科类","children":[{"subjectCode":"0101","subject":"哲学"},{"subjectCode":"0201","subject":"理论经济学"},...]},{"klassCode":"07","klass":"理学","children":[{"subjectCode":"0701","subject":"数学"},{"subjectCode":"0702","subject":"物理学"},...]},...]复制代码

14.使用两个普通选择器组件就可以方便地实现二级联动。

viewclass="selector"pickerclass="picker"bindchange="bindKlassPickerChange"value="{{klassIdx}}"range="{{klasses}}"range-key="klass"viewclass="picker-wrapper"{{klasses[klassIdx].klass}}/view/pickerpickerclass="picker"bindchange="bindSubjectPickerChange"value="{{subjectIdx}}"range="{{subjects}}"range-key="subject"viewclass="picker-wrapper"{{util.getSubject4Short(subjects[subjectIdx].subject,8)}}/view/picker/view复制代码高校列表

15.高校排名页面每次加载时，按选定学科去请求高校排名数据。不少学科对应的高校数据量很大，而我们首先看到的只是前几个，可以对高校列表进行分页。

16.结合实际情况，只分两步走——首先请求前10条高校记录，然后请求剩下的部分。当然，如果第一次请求获得的高校记录少于10条，也就没必要再次请求了。

17.分步请求的逻辑如下：

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)});}});}}});}复制代码

18.采用分步加载后，首页加载速度提升明显，加上校徽给力的CDN，次次秒开不是梦。

rpx在Plus机型的一处Bug

19.先看现象：

20.就是中间的那条白线——它并不是设计元素！

21.对应的CSS代码如下：

.background{position:relative;height:375rpx;background-color:#4facf7;}.background::after{position:absolute;bottom:-150rpx;left:0;border-top:150rpxsolid#4facf7;border-right:375rpxsolidtransparent;border-left:375rpxsolidtransparent;width:0;height:0;content:"";}复制代码

22.经过测试，发现当屏幕宽度大于375px时，会出现这个Bug。显然，这个问题是由于rpx换算px的误差被放大导致的。

23.解决的思路也简单——当屏幕宽度大于375px时，往上挪1px就好了。

.background-plus::after{bottom:calc(-150rpx+1px);}复制代码

24.那怎么判断屏幕宽度大于375px？小程序提供了现成的API：

wx.getSystemInfo({success:(res)={if(res.screenWidth375){this.isPlus=true;}}});复制代码小程序码

25.小程序「学科排名」已发布，欢迎体验。

26.个人技术博客biebu.xin，原文链接——微信小程序「学科排名」开发心得