00:00
好的,我们继续啊,那上一节课呢,我们做了个人啊,和我们这个登录界面的一个交互。那么这节课呢,大家看一下啊,我们要做一下这个部分啊,就是最近播放的一个列表。那么这个最近播放列表呢,是根据我们用户啊,他最近的一个播放记录去展现他的这个歌曲列表,那首先啊,来到我们的项目里面。那么往下翻,那在下边这个个人中心列表这儿呢,这儿有一个区域叫最近播放记录。那么现在呢?下面是没有任何内容的。啊,没有任何内容的,那这个呢,需要我们去写一下,好,那首先呢,要获取用户的播放记录呢,那我们需要去看一下咱的那个接口文档啊,那现在呢,来到咱的接口文档里面啊,我把这个打开。好,稍等。来,那么在这个里面呢,3.5啊,获取用户的播放记录。呃,对应的接口地址呢,是这个啊,那么必选的一个参数是UUID就是URID的缩写,对应的呢,就是我们用户的ID。
01:06
那这个呢,是根据用户的身份啊,拿他自己的播放记录。那么下面呢,还有一个参数啊,就是type,那么type字段为一的时候呢,只返回是week data。那所谓的week data呢?哎,其实指的就是一周的播放记录,而T为零的时候呢,返回的是all data。奥迪塔呢,指的是所有的。啊播放记录,那这个时候呢,我们先去测一下这个接口啊,来对应的把这个地址呢,我们拿过来。然后啊,我们来到我们的浏览器的,在这里呢,啊,我们去访问一下啊,那这呢还是啊local host3000把这个地址丢过来。对应的这个UID呢,应该是用户的ID啊好,那这个时候呢,我去把我的用户ID啊,把我的ID呢给他丢过来。Urf里面那么第一个呢,就是啊,那这个呢,是我的URIDOK啊,放过来回车。
02:02
好,现在大家看啊,呃,我当前的用户呢,最近一周的播放记录是一个空数组,那么说明最近一周呢,我并没有用网易音乐的这个呃APP啊,去播放过音乐啊,所以呢,这没有数据,那这个时候呢,我可以把这个看呢切换成零走。好的,那现在呢,我们看到的是我所有的播放记录啊,其实也不是所有的,它是截了100条,大家看能看到这儿的Les为100。好的,那因为奥尔贝塔有数据啊,那接下来呢,我们就通过这个TV0呢,去拿下我的播放记录。那这个时候呢,我们来到我们个人中心的JS里面,那那首先呢,要整这个播放记录呢,啊,首先呢,我去给它初始化一个recent,我们来一个play吧,嗯,List啊,默认的是一个空数组啊,那这个呢,是用户的啊播放记录,用户的播放记录,那初始化的数据有了以后呢,接下来我们去拿一下数据。
03:06
那么要拿用户的播放记录,那你是不是需要用户的user ID啊,所以我们获取用户播放记录的动作呢?啊,必须要在这个if条件里边,只有在这个里边呢,我们才能够拿到用户的播放记录。好的,那也就是说接下来我们在这儿去获取用户啊播放记录。嗯,那么对应的要拿用户的播放记录呢,我们也可以再去分装一个方法。呃,为什么呢?呃。因为现在这个功能是比较明确的啊,那我就是要拿用户的播放记录,所以大家看啊,我在这里呢,写一个啊get啊我们的user。嗯,然后呢,哎,我们来一个recent吧,嗯。啊,例子我们写完整一点啊,就是它OK,那么对应的方法有了啊,那这个呢是嗯,获取用户啊播放呃,记录的功能函数。
04:03
好的,那么对应的方法里面呢,我们要去发请求啊,那对应的方法request我们已经有了啊,所以呢,在这我们可以这样去写啊,Let这个play list。嗯。List data吧,等于什么,然后呢,Request,嗯,那对应的地址啊,我们可以拿过来,那是这个。好的,那把这个地址丢过来啊,那么对应的参数有俩来,我们给他写一下是这个,那其中一个呢,是UUID啊嗯。那谁调用我谁呢,应该把你的user ID呢传给我,那我这呢就写个URID,所以那这哥们应该是个动态的参数啊,而后边这个T为零呢,它是一个固定的子弹,我们就写成这个。那因为是个动态呢,我们就给它提成一个形态。那这呢,用了wait了啊,所以呢,我们前面呢,可以用一个嗯,Think。
05:00
那再给大家说一下,我为什么呃把这个分装成一个函数呢?啊,很简单啊,你会发现在这里我们用a think的话,这个a think呢,是不是加到我们分装的功能函数上面了,那这样的话呢,是能避免啊,我们在我们的生命周期函数上使用a think啊。嗯,在他的生命呢,呃,在这个我们实力的生命周期上啊,不要最好不要使用AA,那这样的话呢,啊,容易会导致我们页面的这个加载出问题啊,不管说小程序还是没用啊都是这样的,那在这呢,我们去调用一下这个get UR。啊,List这个方法,然后呢,我们去把我们当前啊,User infer里面的这个user ID字段给它往前一导出就可以了。我们确认一下是这个UID,呃,是小头风命名法,哎,是它没有问题,好的,那么现在啊,这拿到了这个数据,我们要干嘛呀。哎,我们要干嘛,我们是不是得将这个数据更新到贝塔中呀,那这个时候来。
06:03
Z点啊set,嗯,我们要更新的是它,那么目标数据是这个。这个大的贝塔中呢,注意啊,我们要取的是奥德塔对不对。好,那应该点all data塔,但是这个时候啊,大家要注意这个all data里边的数据太多了,我们没有必要呢,呃,在这个列表中呢,去给它展示100条啊,所以啊,在这里呢,我们去给它截取个十来条啊,显示一下,那这儿呢,因为没有什么明确的需求啊,我就给它截十条数据,哎,使用的方法呢是S。还要读please。好的,那么现在截取完了以后呢,再来到我们的个人中心。那这个时候呢,咱们看一下这个数据啊,看一下数据,哎,那这十条没有问题。那数据也有了,那么接下来呢,我们去给它显示出来。来到我们的结构里边啊,在最近播放记录这儿。因为它是一个呃,横向可滚动的区域啊,所以呢啊,毫无疑问我们应该用的是score view啊,并且呢,这里边的。
07:05
嗯,Score X应该为two对吧,那里面的每一项啊,每一项呢,我们就叫它recent item。啊,这里面呢,应该就是一张图片啊,就是歌曲的那个图片诶。那那这呢,Image对应的是一个src,好的,那我们现在呢,要去对这个进行便利啊,那就是微信。嗯,报备那要便利的目标数据是谁呢?啊,就是拿到GS啊是这啊我们拿过来,那么对应的啊,我们还应该整一个微信K对吧,在这里我们找一下啊,有没有什么唯一值。过来。呃,每一首歌曲啊,我们看一眼。打卡,这是一个歌曲对象,那么在这个遍历出来的个体对象中,你会发现它并没有什么唯一值的字段。在这里呢,每一个对象,哎,我把这个也收起来啊,让大家能看得清楚,每一个对象呢,有三个字的,哎,播放的数量,那这个呢是什么,Score就关注的数量啊,So呢,就是歌曲的详情。
08:12
这三个字段啊,没有一个能作为唯一值。那这个时候如果说你后台返给你的数据没有唯一值。那我们这个微信K怎么办呢。对吧,哎,微信K怎么办啊,那这个时候呢,我们假设没有酶值啊,我们可以手动的去给他添加一个离值。那这个时候呢,大家看我怎么写啊,在这里我let这个index等于零,然后我们将当前这个数据呢,给它拎出来啊,在这里呢,我们定一个变量recent啊,Play list,它应该等于这个。嗯,等于它的同时呢,我们对它进行一个加工啊,所以呢,我们要有个map方法啊来item,嗯,数组的map呢,就是对数组进行加工。嗯,那这怎么加工呢?我就可以让这个H,我里边呢给它加一个ID的属性,然后呢,等于index加加就OK了,那加加的目的呢,是为了保证啊,每次循环进来这个index会累加一,那这样的话呢,它就不会重复了。
09:14
那最后啊,大家别忘了,我们需要将这个item呢,给人家返回一下。好的,那么这个变量recent play list就是我们添加了标识的速度,所以呢,我们可以直接在这儿呢更新啊,那这个时候呢,因为它同名啊,所以呢,我们用ES6对象的节减方式,那就直接写一个recent play list就好了。好的,那我们再来看一下啊,过来。啊,我们先来看这个数据。嗯,数据进来了,来看一下里边应该有一个ID,而且呢,ID是累加的没有问题啊,那这样的话呢,我们就可以给这个微信K,这直接放一个ID址。对吧,OK,那这是这一个好,那图片的话呢,我们要取到的呢,是I点,点什么呢?我们来到数据源里面看看,首先呢,我们需要点这个sound对不对,那么在这个sound里面呢,有一个al的字段啊,下面呢,有一个picture URL就是我们要的图片。
10:17
好的,那这个时候啊,我们在这呢,来一个saw al.picture URL来我们看一眼。嗯,这个时候大家看啊,数据有了。那么数据有了以后呢,我们写一下钥匙。我们看一下里边的每一项图片呢,它的宽高是100乘以100,那其实就200乘以200宽,对不对?好,那这个时候呢,我们来呃,首先呢,要给外边那个。整一个呗,Recent class的类,嗯,Recent scar里边的每一项啊,有class啦,那这样的话呢,来在personal这儿呢,我们往下边写写,那这儿呢,是这个最近啊播放记录的样式。
11:03
OK啊,是他。呃,首先呢。他要横向布局,那这个呢,我们是不是应该displayx一下。这边呢,Display flex以后呢?哎,我们立马能想到,我们还是应该把这个enable flex给人家加上了。OK,那这是第一步,那紧接着啊,呃,它下边。有一个叫item对吧,我们直接去设一下它的图片的宽高为200RPX,高的话呢也是200,然后呢,再来个border videos,我们来十个像素的圆角。哎,那这样的话呢,我们看一下效果。OK,那大家看啊,过来了没有问题,那么现在你呃,每一个是不是挨得太近了,那这样的话呢,我们可以让这个个体跟个体之间呢,有一点外边距啊,所以呢,我们来一个market right为20个像素的右外边距,整体的我们往右啊去给他推一下。好的,那这个时候呢,我们再来看。好了,那么这好了以后呢,大家要注意看啊,下边是不是又有一个很长的滚动条啊。
12:04
啊,又有个很长的滚动条,那这个原因呢,其实啊,我们之前说过,那么这个坑呢,是谁的坑呢,是这个。格尔本身的坑,虽然说你横向布局了它,但是啊,它计算高度的时候,是不是还是以你原来纵向的高度计算的。那这个时候我们需要给这个scar呢,设置一个固定的高度,那其实呢,跟子元素的一样就OK 200RPX好的,那我们再看一下啊,诶,那这个时候大家看就好了。那。呃,那这节课呢,我们主要是去获取了一下这个最近播放记录的列表,并且呢,给它展示出来啊,在这里啊。啊,没有什么新的知识点,所以呢,需要大家啊快速的把这个跟进一下,好的,那我们这节课呢,先讲到这里。
我来说两句