037-直播间模块-礼物动画原创

好了，另外那咱们就接着上面的哈，咱们已经收到这一个礼物了啊，已经发出去了，咱们应该在侧边栏中啊，广而告之啊，所以咱们在有这样一个小的功能模块显示在这个位置上，包括你这个在看直播的时候，别人发了这个礼物啊，你也写的这个send gift中也应该让也应该会在这个位置上显示出来，对吧？因为咱们现在所有的在聊天区中显示的这句话，还有在这个地方显示的，咱们都控制在是我们收到了有人发礼物这个消息，它包括我们自己，所以只要这块没有问题，那别人去发也是没有问题的，对吧？OK，咱们就在这里把这块给它做出来，这块也得单独的去写一个组件，所以我在我的live s这一个live w sm2中，咱们还得去写一个叫做我们的left gift。就是我们的左边的这个显示这个gift的这个区域呗，啊left gift的这个区域，那这个组件的话，咱们也要自己去写的，然后在咱们的components，文件夹下，可能又要新建一个文件夹，叫做left gift，好gift，然后创建完这个文件夹之后，我在这里新建一个组件，咱们在这里叫做left gift，好了，把这个组件创建完，再跟之前一样的，在我们这里面进行一个引入啊，引入我们的这个left gift，咱们在这写好啊left gift，然后里面这块的话，Left gift好复制拿过来运行之后的话呢，我认为啊，咱们这个组件就有了，来点击进来之后的话呢，又又来了，又来了，又来了，又是我们这个问题嘛，我怎么了？对不再重新清一遍，然后再重新编译一遍，在咱们的啊room啊live wxm2中这个life的GI的组件，它应该可以显示出来了，对不对。

在这里显示的啊，那接下来咱们给他做一下这个样式就可以了，那可在这里肯定是相当fix在这个位置上的，所以我在我的left的gift wxm2中吧，然咱们在这设一个view啊，然后view的话咱们给它设置一个class class的话呢，是咱们的gift container啊，Gift的container标识啊，这是我的这个容器，让咱们再给它加上这个样式摆来，我就在这让他直接啊fix在这个物理上咱们可以给它设置啊，我们的position。

设置啊，我们的这个position，然后咱们给它设置一个fix，然后对应的啊，它的life的值的话呢，是我们的10r PX top值，咱们给它设置成距离上面的话，30吧，30这个V，然后宽度的话，咱们给它一个50VWVVW，然后对应的我们这个高度的话，给他一个150RPX，然后咱们在这可以设置一下背景色background color，咱们可以看一下是不是大体就在这个位置上吧，啊咱们让他给它显示出来，大家说好吧，啊，那这样的话呢，我们就可以啊继续的在此基础上的话，往里面放东西，你想将来里面要显示什么东西啊，将来在这个区域内烂在这个区域，那科认为要显示的首先头像是谁，这科这个隐兵这个头像，然后的话呢，然后还有一个字是隐兵啊，然后这个发送的一个礼物，礼物的名字是鲜花，然后这就是鲜花的这一个图片。

片，所以你看一共有四个字啊，首先是我当前用户的这个头像，还有我当前用户的昵称，还有礼物的名字，还有礼物的这个图片头像，对吧，这些信息都得有，所以我们在这一块的话呢，在这个WXML中列外，是不是就知道该怎么去写了呀，我们对应的要放隐秘，但这些信息都得谁传呀，是不是都得我们的副组件给咱们传回来，要不然我我在这儿我能知道吗？是不是得副组件他得给我把这些信息他给我传过来，然后我在这里拿到这些信息的话，我就可以显示做布局了，咱们也没必要说再弄点假数据啊，咱们又不是小孩了，现在把静态最基本的页面给它画出来啊，咱们就拿到数据之后再临时做布局就可以，那这样的话就得想这个主要我先写点东西好不好，这组件只要显示在这里，然后我这个组件它不是一开始就在这的，它一开始没有是你发送完才显示出来的，所以这个组件它也得被控制的动。

态显示和隐藏的对吧，那这样的话我们就得来到我们的副组件，咱们要干这么一件事，传一个属性控制的显示和隐藏，一秒钟之后，它能自己给自己隐藏掉了啊，然后再通过附件把它需要的这四个值啊，什么先这个啊，礼物的名字，礼物的图片，还有我们当前登录用户的昵称，当前登录用户的头像给他发过来，对不啊，所以我们先把这一个过程啊给他实现了，来吧，列位啊在这里啊，咱们来看一下我们的思路呀，就是还是跟之前一样的，在live GS中啊，咱们提前的设置一个状态，这个状态的名字的话呢，叫做live is什么呀，Is left gift show设成放在左边的啊，这一个gift显不显示，末认是false，等什么时候给他。

