目录
内容综述
本文将会完成排行榜和个人信息的展示，并对一些毛刺进行处理。
排行榜完成
组件准备
之前的设计里面，在my页面，会有这个按钮：
点击它，可以前往排行榜页面，查看当前的用户积分排行榜。因此，我新设计一个rank页面，用来显示排行榜：
在其中，自然需要通过一个个小组件展示每一项。因此，还需要在Components文件夹下新建一个组件，我称之为RankItem组件：
至此，需要显示的组件已经建立完毕。根据后端同学给出的接口，数据内容如下：
通过接口可以获取到rank数组，其中每一项都是个对象。把对象的数据传给RankItem组件，并在rank页面中引用RankItem组件，即可显示排行榜了。
代码实现
首先来到RankItem里面，在properties中写好需要父组件传入的数据：
其中要着重利用的就是nickname、headimgurl以及score了。图中没有显示的pos，表示排名，可以在遍历rank数组时传入index+1即可。
然后搭建RankItem组件效果：
RankItem组件的封装还是比较容易的，毕竟不涉及函数。然后，在rank页面中引入RankItem组件。在rank.json中配置：
接下来就需要准备发送网络请求获取rank数组的方法了。先在rank.js中准备数据：
然后封装方法：
在onShow中调用：
这样就能在页面显示的时候获取rankList了。然后，在wxml文件中调用RankItem组件：
至此，页面实现完成。
最后，需要在my页面中，点击“查看当前排行”可以进入rank页面。所以，给它添加一个点击事件的回调函数：
函数实现如下：
至此，所有代码均已实现。
实现效果
效果完成。
个人信息展示
既然写好了排行榜，就应该展示用户的个人数据了，包括当前得分、排名、已完成的图片数、未完成的图片数。这部分在my页面中完成。之前为了方便，都是取的静态数据。现在后端同学提供了接口：
可以看到，根据token可以获取到用户的分数、排名、完成的图片、未完成的图片。这就很容易了，在my.js中先准备一个baseInfo对象：
然后封装方法获取它：
在onShow中调用：
至此，代码完成。实现效果如下：
小问题的修改
在实现draw页面的时候，每次页面显示，我都会让它获取一个新的背景图片，即使用户还没有描绘它或描绘了一部分。这造成了不必要的请求，加重了服务器的负担。甚至，在用户只描绘一部分的时候更换背景图，会造成用户体验差劲。因此，我需要在draw.js的onShow中判断，如果是初次显示，即背景图片的地址是默认图片的时候，才自动获取新的背景图。如果已经获取过了，就不需要在显示页面的时候获取了。实现如下：
这样修改之后，调用getBackgroundImgData的场景只有：初次显示和用户完成描绘并上传后。
实现效果：
描绘一部分后切换Tab：
再切换回画板：
没有更换背景图，说明效果完成。
总结
本文实现了排行榜和个人数据的展示，初步实现了小程序的全部基本功能。接下来，将会对小程序的功能进行补充，并准备提交审核上线。