00:00
好的,我们继续啊,那上一节课呢,我们已经啊成功的引入了这个pop up了,并且呢啊,我们也分析了啊,我们说这个so detail就是我们在详情页啊点击切割的时候。我们拿到了这个类型,我们不用,我们是不是负责把这个数据呢交给他。所以呢,我们是发不发而。页面相当于是订阅方,就是获取叫接收数据的一方。还有一点大家要注意,那所谓的订阅发布我们知道了,这个时候大家想一下,你们觉得是先订阅还是先发布。看,这就要看你对自定义世界的一个理解啊,注意。啊,不管我们说自定义世界也好,还是说消息订阅发布也好啊,一定是先绑定世界才能触发事件。你想如果说你先触发的话,这个时候都没有时间,那这个时候他是触发不了的。
01:00
啊,要知道啊,一定是先订阅。在发布,所以啊,我们写的规范一点的话呢,我们需要先去干嘛,先去订阅呗,用这个pop up。在哪订阅呢?在里面。而订阅的动作,我们只需要发生一次就好了,相当于监视一样。订阅上来,我们坐等他发布消息,也就是说触发我这个世界就好了。所以呢,对应的这个操作呢,我选择放到load里面啊,在这个里面去做。来在这呢,我们去订阅,订阅什么呢?来自这个so detail。哎,来自我们的so,呃,Detail页面,嗯,发布的消息,好的,那现在呢,我们要用到这个pop up点什么呀?哎,Subscript,它是订阅,那么对应的第一个是消息的名称,就是自定义事件的名称,我们可以呃,自己起一个啊,那现在呢,是切割的类型,对不对?传递的数据我们就叫它Switch type。
02:06
而第二个呢,是我们当前这个自定义世界的一个回调。对吧,那根据刚才啊,我们看github上面他说了这个订阅的时候,你看啊,这有两个参数啊,并且打印了这两个参数啊,如果说我们不知道是啥的情况下呢,答案也可以去做一个打印啊,然后呢,去输出一下。好的,那这个是订阅,那么接下来呢,我们在点击切割的回调中拿到了type呢,我们去做这样一个消息啊,那就是发布消息数据给谁呢?给这个哎,So的页面,推荐歌曲的页面。同样的,还是要用到这个pop up点,哎,Publish去发布消息。所谓的发布消息呢,就是去触发之前自定义的消息,注意啊,这个时候你的消息名称就不能乱写了,必须要保持一致,否则的话。
03:04
它就触发不了,这里呢,我们要提供的数据呢,其实就是这个切割的类型。对了吧,啊,那这样的话呢,来我们来一次两个页面的通信啊,我们看看有没有问题。我们先来到里边这个页面。啊叫详情页,然后我点击切割走。大家看看现在是哪儿打印的呀,是不是comment的页面打印的,是不是外边那个页面呀。打印什么呀,打印了这两个哪打印了呢?哎,第43行我们点击过来看啊,其实就是刚才我们写的这个订阅里边的打印。没有问题,那说明现在两个页面通信成功了,这里呢也有打印了。对吧,那我们看一下打印的内容是什么。这呢比较怪啊,注意在帕萨的世界回向中,第一个参数呢,是你的消息名称本身。第二个参数呢,才是我们要传递的数据,你看啊,我点个上一首下一首,这是我第二个参数呢,才是我们传递的数据啊。
04:06
所以呢,这比较坑的一点是贝塔是我们想要的,那么这里呢,为了大家看的清楚一点呢,我们这儿呢,应该语句化强一点啊,叫切割的类型,我们传递的是不是他。没问题。而且啊,这里你要注意啊,第一个是消息的名称啊,是它,那这个呢,其实不是我们想要的,但是呢,因为它占位了,你第一个行不能省略。所以呢啊,我们必须要声明两个参数啊,只不过我们使用的是第二个。哎,那这样的话呢,在我们的页面呢,就知道了这个要切割了type了,那有了这个呢,我们首先呢,可以去判断一下。判断什么呢?如果说你传给我的type呢,等等于。那说明你是不是让我找上一首的歌曲ID,如果说等等于啊,不等等于,那就next,那就下一首,那这样呢,给大家做一个标识啊,那这样是上一首。
05:05
Else呢,是下一首呗。对吧,哎,知道了这个类型。我们能干嘛呀,我要找上一首还是下一首,那么这个上一首下一首是不是要去这个数组里面去找。所以呢,我们应该是先把之前这个歌曲的列表速度呢给这拎出来啊,从这个race点中。嗯,好的数组有了。我们要从数组中找到某一首歌曲的上一首或者下一首,怎么找?比如说你现在进来的是练习这个页面。那么我点击上一首或者下一首的时候,是不是要找的是练习的上一首下一首?关键是在我当前的推荐页面,我怎么知道我当初点击的是练习这一首歌,这是关键。
06:00
如果我能找到这个标识,我是不是就能找到他的上一首或者下一首呀?嗯。如何在一个数组中快速的找到某一个元素呢?那最快的方式其实是通过它的下标。来,那这个时候过来大家看着啊,在我们的页面,来,我们把这些收起来啊,我们找找到我们的页面。当初,我们在给每一首歌曲个体绑定。点击事件的时候,我们对应的回调是不是叫to some detail?哪去了,这从这是不是跳转到详情页啊。而且呢,我们还传了一个参数,是不是叫so。对吧。我能通过data杠传,那之前我们也讲过啊,通过data杠是否可以传多个参数,比如说我传一个下标进去。对应的下边有吗?有啊,因为现在呢,我们是在负号循环里面。
07:00
对,不默认的个体呢叫HM,而默认的下标呢,什么就叫index呀?对的吧,哎,那这样的话呢,我们是不是可以在recommend GS这把这个。Index也取出来。对,那这样的话,你会发现我从同一个对象取两个属性啊,所以呢,我们可以这样去做so index。然后呢,这呢,我们这个就不要了,那相当于我们用ES6的对象的结构赋值是不是取出来。点击的时候我不光要跳转,跳转之前我是不是还知道我点击这个个体的下标。我为什么要知道这个下面呢?为的是。给切割这用。关键是这很明显又是两个函数呀。所以我们可以干嘛呢,我们当初呢,初始化一个小标。为零,那这个呢,是用来去标识我们,呃,这个啊,点击音乐的下标呗。
08:04
哎,初始化为零,那当我们点击的时候,我们跳转之前呢,我们可以做一件事情,就点set data,我们去把这个下标是不是更新到data中。哎,更新到data中,那当我们收到了来自solid detail页面发布消息的时候,就是要切割的时候,你看啊,我们数组中贝塔中是不是有数组也有,那得塔中现在是不是也有下调?哎,有数组有下标,我是不是就能找到这个下标的上一首和下一首呀。简单吧,如果上一首,那么我们可以去干嘛计算下面这个下标呢?应该是等于什么?我们要找到最新的下标,那应该是。这吧,我直接这样写啊。解,等于一呗。如果是下一首,下标是不是要加等于一,就可以找到它后后一个元素呀。
09:04
那不管说是if还是else,那最后出来的下标是不是就是最新歌曲的下标?有了即将要切换歌曲的下标数组也有,那你说我能不能找到它里面的music ID?那么就等于这个数组对吧?哎,下标,然后呢,我们去找一下里边的什么呀,我们看一下啊,可能有的小伙伴已经忘了,当初我们找一下。嗯,在推荐页面啊,这个啊,当初呢,在这个推荐歌曲的页面里面啊,这儿呢不好看,我们也可以看一下,呃,这样吧。复制一份。在推荐歌曲的页面里面啊,来我们通过这个呢,先格式化一下。过来。每一每一个个体对象里面是不是都有ID啊?那么现在我们通过数组中括号下标是不是能找到某一个对象?那再点ID。
10:02
就当前音乐的ID呗。对吧。嗯,没有问题,当前音乐的ID那肯定是好的,那有了这个音乐ID。那我们可以干嘛呢?我们当前的页面其实要音乐的ID没用,谁要用?真正要用这个ID的是不是详情页,详情页有了ID就可以干嘛呢?啊,我想起来有了ID可以通过ID。获取音乐的详情数据。对吧,通过ID我们可以去干嘛。你想想看。能做很多事情啊,我们还能去获取我们音乐的播放链接。对吧。啊,所以啊,计算出来这个ID没用,他还得将这个音乐ID。啊,回传给谁。
11:01
这呢,是要回传给我们的那个双。低调页面。来底跳页面,嗯。对吧,那这是不是又涉及到两个页面呢,通信了呀,那现在呢,我们的角色啊,互相要转换了,现在我们要提供数据的一方是吧,页面。而要订阅数据的一方的是谁呀?是我们的详情页。好的,那。我们又要考虑一个事情了啊,我们什么时候订阅。对吧,那订阅呢,一定是回传信息之前。什么时候回传呢?那就是当初你先给我发消息的时候。哎,你什么时候给我发消息呢?是点击切割在这一步。对吧。所以啊,我们订阅消息一定是在它之前。
12:01
对的吧。那么我先给大家演示一下,如果说我们就在这个点击切换的回调里面去订阅啊,我们通过这个sub啊script去订阅,那这个消息名称呢,就叫他music ID啊,我们写一个回调。嗯,然后这里面呢,啊,这来个message啊,那第二个呢,就是music ID呗。对吧,那这一步呢,我们是在干嘛,我们是在订阅啊,来自那个。So的页面啊,发布的这个music ID的消息。好的,然后呢,我们里边呢,做一个打印,嗯,Or把这个明凯D输出一下。这边订阅是订阅了啊,那这边我们是不是要发布一下。那这呢就是pop up点哎popb注意啊,消息名称ID对吧,最终我们要发布的数据也是ID。
13:03
没问题,那这样的话啊,过来我们看一眼。来啊,我们先来到这个里面。那现在呢,走打卡音乐ID是不是拿到了没有问题。嗯。对吧,在哪打印的detail。那我们是不是已经在3D po这拿到了你传过的源ID啊?我再给大家梳理一下整体的流程啊。当我们点击切割的时候,我们拿到了这个type,就上一首或者下一首next,我们没用,我们把这个消息发给谁了?从当前的页面我们发给了这个页面。就这个页面。发给他以后。它根据你是上一首还是下一首,然后再结合它里面的数组recommend list。然后呢,通过下标是不是找到某一首音乐的ID。
14:03
回传给你这个页面,而我们当前页面拿到的就是这个ID。对了吧。可是啊,大家看我假如说再点下一首,你会发现这多打印了两次。打印了两次。你看我再点这就三次清掉,我再点就是四次。哎,那这是为什么呢?是因为这。我们把这个订阅消息的动作呢,放到了这个点击切割的回调中。哎,放到点击切割的回调中,那每点击一次,我就会订阅一次,注意啊,你的订阅是会累加的。啊,它的底层是怎么做的呢?啊,其实就是说我们这自己所谓的自定义啊,消息呢,就是会给它底层的pop up对象里面添加一个消息的,呃,添加一个K,这个K呢,就是消息名称。而所谓的回调呢,它是会跟这个K绑定啊,对应的value,这个value里面其实有一个字段是个数组,数组里面用于放置。
15:06
回调。而你订阅一次,它就会放一个回调,订阅一次放一个回调。所以啊,如果你定义多次的话,会导致当前这个消息里边这个对应的世界池。数组有多个回调,而你最终触发这个世界的时候,它会把这个回数组里面的所有回调全部调用。所以啊,我们说这个订阅可以累加。嗯,可以来加,那放到这儿不行。因为它触发多次啊,这不是我们想要的,我们通信一次是不是就可以了。啊,放到这儿其实也能解决啊,那。因为订阅一次,它是不往数组中放一个函数呀,那其实我们这呢,还有一个方法呢,叫取消订阅,嗯,那就pop up身身上呢,有一个方法呢,叫。这个方法是的,反向操作,你呢是往这个呃,消息名的数组中往进放一个回调,而我呢是往出扇一个。
16:11
所以这个时候大家看啊,我们每订阅一次以后呢,拿到音乐的ID,我们该写什么写什么,执行完我们的操作,在最后我们去把这个。对应的回调再给他移除掉就好了,就把这个消息关掉。来,我们看一眼啊。好,我们看一下它会不会执行多次好的走。哎,那我怎么去播放呢,我去切割。走切勾一次对吧,我点击了一次,我再点击一次,走大家看还是一次啊,说白了,现在这儿呢,你每点一下,它只会执行一次。哎,那这样的话就解决这个问题了啊。那刚才我说了,在这里呢。啊,你每点击一次订阅一次啊,可能有的小伙伴说那。
17:01
我能不能不放在这儿,我呢给它放到load中。对,其实能想到这啊,很好很好,那么为什么放到all呢?All是不是只执行一次呀?假如说放到A中,那是不是就不需要这个曲和定律了?来,我们看一眼。来,过来。好了,那现在啊,我们还是来到练习这,随便点一个过来。来,我去切割啊,走。没问题一次我再点走,哎,也是一次啊,哎,看去这个想法是不是挺好的,哎,没问题,那在页面里面我们点肯定没问题了。它只订阅一次,可是啊,大家要注意,当我后退,我再进来。嗯,我再点你会发现就是两次了。然后呢,我后退,我再进来。我在点。你会发现就三次了。那这是为什么呢?我们每次后退再进来当前页面是不是需要重新加载?
18:03
而对应的啊。阿。是不是又会执行一次?的一一执行。这是不是又订阅一次?你别忘了你整个应用即使说。你的页面都销毁了,可是我这个第三方的库一直在你的项目里边呀。所以他的对象一直在你的本地呀。那这样的话呢,放在这儿啊,也是会反复的订阅。嗯,那这个呢,是后退再进来的订阅啊,注意当然了,大家能想到这儿比较好。啊,所以呢,Load里面的代码太多了啊,现在呢,我们就不放在这儿了,放到这儿呢,啊也需要干嘛,也需要去取消订阅。好,那这是这个啊,那接下来呢,我们还是把这个恢复一下啊,我们还是放在这儿就OK。好的,那到现在为止呢,我们已经实现了两个页面的完整通信啊,就是说列表页可以把应用ID已经回传到。
19:11
我们的详情页了。那这节课呢,我们先讲到这儿啊。
我来说两句