库呢，是不是收到了消息，在下面这一块点赞下面应该就是收到消息这里客人把这个值设置成message之后啊，合并完了再将这个值给它改成出入。这不就显示出来了吗？对不对，列位，那这样的话，咱们再把这个is left的时再跟之前一样的给它传到咱们的这个组件里面来，另外啊，传过来它是不是接收到这个属性之后啊，它就可以，哎，这个成功了，但是另位可以想一下啊，你说我传过来这个值，我再控制这个，在这个主页里面再接收它，然后再控制自己隐藏显示，那我何苦我故意我直接在这控制不好吗？我直接就在这里控制它w X if一个方法条件判断，如果这个值为真，它就直接的显示出来了，创建应该是创建出来了，如果为假，哎，它就从咱们的页面中消失了，是不是这样的呀，所以我可以在这一保存之后，咱们测一下来，一开始这个就是false，所以压根就不创建。

啊，不创建重新再编一遍这个图片，小心又加载不出来了，点击养组之后呢，一开始是没有的哈，等客人点完这个小按钮之后，诶，它显示出来了，对吧？啊，因为变成处了吗？但什么时候再变成false呢？哎，是不是咱们可以在这个组件里面开始计时呀，等一秒钟之后这样能消失。啊，有人说坑，我可以在哪计时，我可以在我们这个地方计时吗？就是回到我们刚才接收消息这个地方计时，我认为像这个组件自己创建和消失这个事啊，应该是放在它内部去处理的啊，咱们应该接受我们副组件的调度啊，我们在副组件中啊，就是负责给这些孩子安排任务的，孩子的话呢，接收到属性或者被附件的什么if控制啊，所以咱们应该把这些业务逻辑啊，在自己的组件内部啊去做好，所以我认为在这里会比较好一点，咱们在life的give的点GS中，咱们正好来想一想，有一个生命周期叫什么lifetime。

你写出来里面有一个叫做create的方法，也就是说其实每一次创建完之后，这个create的方法不都会执行吗？那就是说在这里咱们就开始计时一秒钟，Set time out，一秒钟结束之后，咱们让他这个变成false，但问题我怎么能让他变成false呢啊，所以这点就有点残忍了，我得通知附件把我自己干掉啊，我自己自己计时一秒钟之后，附件请把我干掉，所以我想说的意思就是说你得trigger啊，也就是在这里想让那个什么hi left gift，哎，调用这个方法隐藏我们这个左边的gift的礼物区啊，所以在这里啊，我们这个组件你想一想，咱们挺会搭配啊，正好这个if是让它创建出来，每意思都是创建出来，那创建出来之后呢，咱们在这里就是，哎，我们可的方法会调用，然后我们在这计时一秒钟之后，一秒钟结束，再吹根疑问，它再触发这一个事件，再让这个方法咱们再给他这个值再给。

它改成force就可以了，所以我在这个身上的话呢，就直接来绑定我们head啊，Gift这一个方法就可以了，我看这个方法名，当时我写的hand left gift，就绑定hand left gift，所以我在这里处理hand，这个hand left gift列外来把这个写在你自己的这个回调函数中live GS中去写，所以你看这个思路是不是就非常清晰的，虽然对于组件的话，不怎么喜欢的人哈，会觉得这绕来绕去的一圈一圈的啊，但是对于咱们组件的设计上来说的话是非常合理的啊，所以我相当于这个值，等我收到礼物这个通知的时候呢，会变成true，然后这个组件会创建出来，等这个组件创建出来之后，这个组件里面会有一个生命周期created，哎，他在这里一秒钟倒计时结束了，会在触发他身上的这个handle到left的gift的这一个回调方法，哎。

触发这个事件，那在我的类务身上的话，不就监听，我监听自己的身上放了一个监听到了之后，就在我自己的这个GS中就触发了，而在这里我就可以非常方便的去访问到这一个is life的gift的show，设置成这一个false就可以了啊，所以自生自灭啊，但是这个自生自灭实际上负点给他弄啊，所以咱们在这里的话呢，啊，挺符合咱们组件的设计逻辑的，好吧，保存之后咱们点击这个杨组来进来之后来看一下是不是客人说的好不好用来点完一个火箭一秒钟消失，你看就这样的，你每次都是新创建，创建完它就会消失，每次都是新创建，创建完呀，它就会消失啊，就这样一个过程啊，所以这一块的话呢，就是符合呀，咱们的一个设计思路了，列外。

