00:01
好来我们继续啊,那上一节课呢,我们已经把这个底部导航实现了啊,那这节课呢,我们来实现这个功能啊,大家看着我们从每日推荐页面,就是歌曲列表的页面,我们可以点击跳转至我们的音乐详情界面,并且呢,在我们音乐详情界面呢,我们是会动态的显示当前。点击跳转的这一首歌曲里边的详细内容包括啊,你比如说歌手的名称,当前歌曲的名称,以及当前歌曲的一个分辨图片。那么我这儿啊,显示的内容其实就是大家外部看到这儿的内容。哎,那首先我们要实现这个点击跳转对吧,在哪点呢,在我们每日推荐的,哎,这个歌曲列表页,所以呢,我们需要呢,来到我们每日推荐的页面啊,就是recommend,找到它的结构。
01:00
那么对应的歌曲列表页呢,那在这这是我们的歌曲列表,而这里面呢,每一个个体呢,就是那个一首歌的信息。对吧,里面呢,有这个分面图。呃,有音乐的名称,有歌手的名称,那那所以呢,我们需要啊,我先把这个GS也打开。啊,我们需要呢,首先在这个个体这呢,去绑定一个点击世界BY,那对应的啊,这个世界的回调呢,我就叫他to啊,Song detail呗。OK,那么对应的GS呢?啊,我们去定义一下啊来。把onload收起来啊,把这个方法呢也收起来,我们继续往下写,那现在呢,我们要去干嘛呀?哎,跳转至我们的呃,Song detail页面,嗯,对应的回调我们放在这里。好的,那在这啊,我们点击跳转呢,首先我们要用到一个方法呢,叫navy get to,那是这个方法。
02:05
那么对应的URL啊,那就是pages下边啊,Song detail下边的啊,Detail。好,是他。那这样的话,我们要看到这个跳转效果的话,你要注意。我们首先呢,需要先加载的是三啊,就是这个推荐页面,也就common的页面对吧,所以啊,我们需要先呃将这个song啊,这个页面的路径提到上面去。对提到上面去,只有这样呢,是不是才能先看到是它的页面呀。好,那这样的话啊,来来到我们的项目,大家看最先看到是这个页面没有问题。然后我们点击跳转一下,看一下能不能跳转。哎,也没有问题对吧,那么接下来呢,我们要考虑我在点击跳转的过程中,你比如说我点的是这个啊,张学友的情书。
03:06
那我如何在当前这个详情页去写示情书相关的这个歌曲内容?这是关键,那么我们在外边这如何去显示的这些数据呢?对吧,啊,那这个时候呢,你要注意啊,我们在外边这显示的数据是不是来源于这个推荐歌曲的列表数组呀,然后我们循环遍历,拿到里面的每一项。那么对应的啊,接口呢,我们也测过,就这个呗。啊,我们之前呢,是用这个song去测的这个推荐列表的这个接口拿到的数据,我们在这儿呢,去给它格式化的。里面的每一个对象,就是一首歌的这个信息呗。而这里面呢,是不是包含了歌曲的名称呀,对吧,歌手的名称呀,包括什么,包括这个封面图。
04:02
那那我就在想,那如果说我们在跳转的同时能够把这个数据。带过去。什么最好带什么数据呢?那我们干脆直接把这个。对象也是当前歌曲的对象,给他带过去是不是最好?对吧。哎,那这个时候呢,哎,我们又得想到啊,我们是不是可以利用首先啊,我在这绑定事件的时候。我们能不能把当前的给他进去?对吧?啊,那这个时候呢,我们想到我们之前说过如何向事件对象的event对象呢传插呢,我们可以通过这个ID或者data杠的形式,对不对,那这个时候呢,啊,我通过这个data杠,我起一个so。而我们最终要传的,其实就是这个HM对象,也说歌曲对象呗。那写完这呢,我们来到对应的GS啊,我们可以从这个event对象中去获取一下,这个so等于event.current target点哎,Data set点别忘了啊,还有一层叫data set。
05:11
啊,忘了的小伙伴可以看看咱们之前的视频,里面有。啊,Data杠的形式呢,需要多接一层data set,如果是ID的形式呢,那这是不是直接点ID就可以了,就不需要写这两个了。好的,那现在的歌曲对象有了,那那么我们接下来要考虑如何去在路由跳转的时候传参。啊,那这个时候我说一下啊,这里呢路由。跳转传态呢,它支持的是。Query参数。那么宽瑞参数的话呢,其实就是在我们的URL地址里面,直接以问号的形式,你比如说A等于一啊,或者多个参数呢,与上B等于二这样去传呀。好的,那也就是说我们现在呢,可以利用这个去传啊,那这个时候呢,我K呢,就叫so对应的value呢,我就传这个so最下面。
06:06
那把歌曲对象呢,现在我直接传过去。好的,那现在呢,我们这该传的参数传了啊,那也就是说这一次的路由跳转,我会携带一个歌曲对象过去到详情页。关键是在详情页我们如何去接收,那现在呢,我们来到详情页的JS里面。这个时候啊,大家可以看一下我们和页面啊,加载有关的这个生命周期函数呢,有这三个。啊和页面从加载到显示出来有这三个对吧,那这三个里面唯一一点不一样的就是on no,这呢,它默认的给到我们一个行参。那说明呢,它会注入一个实参,这个时候啊,如果说我们不知道的话呢,我们可以将这个options参数给它打印一下,我们来看一眼。
07:00
嗯,过来。好的,那现在呢,我们点击跳转啊,我们看一眼,哎,这个时候大家看啊,打印出来的这个options呢,长这样,它呢是一个对象。对象里面。有一个介指,对king呢,叫value,长这个样。那这到底是什么呢?啊,那这个时候跟大家说一下啊。来,现在来到我们推荐歌曲的页面啊,假如说我不传参,我们看一下options长什么样,嗯,先来看一下。来这个时候啊,我们点击跳转好。大家看啊,如果说你路由跳转的时候没有传三默认是一个空对象。啊,如果路由传参啊,那么这个options呢,就是专门用来去接收。我们路由跳转的query参数,哎,接收我们啊路由跳转的这个query参数。
08:04
这是他扮演的角色,而你路由传三的这个K相当于是我对象里面的K,那么这个呢,就是对应的value值。嗯,对的value值,那我们再看一遍,现在啊,我去再点击一次。嗯,稍等啊,等他加载出来,来,我们看一眼走。这个时候大家看啊,这个K没有问题,是so,哎,后边这呢,为什么是这个object是个字符串。啊,那说明啥?注意啊,在我们的URL地址里面是不能有GS的对象或者数组的,如果有,那么它会自动的帮你去调用什么,调用to string方法去转换成什么呀,转换成字符串。啊,这里呢,一定要注意啊啊。而它调用的toth string呢,肯定是谁啊,是object原型上的toth string,只有这个object原型上的这个protope上的to string呢,才会转换成这种中括号里边呢,用来标识啊,我们数据类型的。
09:14
这种方式。那为了避免出现这种方式啊,因为现在这样呢,我们根本用不了,那怎么办呢?我们在路由传参的时候呢,我们应该提前将我们的GS对象呢,先给人家转换成什么呀,转换成这个。接着的对象,那这样的话,这是不是就有一个字符串了。如果你传的是个字符串,那么他就不会帮你转了。那就不会帮你转了。好了,那现在我们再来看一遍啊。来,走。OK,那这个时候大家看哎我的song对应的K是不是这哥们什么练习等等,而刚才我是不是点击的就是哎这个练习这首歌。没有问题,那拿过来的是一个接生的对象。
10:04
对吧,Options里面的上是个阶层对象,可是啊,这个阶层对象呢,我们用不上,我们最终要去里面值的话,那一定是不是得将它再转换成。我们原生GS对象。对吧,那这个时候大家看着啊,我呢给你打印一下这个数据类型应该是个string,同时我再做一件事情。我呢调用一下这个pass啊,去给大家把这个options点算反编译成我们原生啊,这个原生GS的对象,来我们看一眼。过来。比如说我再点击一下练习好。哎,这个时候大家先看啊,上边这我已经给打印出来了,我们传过来的,So是一个字符串,可是下边这呢报错了。啊,报了个什么错呢?注意啊,当你们看到这个错误啊,Accepted end of input。
11:01
当看到这个错误,意味着我们用接点。Pass或者这个对象。啊,用这个方法。去转这个阶层对象或者原生GS对象的时候,你给人家传参传错了。比如说啊,我这儿本来要求你放的是什么,必须是个阶层的对象,你放的不是。那我就报错。啊,那有的同学就说了啊,那我刚刚传过来的,明明就是一个阶层的对象呀。那为什么你这还报错了?为什么你这还报错呢?哎,你要注意啊,那这个类型打印出来以后呢,我给大家把它的本身啊,这个so打印出来,我们看一下它长什么样啊过来。来,我们点击一下练习走。注意看啊,这是那个传过来的内容。这是传过来内容,传过来内容其实就这么点,他到哪到这个picture URL。
12:03
啊,注意啊,在这个artist,也就是说在那个。我们数据里面的artists到这里面的picture URL就没有了,后边的数据被截掉了,你看后面还有多少数据呢?对吧,那在这儿呢,都没有。对。被截掉了,所以啊,你传过来的并不是一个完整的阶层对象,那么我再转的话,肯定转不成GS对象了,因为你这呢少东西,那这是为什么呢?大家要注意。哎,我们原生啊小程序中这个路由传参对吧,它呢,对这个啊参数的长度有限制啊,如果我们参数长度过长会干嘛啊,如果参数长度过长呢,会自动截取掉。会自动截取掉,所以啊,我们刚才想到直接传一个对象过来,省事,还不靠谱,你传来的数据太长,人家这帮你截掉了,所以后面你根本用不了,都会报错。
13:12
哎,都会报错。好,那知道了这个问题我们再说。那既然对象不能传了,那可咋办呀?那我们还得传一个标识,告诉里边的页面是吧,我点的是哪个页面呀?那这个时候啊,我们来到我们的接口文档里面,大家看一下这个3.9的接口,哎,网易云音乐呢,提供了这样一个接口啊,就是说我们可以发一个请求,去请求我们音乐的详情。那这个时候呢,那如何拿音乐的详情呢,我们可以通过这个ID参数后边呢,你可以跟音乐的ID。就可以去拿对应的参数,那这个时候呢,我们可以去测一下这个地址来过来。Local host的3000下边啊,这个音乐的ID呢,我去找一首啊,我们找一首什么呀。
14:04
来来到我前面这个啊啊,现在这稍微有点卡,我点过来。这这有点卡这样呢,不能完全显示出来了,已经来,那这样啊,我这个接口地址呢,我把这些关掉它。那这两个关掉。关掉了以后呢,我们重开一个也是。过来。嗯,我们在这儿去访问一下这个数据,然后啊,呃,把这个数据拿过来,我们重新在这里呢,去让它格式化一下。好的,那这个呢,还是刚才推荐歌曲的数据啊,刚才那个页面呢啊。卡掉了。嗯,不能正常显示了啊,那现在呢,你看啊,那这样的话呢,我这两个都显示是这个界面了,那我们就在这看吧。嗯,在这个看啊,在这个看来在这里啊。
15:01
每一个歌曲对象里面是不是有他的ID?那我们能不能在点击的时候把ID传过去,传过去ID以后在详情页我们拿着ID。在干嘛呀?再去拿音乐的详情不就行了吗?那么这对应的接口我们放到这里啊,也去测一把。过来local host的3000把这个拿过来,找一个音乐的ID啊,找一个音乐ID,我们看一下它这个练习是第几首歌呀,123第四首是吧,我们就找他呗,这首歌大家应该都熟。来,那也就是说在这里呢,我要拿到第四个对象里面的ID。第一个收起来啊,第二个呢也收起来,第三个收起来。好的,我们要找的是这个啊,那这是它的应用ID,来我们拿这个接口呢,看一下能不能拿到对应的数据走。哎,这个时候大家看啊,我们拿到了当前歌曲的详情出具啊,它在哪儿了,在这个S里面。
16:08
在这里面呢,是个数组啊,数组里面其实只有一个对象,就是当前练习这首歌曲的。的详情对象你们看也有什么内蒙对吧,歌手的名称,包括封面图片的名称都有。啊,那这样的话呢,我们就有思路了。现在啊,我们回头再改一下,在这里我们不能。干嘛呀,直接传这个。啊,不能直接将这个放对象对吧?啊作为参数。传递哎会被因为什么长度过长干嘛呀,哎会被自动截取掉。嗯,所以啊,这儿呢,我们复制一份,那这个呢就没啥用了。给大家注掉,那么接下来呢,我们不能传so呢,我们是不是可以找到so里边的什么呀?
17:03
ID给他传过去啊,这个呢,其实就是一个一个的放对象嘛,哎,那这个时候呢,我们可以这样去写啊,这样我改改,哎,这个呢,我们叫他一个什么呀,Music ID吧,音乐的ID。而我们最终要传的呢,就是这个放ID,放点ID呗。嗯,没问题,然后来到详情页啊,那之前给大家测的这些呢,嗯,我们就不要了,那这呢会报错啊,我给你留着。对吧,那么接下来呢,我们要拿这个music ID。等于什么options.music。I。嗯,我们看一眼啊,同时我们将这个options输出一下,我们看一眼。然后啊,我再给大家把这个music ID也输出一下。看看拿的对不对。好,那这个时候来过来。嗯,练习走。
18:00
好的啊,传递没有问题,获取没有问题啊,说明我们做的都OK。OK,那这节课呢,啊,费了这么大的劲呢,我们是通过这个路由跳转传参,是不是携带了一个音乐的ID给到我们的详情页呀。啊,那么之后呢,我们就可以通过这个呢,获取我们对应的数据,并且展示出来,那么这节课呢,我们先讲到这里。
我来说两句