035-直播间模块-礼物布局原创

好了，那位接下来咱们来看一下我们的主播打赏功能啊，我们给主播刷个火箭，天若有情天亦老刷个火箭好不好？好了，那接下来咱们来到我们的哪个呀？是我们的live wxm2中啊，咱们这个谈起的这个功能列外就在这里啊，点完之后我说的这个效果哈，是我们点击这个。点完按钮之后，应该是在咱们这个位置啊，它弹出来这样一个对话框，从底部慢慢升起来一个对话框，然在这里面的话有咱们哎给他们提前预备好的这样一些礼物，他就展示在这个礼物列表中了，那这样的话，等他点完之后呀，咱们诶比如说点了它之后，那咱们要做的工作肯定是这样两步，第一步的话呢，是要进行我们的啊即时通讯啊，知道让别人知道这个人给主播画了一个大火箭，刷了一个大火箭，并且要把这个数据存到咱们自己的数据库中，而且还要在这个地方显示一个啊谁谁谁给主播搭上了一个火箭的这样一个动画啊，这样来说的话呢，我们这个功能的话就很完整了啊列我也看到咱们之前的一个演示了，好吧，那这样的话呢，可能就按照这样一个规则和流程来，咱们这一小节中先把点完这个啊主播礼物这个图标呀，能谈起来这块这个布局啊给做好。

啊就行好吧，好，咱们这一小节主主攻这一块，大家科在这要做一点说明哈，就是我们这些直播间的这些礼物列表啊，在这儿呢，科文已经把这些图片数据啊放在咱们的本地image中都保存好了，科文一共就利了两个数据，两个假数据，一个火箭一个鲜花的，但咱们也知道这一块的这个过程的话，应该是把这些礼物的数据也应该存在咱们的数据库中，然后呢，你再自己再写一套后台管理系统，由后台管理系统的负责录入数据，我录入新的礼物，然后咱们这个小程序去获取新的礼物列表，在能这展示出来，我在后台系统中的话呢，我删一个礼物啊，那咱们小程序打开之后，就这个礼物被下架了，咱们就不能再刷了，哎，是这样一个情况，但是吧，这个功能跟咱们这个电商功能的话呢，有部分重合，你想将来我也是上架商品，下线商品，修改价格等等的，所以都是这样做的，所以咱们这两个呀，做一个就行了，一号。

主然你这个工作你重复做两遍没有太大意义，好吧，啊，大家在这里就听明白课文所说的了，我们这个直播间的礼物列表和我们将来的电商列表的话呢，全都应该从我们后台系统中，我们应该对应的一套后台系统负责把这些电商的内容啊，电商的商品内容，还有我们的礼物的信息的话，录入到我们的后台系统中，而我们这个是是写入了我们的云数据库中，然后咱们小程序再从云数据库中拖回来，这个列表显示在这里而已，那将来我在后台系统改，改礼物的价格，改礼物的数量，对不对，都可以做到啊，所以跟将来的电商这个工程师高度重合的，所以科在这里的话，就把这个过程的话呢，给简化处理了，好吧，OK，好，那这样的话呢，我们就暂定啊，在我们这个礼物列表中的话，是客提前在我们的类物GS中啊，买好了的一个数组啊，这个数组里面的话呢。

是我们的礼物列表信息，你就当我从数据库中啊给取回来了，好吧，OK，这一节的话呢，咱们就来干这个事儿，那我在类物GS的最上面这里啊，允许科人在这里伪造这样一个数组，这个数组里面的内容的话呢，就是我们，哎这个啊礼物的信息啊，科在这里写这样一个东西叫做我们的gifts。Gift词是一个数组，数组里面假定是我们从数据库已经取回来礼物的ID啊，然后礼物的name叫做火箭啊，然后再就是我们的URLURL这一块呢，我有这样张图片，斜杠image字，然后giveitem1.pg，另外GI的item1.pg，我有必要让你看一眼啊，在我们的image文件夹下啊，我的image在这里，GI的ITEM1ITEM2啊，是一个鲜花啊，一个火箭啊，所以在这里把这个复制一份啊，在这里再写一个gift的这个是什么，ID是一个二啊，它这一块的话呢，是一个鲜花啊，对应了我们GIF的item是二，所以其实咱们这个小程序要做的话呢，连带的后台系统的话呢，哎呀，真是想做大，特别能做大呀，对吧，你就对于电商整个管理，你就对于这些礼物列表的管理，就够你玩活一阵子了，对吧？啊，所以咱们在这里哈，咱们把这个礼物这一块。