OK，好了，那接下来呢，咱们还得呀，继续啊，那么继续再来看一眼，我们下面这里啊，就是我们可以通过我们这个传这个值呀，你就不能用AA显示呀，我们在显示这个名字应该是四个值啊，所以我们应该是在我们的副组件，也是接收到消息的时候，因为就接收到消息的时候，他们拿到太多的有用信息的，接收消息是在这里接收到了科啊，Send gift这一块接收到了，所以我可以在这拿到四个值的消息，这个消息的话分别有什么呀，另外咱们在这提前定义好的几个状态未来。

咱们也可以给它组成一个大的对象，一块给他，对不对啊，咱们在这个地方，咱们设置一个叫做gift item吧，嗯，Gift item一开始的话是个空对象，那咱们在这里把这个空地上给它组装好了，来在收到消息之后，在这里哈，收到消息之后咱们一块来给他组装好了，把这个GI的item咱们开始组装数据，里面需要什么数据，来里面看需要自己的头像数据，这个数据在哪里拿呢？这意思点当前登录的用户吗？点user infer，点哎这个头像信息大家呃想一想是不是在这里面，这没问题吧。我们应该能够在这里面获取到我们的头像，那接下来还有什么信息啊，我们的这个哎，这个头像信息是不是可以在这个data中也有啊，我记得之前是不data.u data点内不都可以吗？所以在这里应该是通过这个什么data点这一块也能获取到，那对应的还有我们的这个人的这个当前这个人的昵称内，可这个信息能拿到对不对啊，我们把这个状态给他设置上去啊，头像信息就是这块收到消息肯定是置到谁啊，哪个用户啊发的，所以这个哪个用户里面会有这个头像信息，还有咱们的内个信息，大家怕啊，或者觉得不信的话，可以打一下试一试啊，那接下来这就是我们的这个什么呀，就是我们gift的这个名字name啊，我们gift的这个名字，咱们这样加个gift吧，Gift这个name。

前面这几个加个什么user user的头像，User的这一个，下面这个就是gift的name，这里的话呢，就应该是咱们在这块解构出来的啊，咱们在这Jason点，我为什么不在前面给它解控一下，然后我们在这里去写的对吧？里面的话应该是有一个点礼物的名字，还有一个是gift他的URL gift的URL应该是咱们的这个点儿UR列位看下这里来，只要我们成功之后，我们会将这个生成处它能显示出来，而且我们把这个give的item这个对象给它set上去，这样的话，我们这个对象发生改变了，我们的视图在更新的时候啊，会把这个属性再次传给孩子，孩子根据这个值就可以显示了啊，所以我们要把这个值的话呢，往我们的孩子组件中啊进行传值啊，所以我用了这一个好不GI的I啊，这几个值应该。

数据取都没有问题啊，咱们来测试一下，来保存之后，我们把这个GI的item以父传子的方式给我们这个左边这个组件给它传过去，GI的好，咱们在这里给他传过去，GI的I传过去，在咱们的life的GI的这个组件中的话呢，咱们首先得接收这个属性，哎呀这两天呀干啥呀，不就天天的来来回回的接收副组件传来的属性的这些方法吗？好了，在这里面的话呢，我们可以WXM2中来，咱们来试一试，那我这边我所需要的东西的话呢，就是我的头像信息的，所以我在这里的话呢，要把这个头像信息，哎，咱们要给他加进去了啊，我们在这一块的话，可以找到我们这个应该布局这块就比较简单，咱们直接写一个最左边，我当时计划的是放我们这个头像，所以我的这个src的话，我就直接直接用这个什么give的点I。

点我们的user这个头像，User头像啊，然后对应的我们的Mo模式，咱们给它改成这个was fix的啊，Class的话，咱们也给它改成一个头像的，一会儿的话咱们好做这个样式的啊，然后这个下面这一块的话呢，是这个谁发送了一个什么样的一个礼物对不对，View这块应该是我们的gift啊，我们gift item，点那个礼物的名字啊，我们对应的什么gift name吧，再想下来就是我们的送出了什么啊，送出了啥呀，送出了这个gift。

诶，不对哈，这块是我们这个发送者的这个名字哈，是我们的user name哈，是我们的user这一个内，然后这块的话是咱们give name送出了什么乘以一啊，这个人他送出了什么什么乘以一，但在这里的话，咱们如果这个礼物区好好去写的话，还可以一下子选多少个礼物，十个20个礼物，这块就是也是动态可以控制的对吧？乘以几啊，所以这个礼物是这个乘以几，咱们写个X吧，X可能会大一点，对不大写的X好，那这样的话呢，大家可以看这个信息对不对哈，GI这块是头像显示在这里，这一块是咱们发送者的这个昵称啊，这一块的话呢，是咱们这个礼物的名字，要接下来再来一个是专门来放咱们的这个也是这个图片的吧，Image。