然后话简化了一下啊，咱把精力到时候放在电商这一块的一个处理，咱们对应的也会去写后台系统，好吧，OK，咱们在这里来看一下我们的gifts这个列表是吧，我已经数组我已经创建好了，那接下来的话呢，我应该啊，不要在自己这里边来布局我们这块，因为点完就弹起来这个东西的话呢，对不对，咱们也不要在这去布局了，咱们在哪去写呀？啊，因为之前这些好像没有什么布局部分，就是一些事件通知就完事了，但这个真的有布局，所以在这科要在这个下面的话，要写一个哈，这个是礼物列表啊列表，诶列表，哎这一个组件，那在这希写一个叫room gift。

好，Room gift，那这样的话，这个组件我是不是要定义好，同样的话呢，这个组件将来会接收我们副组件给你取好呢，那些数组数据啊，Gifts，另外咱们在这创建这个数组的目的不就是咱们说已经从后端拿回来了我们这些数据了啊，我已经给你这些数据了，然后你把这个数据传给我这个组件，我这个组件的任务就是帮你把它给渲染出来啊，相信我吧，好了，我们这个room GI的组件，咱们就在我们这个地方进行创建这个组件了，来右键新建一个文件夹，咱们叫room gift这一个组件，Room gift的组件里面咱们新建好一个components，也叫做room gift这个组件。

好了，这样的话呢，我这个give give这组件创建完了，再在我的live文件中啊，咱们做一个注册啊，这样我才能用嘛，Room-gift然后来在哪里呀，点点上去集，点点上去集，哎，Components文件夹下的room gift room gift好了保存之后啊，接下来的话呢，至少咱们已经将这个组件的话呢，已经给它引入到我们这个直播间这一个模块里面来了啊，咱们来看一眼哈，诶在这里我怎么又出问题了，来重新编译一下。点击这个行左这一块，哎呀，在这里的话，又出了这个什么问题了呀，感觉又要清一下缓存，我这个是不是老有问题啊，来重新的编译一遍，嗯，老出问题啊好了，这样这次编译完之后，咱们再来看一眼有没有问题呢呀，点完之后杨左直播间进来之后，好了，大家能看到我们这个入门GI的组件的话呢，已经啊给加载进来了，好，咱们想要的效果是在这块弹出了一个什么呀，这个从底部缓缓生成了一个view啊在这大家可以自己去做布局啊，但坑强烈推荐大家呀，来使用一下我们小程序的一个扩展组件啊，大家可以搜到小程序的这个文档就打开了，对不对，是咱们之前参考的在这啊，它有我们的这个平台能力啊，这块的话，其实换的位置呢，以前扩展能力在上面的，现在变成了这块啊，平台能力中有一个扩展能力，扩展能力里面的话呢，有咱们的一个VUI的一个组件QQ想。

除了就是咱们可以使用一下，人家写好了组件，你说就一个样式，一个小模块功能嘛，啊，你非要自己画页面也行，那站在巨人的肩膀上不挺好吗？那这样的话，咱们在VUI组件库中的话，来咱们来看一下这块的话呢，他会给咱们单独写了一份文档，你也可以扫码去看看这个体验一下。VUI文档中的话呢，我要用的这个组件我就直接给到大家了，就是这个half screen dialog半屏啊，半屏弹窗组件辅助完成当前页面的任务啊，并提醒用户，引导用户进行下一步的一个操作啊，我就是这么找到这个组件的，那这个组件的引用方式的话呢，就是在你的配置点其实中这样去引入这个组件，那这一会的话，大家就想为you mini program这个猫脚文件还没下载进来，这能引入组件成功吗？所以你得第一步先去把这个组件下载，那需要下载吗？其实啊，还真的不需要他支持咱们。

扩展库引入不占用小程序包的体积，因为大家知道一个小程序最大可以两兆啊，当然后来可以分包的，但也麻烦嘛，所以咱们在这里的话呢，支持扩展库引入这个方法就很好了，点开之后第一步下载VUI，其实就是引入VUI而已，你根本就不需要去下载，你只需要在你的那个G文件中写一个使用扩展库这样一个属性，把你的VUI这个属性设置成处，这样的话呢，就能把它给引入进来，来列位，把这个字段你复制一下对吧，别弄错了哈，复制出来之后来到我的代码中的APP，点咱们核心的配置文件中，好，就在这里，他能粘过来，咱们要引用这一个VUI组件，给它设置成true，好了，设置成true之后你就可以来使用VUI组件了，那就是按照这个来，因为我接下来要用这个半屏组件，所以我复制一下这句话，因为咱们要知道我在任何组件里面要用别的组件都。

得先引一下，这是小程序的规矩呀，那这个在有规矩好，所以在咱们room GI的J文件中，因为我要用这个组件，我就要这样去引，就像咱们在live JS这个直播间组件里面，又用其他组件，我不都得这种方式来给它引入进来嘛，啊所以这块没有问题，一保存之后，那接下来咱们把那个最基本的那个DEMO帽的话，咱们给它抄过来呗，那基本戴码好像东西也挺多的哈，你看这个效果吧，弹出来，从底下弹出来这样一个效果啊，咱们先复制过来，然后咱们再改点数据啊，试一试，来复制过来之后。

粘到咱们自己的room GI的WXM中，把之前这个文本咱们给它删掉，换成它叫半屏啊，弹框组件事件绑定啊，好像先不需要显示，我让他现在永远是true好不好呀啊然后在这里测试的标题，测试的内容，还有这个按钮，我觉得也不用，但是大家可以看下这些属性哈，你要觉得说看们你就这么说，我知道这些属性是干什么用的呀，啊，我是猜的，因为瘦就是显示呗，那你要不确定的话，后面不有文档吗？会告诉你说这个失误是干什么用的，是否开启弹窗，我给他一个啊，默认就是出啊，默认就打开的啊，将来给它改成一个变量啊状态啊，一会false，一会触开和关的对不对，Mask close包这个遮罩层是不是点击遮照层是否可以关闭该组件，我设置的是false，不可以关闭啊，这就是标题，这些东西OK，保存之后，另外你想我们的room GI的这一个组件，它在这里成功的引入了我们半屏组件。而我们的。

类这一个组件，类5.gs这一个这个六五点精中也已经成功的引入room GI的这个组件，那我认为这里的话是没有问题的，咱们重新的编译一遍，咱们来看一下这个效果，看下这个半屏组件会不会乖乖的从底部来对不对，那就成了，你看它就是在底部的，所以这个组件你都不用自己加任何样式，特别好用啊，我们的半屏组件，那这样的话，咱们就在这里的话呢，来开启啊，咱们的这个组件的一个这个简单的一个改造啊，因为我们想要的效果是什么呀，你一开始你不要着急弹出来嘛，你一个是我点这个这个小图标的事，啪点一下你再出来，所以说咱们就得在我们的这个live GS中啊，提前呢设置好一个状态对不对，就是我们的这个is gift。

这个组件是不是受is gift的受默认这是个for不显示的，那什么时候它显示呢？是不是咱们点了那个小按钮之后，再让它进行一个显示，那大家可以想象一下，我现在这个值啊，我写成false中，那谁给我改成true呢？那是因为啊，这就涉及到咱们通信呢，这是因为咱们点的room包特里面的哪个呀，这个小图标他给我再传回来说被点了，然后我在那个回调函数中，我给他改成这一个触，然后我再传给他，所以这是典型的一个兄弟通信的列位，诶这是咱们好像在开发小程序以来的话，第一次哈用到兄弟通信，因为这个room包中的这个图标组件在这里，而你现在要控制的是另外一个组件，这两个兄弟，而咱们接下来在附件live.gs中，咱们设置了一个A数这一个属性，所以做法就是咱们在包特姆组件中控制它啊，点一下进行一个子传。

传父让这个值变成处处在传给他，这样的话两个兄弟也能达到同步了通信的对吧？这就是咱们的中间人模式嘛啊子传父附载传子的这样一种方式，所以接下来我的流程就是我先要求从我的room包组件中能传回来，所以Q在这里给他绑定一个事件B的这一个show gift这一个方法好不好，在这里的话呢，我就写一个什么呀，这个show gift这样一个方法，然后在这个show gift的方法中的话呢，我先打印一个log，看看从我的字符件中能不能传过来这个事儿对吧？啊，咱们在这把它都写成小写的啊，就是事件名自定义事件名咱们都改成小写的啊，这一块的话，咱们给它改成这个大写的hand的啊，好，这样跟之前的都高度统一是吧，保存之后在我们的类务GS的最后面啊，他们说了哈，咱们把所有的回调函数处理都写在最后面，这一块的话咱们来打。