啊，我们这个是火箭的还是这个鲜花的这个图片地址src，就等于咱们gift还这块gift item item点咱们的这个gift URL这里，对吧？啊，然后在同样的我们还得一样的啊，将来这块都得加上样式啊gift UR，然后的话呢，我们的mood咱们就给它设置成wide fix好了，最后的话，另外咱们把这个样式啊给他处理一下啊，我们希望的话呢，是这个图片别太大，因为图片一大给我顶的我啥都看不见了就好吧，所以我们在这里来看一眼这个样式这里啊，我们给它这个图片这一块嘛，咱们给它设置成这个礼物图片当大一点100RPX，然后对应的这个图片的话，让它小一点，比如说是80RPX就行了，再把这个的字体给它设置的小一点就行，好吧，来咱们测试一下，咱们来试一试音。

份，咱们对应的给这三个加样式啊，第一个这个我说的这个头像的话，我们给它宽度的话，就给的这个80RPX啊，然后对应的我们这个infer的话，咱们把这个字体的话呢，咱们给它一个放的size，咱们给它设置成12撇小一点的这个字呗，然后最后的话，再就是我们这一个class啊，咱们给它设置成啊，我们的宽度的话呢，是100RPX1保存之后列外。咱们来测试一下这些东西的话，那肯定是我之前写过了，所以我对于这些还是比较敏感哈，知道那大家在一开始去做开发的时候，肯定要自己的去调试，或者根据设计杆去量取，到底是多少还更加合适啊好，咱们在这里的话，我也要减少时间，可能就在这里直接就洗了，那这样一编译之后的话，咱们来看一下我的侧边栏中啊，能不能收到呀这些消息了，来点击杨左这一块，咱们给他发个啊，发个测试，发个火箭，大家看一下，哎呀，怎么怎么竖着显示的啊，怎么竖着显示的鲜花啊，好家伙怎么都是竖着显示，而且诶点错了哈，而且这个鲜花也好，这个火箭也好，它怎么这个宽度没有控制住呢？我写错了吗？Gift URL这个名字，然后在这里Mo模式Mo写成model了Mo模式。

OK，那接下来我在在这里咱们给它设置一个什么第4LE吧，啊弹性和让它符在一行上显示嘛，主轴默认是横轴嘛，所以咱们再让它在横轴上显示，然后再让它，因为可能这个这个宽高度比较高呀，咱们可以让它这个侧轴的话呢，设成center对吧？一保存之后列外来这次咱们重新的编译一下哈，看看这个样式，这次啊有没有问题呢？啊，咱们这个侧边栏的这个功能的话呢，我估计啊，咱们是快干完了呀，来点击这个杨佐呀，然后点击这个礼物呀，要点一下出来了，发送火箭啊，引兵送出了火箭乘以一一秒钟消失的，你看引兵送出了鲜花乘以一，大家也能发现啊，这块好像这个图被称了一下，所以这就是咱们这个图片的一个问题了，你也可以在这里啊，不设置这个，直接把这个图片直接写死成这个固定的，对吧，咱们在这里对于这个图片宽度高度都是80这种的。

80RPX对吧？包的杠RA咱们给他50%啊，正好来一个圆嘛，对吧，这样的话啊，就不会被称了一下对吧？好像咱们之前就说过这个mode white等于fix这块的一个小问题啊，点完之后的话来进来，咱们在这点一下来一个对不对，引兵送出了火箭一啊，然后的话再点一下这个什么呀，引兵送出了鲜花一对不对，你看这个字啊，一秒钟咱们就让这个这个礼物就消失了啊，就这样的，但那个火箭还有这个鲜花好像都有这个问题啊，你把那个外人fix的话给它修理修理啊，但在这好像有莫名其妙的那种动画的感觉被抻上去了啊好了，行，咱们关于这块的一个测试的话就差不多，另外可以看一下咱们在实现这个呃，礼物打赏这一块啊，咱们用的这个半屏组件，然点完之后的话让它消失，并且实现了咱们的通讯，因为在聊天区已经显示出来了，而且为了更好的体验，咱们在测表当中也已经显示出来谁送了什么样的一个。

礼物这样一个功能，咱们也给它完成了，好了两位，咱们关于这一小节就到这里了，下一小节就是咱们要把这些信息的话呢，也要存在我们自己的后台中啊，为什么呀，是因为将来我们点的时候，我们可以看到送礼的排行榜，谁是我的榜一大哥啊，谁是我的这个榜二榜三，我都能看得见啊，所以咱们要把这些消息谁给谁送的什么样的礼物啊，什么时间送的啊，送了多少啊，如果有的话，都要记录在咱们自己的数据库中，这样的话，将来方便咱们后期啊做维护啊和统计去用。好吧，列位好，关于这一小节咱们就说到这里。