你一个好哥啊show好了，接下来在我们的底部包特组中，你别弄错位置哈，因为你现在要求的是点那个底部的那个按钮能够触发副组件，所以我应该在我的bottom对应的WXM2中，是不是给咱们的这张图片吧，Gift的这张图片啊，就是我们礼物这张图片，给他棒的一个这样一个事件啊，棒的TP。然后这个handle到这一个gift啊，咱们在这个方法中的话呢，进行一个回调处理啊，咱们进行触发一个自定义事件，好，咱们来看一下这是咱们的handle animation的地盘，那接下来课文在这里再去写，这是handle gift，我通过一个this.trigger event啊，触发我们在负组件定义的来负件给你定义的回调函数，这个回调了，这个自定义事件叫show gift的，所以这样来说触发它就行了，那这样只要你一点击这个小图标啊，礼物小图标，咱们就会立即触发副组件的受GI的自定义事件，而负组件自定义事件的回调函数的话呢，叫做这个受gift，而我在受gift里面，我只是打印了一句话show而已。好，最后咱们编译测试之后跟客们来看一眼，来点击羊组进来之后的话呢，诶，我得先给它关掉哈，关掉它好，咱们点一下它来走，诶我这个小图标在这里哈，点一。

片大家伙看到了这里了，那到了这里之后，你的任务就一件事，将我们之前呢，那个is show I这个词，他不是初值是个false吗？你给我改成这个true就行了，所以他的任务就把它给改成这个true，那有人就说了，看们一开始是个false，你点完之后改成true，那我这东西我也没用呀，那接下来就是你要用的时候呢，你要把这个值传给咱们的room GIS这个组件，你要传给他，然后的话呢，我们在room GI中接收，一会儿是false，一会儿是处好控制里面那个半屏显示和隐藏呀，所以我们在我们的子组件room GI的里面，咱们又要进行一个接收，自定义属性，它是一个布尔类型的，好了接受，然后咱们把这个值应用在我们这个数这个属性里面，就不要写死了，那初始的时候，列位都知道它是一个false。

所以说它不显示，等你点了一下这个小按钮的时候，它就能够显示的，但现在咱们再重新的编译一遍，因为咱们改了不少GS相关的代码了，那咱们测一遍，一开始初始给他false，所以他一进来之后，我们是看不见这个半屏的了，太好了，那接下来等你点完之后，咱们实际上经过了子传父和父传子的中间人通信这个模式，最终给我改成了触，它就能够显示出来了，那我们这个组件就成功的从底部的话就弹起来了，诶这么一个小功能的话呢，就完成了。

接下来把里面的内容啊，咱们也得替换一下，哎，换成啊咱们这个直播间礼物相关的内容啊，咱们在这个标题这一块，咱们可以给它改改这个字，略微想改一个什么样的字啊，把我们这个半屏里面这个字咱们title呗，从这个title中咱们给他改成这个发送啊，发送礼物啊，保存之后你看热重载就在这个时候特别好用啊，这个只将当前组件的话进行一个重载啊，我们只改了一个字，那这样的话就显示它，那副标题的话呢，啊，这个咱们就不要了，不写东西了，那接下来内容就是这块描述这里，那大家都知道，看到这块描述一个是显示啊，咱们的几个直播间的那个礼物列表，其实就两个，一个火箭，一个鲜花，但这个de sc，它不是像re react那种直接写在这里，它不好用啊，所以在这的话呢，这就很难为大家弄了半天你这个半屏组件没啥用啊，要要注意一般这。

中组件的封装啊，他们都支持插槽的调用方式啊，如果你不确定的话，来到咱们的文档中，你去查一查他支不支持像插槽一样的东西呢？你看它支持，它说它支持插槽，它有支持咱们title插槽，还有DEC插槽，还有底部操作按钮插槽，太好了，都支持插槽，那我有什么愁的呢？所以我在这里就写一个什么view。我写一个view啊，咱们这个插槽，诶，我这块是不是少少东西了呀啊，写错位置了哈，咱们应该在这个闭合标签里面去写对吧，别写错位置哈，所以我在这里面可以写一个咱们的这个view啊。

诶，我怎么到了这个搜索中了啊，在这里去写啊，咱们的这个view组件好了，然后在这个view中咱们写一个什么lo，等于一个de sc啊，咱们小程序中的插头就这么来用，你说写一个111，它听我话不，这个插头好不好用，一保存就听我话吗？好用，所以咱们就把咱们的内容放在这里啊就可以了，那到底几个数据要进行便利显示呢？列位咱们自己再想一想，这一块有多少个数据需要我们显示两个，但问题你不能说我就写死成固定的两个放在这里，咱们是从副组件中，当时我做布局的时候，我就给你传过来gifts这个数组的呀，你不要你怨谁呀，好，所以gifts这个属性的话呢，我还在我的这个组件中，我得怎么样呀？另外接收一下，接收完这个属性呀，我好利用这个属性进行布局呀，对吧？哎，所以我在我的room gift wxm2中啊，在这里的话呢，这个这个这个view组件到底该创建几份呢，要根据我们这。

个长度WX负二这个长度来进行计算的啊，所以我附组件给你传过来give次这一个属性之后，你在这里用你自己的这个方式来进行的一个属性接收，然后我们对它进行便利啊，里面的话呢，是不是有好多这一个组件啊，所以我们在这里的话呢，我们就要来进行一个渲染，里面应该是有一个image，用image或者再加上它的文字都行，咱们在直接用这个src啊，渲染出它在这个图片的就行了，UR我记得当时我放的这个属性的名字的话，是放在这个这这个图片的地址是放在这个UR这个属性里面的，那这样的话就把这个图片的话呢，就能给它渲染出来，咱们在这里的话也稍微的给它加一些这个样式啊，在这的话可给它加点样式啊，Mode啊，Wide fix啊，咱们在这对于这个图片，你至少得把这个图片的宽度给它限制下，要不然。

这个图片这不得C了呀，所以我在这里对于这个image的话，我给它设置一下宽度的话，等于一个100RPX，那咱们来测试一下，先来保存之后我们重新编译一遍得是不是，嗯，编译完了咱们来看一眼，点开之后呢，在这个直播间1.1个弹出来哈，点弹出来诶大家就能看到了啊，我这两个礼品的啊，咱们在这让它这个浮动啊，然后这接下来在这个room这个里面，我把这个class名字给他拿过来，然我稍微做点样式吧，我这样我让它有点底哈，有点底色，要不然这个图片直接放在这里，好像这个不太好，这样我加个background ground color啊，我在这给它一个这个底色啊，Light light green这个颜色是吧，好不好，浅灰色，然后我设置这个宽度200RPX，我设置这个高度200RPX啊，然后对应的一保存之后，咱们可以看一下，然后我控制一下它在。

我们这个200乘以200的盒子的中间来显示，所以我可以通过这块是一个display flag，然后对应的我们这个图片的话，咱们设置成什么呀，你可以用咱们传统的弹性盒中的，那么对应的啊，主轴侧轴啊，进行一个居中啊，那么对应的我也可以在这个里面的话呢，设置一个marking or two，这都是弹性盒的一个用法，只不过有很多人不知道这个用法，他会认为这种写法是错误的，对吧？哎，这样的话呢，一保存之后，它是不是就在我们这个盒子居中了呀？嗯，咱们在这里的话呢，再让它这个什么呀，这这个有点距离哈，两个之间有这么点距离，然后再让它浮动一下就行了，OK，保存之后的话呢，你看这样我们就有这两个小礼物了，等你点完之后的话呢，诶把这个礼物发出去，把这个礼物给我发出去啊就可以了，好列位你看这就是啊，咱们这一个布局这礼啊在这里的话，整个这个情况的话呢。

啊，我们用了一个半屏的一个主件啊，咱们总总算是点完这个图标的话，能弹起来了哈，但弹起来之后的话呢，咱们点这个图标还得让它关掉，还得让它再关掉它啊，然后的话再能获取到此时我点的是哪一个ID啊，因为将来我点完之后，我还得知道对应的这个ID中的要，因为要显示在咱们这个位置嘛，还要存在咱们自己数据库中，所以我得知道我点的是哪一个啊，点的是哪一个，所以我得把当前点完了这个ID，我得给它传回去，并且得让它消失，所以这个就简单了，是不是在咱们这个room GI的这里面的话，这不简单吗？我们只需要给它绑定一个tap事件就可以了吧，咱们就在这一集一块给他写完了吧，Handle，这个tap一点完之后，咱们在这个room gift的这里面来写好这个呼叫，咱们来一个什么this点吹歌以问哈，然后咱们在这里进行一个触发，诶，我想起一个事来。

咱们至少先点完之后，我得知道点的是第几个，咱们在小程序中怎么传参呀，我在这里知道我是第几个data.id是知道这个ID吃的，所以我在这里穿插的方法是什么呀？用咱们这种方式杠MYID杠是固定的MYID是你随便写的，后面是你真正的这个ID值，所以在这里是item点咱们这一个ID，那这样来说就是我们data杠随便写的MYID啊，是咱们自定义的I杠是固定的MYID是自定义的，然后这块是咱们真正的那个ID值，还有它的，其实它这个什么item.id还有咱们的item点那些信息都有，这咱们把整个这个item给传过去不也行吗？对不对？把整个item对象传过，你想要什么你自己取好不好，是这样，我把整个item给它传过去，那咱们就在我们的这个room gifts这里面的话，咱们通过一个那位技得。

那么在这里是不是通过一个固定的方法获取啊，ET点这个current target.set点啊拿到这个词咱们看一眼来重新编译一下，看一下是不是这个方法能拿到，我此时点的是第几个，好，在这里咱们啊。先让他弹起来哈，弹起来之后点一下，点一下大家可以看一下是不是data side里面有个MYID，他家说诶这个很眼熟呀，坑们这怎么回事呢？这就是因为你这块这个站位服买ID，所以拿到了是我当前点击的是第几个，所以把这个买ID属性拿到手了，好接下来咱们再控制它，对吧，把这个数据传出去，然后的话再让他消失，让它消失，我绝对不可以直接改这个属性，我还得通知副组件再给我改成触呃，False再给我传回来，所以这就是咱们所出来传嘛，吹哥疑问呢，他们要传什么呀？我们要触发这个回调啊，表示我们要把这个当前点击的这个给它传回去，Send gift gift的这个方法，咱把这个啊，要send的这个礼物的这个对象给它传出去，那大家就知道了，我是不是需要，哎，在我的回调函数中，我来监听这个自定义事件啊，然后在我的类务中去处理这个就行了，你看我在子物件中。

Room give中一点完按钮之后，我们吹个问他了，现在就等着你附件监听好这个事件啊就可以了，所以我在我的副组件中来。在咱们的live哪调用的，在这调用的吗？Room GI中，在我们的live w sm2中他们调用的，所以我在这个地方啊，我绑定好了，我写一个回调handle到这一个send的这一个gift啊，这个方法跟之前不冲突，之前是受，现在是send，好了在这里咱们就在这个方法中，咱们接收了这个值之后，并且再将那个is give的时候再改成false，因为再让它隐藏掉嘛，啊要做到这一块的话呢，我认为咱们就啊可以了，好吧，然后咱们最后再最后这个方法中含到这一块啊，咱们写一个send中，咱们首先将那个给它什么改成这个force is gift数，再给它改回这个false来，然后在这里咱们再打印还我们这个ET点得给咱们传回来的这个信息，那列位如果这一步成功的话呢，我说哎，列位已经成功了，好了，点击这个编译之后来。

再来咱们来看一下啊，点完这个杨总啊，好了，现在我点击这一个，我点击一个火箭，哎，你看火箭这个信息在304行打印出来了嘛，对吧，然后点进一个鲜花，点完了之后这块消失了，并且的话，咱们也在这个副围中接收到了，我到底点的是哪一个好，另外这就是咱们关于啊，我们送礼物这个模块中的啊布局相关的内容，那在下一节中咱们再来看一下，那我这个礼物发出去之后，我不能锦衣夜行，我得让天下所有人知道我给谁刷了一个大宝剑，不是大火箭，我的天呐，差点说错话了，这都哈，好了，咱们来看下一小节中我们的计时通讯这里。