046-直播间模块-在线用户原创

好的各位，咱们接下来啊，再来看一下我们在线用户以及啊送礼榜哎这些业务功能啊，其实这个功能的话呢，就是在咱们这个两人在看，就在这个位置上，你列微亚点一下之后啊，会弹出来这样一个界面啊，在这弹出来是这样的一个界面哈，这样一个啊我们的半屏dialogue啊，然后在这块是一个在线用户表示啊，现在到底有几个用户啊，正在看咱们的直播，还有一个送礼榜啊，送礼榜这块的话呢，客人并没有做太多的数据清洗，就只是把我们啊数据库表中的前100条数据啊来了一个，按照时间排序啊，把它们给拽出来了，然后显示在这里，但是大家可以得这块的话呢，对于数据啊进行过滤清洗一下啊，比如说把谁送的最多的啊放在最上面。但当时咱们这个礼物并没有按照价格来计算啊，所以在这里按照榜一榜二去算呀，也可能不是那么好算啊，所以客人在这里就直接把我们的哎这样一个送礼物按照时间排序啊，啊显示在这里面啊，因为内容过长，所以这块会有滚动条的一个出现啊，所这是咱们的这一个功能啊，咱们之前也已经演示过了，哎等列位点这一块就可以出现来啊，所以这一块的话，我认为咱们还是分为啊这么几个步骤吧，啊，还是从最基本的这个页面布局开始啊，再到我们后端数据库的一个啊访问啊，而且获取在线用户这个功能的话呢，咱们再用到我们的啊即时通讯的一个接口啊，要不然你想在线用户到底有几个人，咱怎么记得，咱自己去做记录吗？啊说这个是不科学的，所以咱们可以通过即时通讯的接口来去做好了，另外那咱们接下来来看一下这个功能吧，那首先的话呢，跟客户来实现最基本的一个功能啊，怎么。

你把组件给创建出来，然后点击它能让这个组件显示出来啊，而这一块的话还涉及到一个咱们这个数据的实时更新的问题，就是咱有必要这个人刚送的礼物这个地方就自动刷新，实时刷新一下吗？没必要啊，所以他的体验应该是跟这个一样，在说点的那一刻再去取数据啊，布局就可以了，点那一刻再去取数据布局就行了啊，每次点都获取最新的数据更新一下就可以了，您没必要做成那种实时性特别强的，对吧？因为这个东西就是咱们点那一个确认一下最新的数据就可以了。好了，另位，所以这个表示就是我们还得用w X if来控制这个组件，那这样的话，我们在这里通过online哎，Use这一个模块啊，在这我还是得通过像之前那种写法一样，对吧，我得有一个状态来控制它到底什么时候创建出来，所以在这里的话，在这样去写E字啊。

嗯，懒show这一块啊，所以w if如果为true就创建，如果为假的话呢，就删除掉，这样的话再处的时候就会再走一遍它的创建生命周期，咱们还是在attached里面发咱们的阿贾克斯请求，这不好吗？对吧？嗯，咱把这个的话在类务GS中啊，提前设置好它的初始值的话呢，是一个false这样一个值，然后哎，我们再去写那个组件来吧。另外嗯，在我们这个文件夹下啊，咱们一样的新建好我们的文件夹叫online啊文件夹，然后在online文件夹下的话呢，新建一个组件叫啊line user这一个组件，然后在咱们的啊live务点WXM2中啊，咱们在对应的这个啊Jason文件中啊，咱们来创建出引入的这个组件啊，来杠user冒号啊，我们在这里。

上行叠加上星期component文件夹下的online，线下的online user，咱们给它引入进来，那这样的话，这个组件啊，一开始为甲啊，所以它就不创建出来，等咱们点那个按钮，点哪个按钮，咱们要点的是上面这个按钮的时候。

这里的话又出现了可尔新创建的一个组件啊，又得重新呢再编译一下啊，再把之前的缓存的话呢，给它去掉，重新再编译一下就好用了啊。嗯，还是这个老问题列外，好吧，那咱们在这里就先写代码呗，让它慢慢编去吧，所以我们应该在当年的room he这里，你看这都是涉及到咱们的非父子的这种通信模式，我们这次应该是点了几人在看这个功能吧，棒的TP然hand到这一个，这个是咱们的on line这个功能啊，然后咱们在这拿过来之后啊，在我们的head对应的JS中，咱们来trigger event，嗯，这次点trier event，咱们trigger的是这个on line show呗这个事件，所以我们在这里就要提前的在我们这个组件身上呀，捋好，做好这个自定义事件监听啊，到时候我们在这里的话呢，好显示诶这一个啊来好了。

咱们在这个回调函数中，就将这个值咱们给它改成true，它不就创建出来了吗？另外啊，所以这样的话呢，实现了我们的通信啊，这块的话咱们实在是太熟悉了，因为之前我们的业务呀，跟这一块的话太相似了，对不对啊，所以我们应该在下面这里的话呢，我们写好了啊，控制this.s咱们控制那个is啊，On online show这个值改成这个true，另外一开始这个值可视为假的啊，咱们在这里面是个假这个值，所以等你变成出了之后，它就会创建出来啊，咱咱们在这点击的话呢，是点击的我们room header里面一段代码，所以这块适应了子传付的功能的调用好了，来咱们来看一下这个效果，咱们看好不好用一点之后出来，对吧，就出来了嘛，然后咱们再把这个组件的话呢，咱们给它换成这个半屏的这个组件，所以我又得借鉴咱们之。

填那个user card吧，在这里把那个Jason中呢，这一段啊，给它复制粘贴到咱们的online这段Jason中呗，啊，然后再把我们user car w xm2啊这段代码，这段代码给他拿过来呗，来复制一下，粘到哎，咱们自己的online这个里面，来把之前那段给它踢掉，然后再来这块列外，你看看就这段代码咱们还得呀，给它拿过来，这样的话呢，咱们重新的编译一下，对吧？哎，咱们来看一下，点击羊组客人进来了，然后点击这一个再看对吧？哎，然后给它叉掉，再点就不好用了，因为老毛病了，为什么会不好用呢？是因为啊，咱们点完这个关掉之后呀，它只是让这个东西自己隐藏掉了，不显示的而已，但其实我们在类务中啊，这里的这个值还是为触的，所以这个组件还是被创建的啊，你再点。

的话呢，它也不会再有反应了，那咱们要控制的再把这个值给它改成false，那我这样做的目的也是为了让它每一次点都会出现，咱们的走咱们的创建啊生命周期这样好发请求去用，所以科们应该在他身上的话呢，也应该绑一个回调函数B呢，咱们的这个hi，诶hi on来在这里hand到hi on来这个回调函数，哎，你给它写好了，那对应的课文在对应的live GS中就要写好这个hide line，咱们就将这个值的话给它改成这一个false就可以了，Online收我给它改成false，那现在问题是这个回调函数就这上面这个回调函数谁能够触发了了呢？对吧，是不是在咱们这个online userage一个组件中，哎，等咱们一点击的时候点什么呀，是不是在这里一点击这个close的时候，哎，咱们就。

诶，这个埋中咱们进行一个trigger问触发这个事件就行了，Trigger诶trigger问触发咱们这个事件，那这样的话咱们来看一下这个事件的名字的话呢，哎，咱们再给它，哎注意啊，这个事件名字我给它找对了啊，我得把它给复制出来，叫hide online OK，复制过来我们给它扔到这里来。另外好了，这样的话呢，咱们就可以最终的来测一下，看看这样一个最基本的模型有没有出来，点击养组之后的话呢，点击再看，诶是不是能够创建出来叉掉没了再点击还能打开，诶大家说这是怎么回事，为什么会好用了呢？很正常是吧？嗯，咱们点击对应的online close，它触发的是我们副组件在这里自定义的监听事件，那这样的话呢，我们在这个里面的自定义的回调函数的话呢，就会触发，而这个回调函数的E。

我就是让这个a online受变成false，所以这样的话呢，这个组件就会干掉了啊，所以这就是我们的孩子啊，自己请求副组件，快把啪干掉吧啊所以因为咱们在这里用的就是咱们的啊通信问题啊，所以咱们一直在这里让这些兄弟的话呢，进行一个关联通信，OK，这样来说我们这个组件能创建出来了，那接下来这个布局这一块列外，咱们之前也说了是吧？啊在这里有一个送礼网和在线用户，哎，这种布局的话呢，咱们用的就是我们这个插槽就可以了，你看在这里面你还不熟悉吗？啊，在我们onlinem中肯定要用两个插槽，一个是咱们的L等于一个title这个插槽啊，这是咱们的插槽内容，还有一个DEC这一块，这是咱们的描述内容，就这两个插槽，另外而这个title这里的话呢，咱们就弄出了两个，一个是我们的送礼。

嗯，一个的话呢，就是咱们的，呃，这个在线用户是吧，这两个就可以了啊，所以客人在这里的话呢，就可以写好啊，我们这个view的话呢，对应的啊，这个第一个是一个送礼榜榜单，榜单好了，接下来是一个在线用户，在线用户太适合做咱们的弹性盒布局了吧，啊在这里的话可能给他一个胎套字段，然后对应的我们在这里的话就可以对于这个胎设置一下来，来到我的online w XS中第二胎我们display，我们对应的这一个是个flex，然后点title我们里面的诶这个title写错了，点title里面的这个view的话呢，咱们是个LE1，然后这就是text的拉成center对吧，哎，这样就可以了啊，然后列位再可以在这个地方的话呢，把它这个字。

的话呢，给它控制一下啊，就是默认的这个字体的话呢，不要加粗啊，因为这个title的话，它给咱们呀，给咱们加粗的这个字体，可在这里的话可以呀，不要加粗嘛，一开始对吧？哎，这样的话，一个灰色的字体，哎呀，这个灰色字体没有生效啊，灰色的这一个字体，等一会儿咱们加上这个active之后呀，咱们再让它这个变成加粗的，而且的话，颜色就变成这个黑色的表示的话呢，我已经啊选中它的连位好吧，那接下来我们在这里面，将来你要做的一个功能，不是典型的一个选项卡的一个功能吗？Class等于个active，如果给他加了话呢，是不是就会有呀，那这样的话就是我们在这里DR active，如果他身上有的话呢，我们就可以在这里color在就改成这个blank，然后对应的我们这个found刚weight的话就是bold保存之后，所以将来的话呢，就是你这个class active。

加在他身上它就有，加在他身上的话呢，他就有啊，只不过现在我们要做的是我们点完再让他有这个class，那这样的一个功能的话呢，我们用到了就是咱们，呃之前呀，最基本的说，我要用这个小程序写一个最基本的选项卡，而且这个选项卡它还不是动态创建的长度，它就是写死了两个，所以这种的话简单是不是咱们在这写这个class，我们可以判断什么car re CT等于等于这个零的时候，诶我外面是个双引号的哈，零的时候问号咱们就有这个active对不对啊，然后下面这一个的话呢，就是等于等于一的时候的话呢，就有active，那这样的话，咱们把这个卡的这个值，这个状态是不是放在这里，提前定义好，那这个值初始值是个零，哎，那对应的的话呢，重新编一编，那是不是就是地理。

能个身上有这个高亮呀，来测试一下走你点开走你对吧，那要是改成这个一，那是不是就是第一个有这个高亮呀，来重新编译一遍，咱们再检查一遍是不是啊，点击点开是吧，在线用户了就啊所以这样的话呢，咱们初始值就让它是一吧啊我们初始值向的先是显示在线用户的，那接下来是我点的时候再切换呗，你别一开始对吧，你只能改这个值啊，那咱们这个也简单，那这个点的时候再切换怎么做呀，绑定点击时间绑的TP，看到我们这，这是我们的切换用户change啊change，然后这会要传参呀data杠，咱们这个current等于零吧，哎表示传过去这个零，好把它复制一下的话，再在这里粘过来棒的tap海到change，这个是一个一，这样的话，咱们在这个海到去中获取当前传过来的这个。

值在改，我们这个car这个状态是不是就能实现这种切换的呀，所以可们只需要在下面这里的话呢，写一个handle on change这样一个方法，哎，我们获取这次点set data，咱们把当前这个camera的状态改成我们从哎这里et.current target.data site点我们这个current这个值，另外那这样的话就表示我们只要一点完之后，那我们就把当前这一个data set啊，就获取了这个参数值，获取的是零，设置成零，获取的是一，设置成一，这里你点的时候才会给它修改嘛，对不对啊，咱们测试一下来运行之后，你看看列位这个小功能的话呢，是不是他们就成了呀，来点击之后送礼榜在线用户你看看啊，就这样一个小功能。

啊叉掉之后再点开也没有问题，而这个选项卡都做好了，高量选中呢，那剩下这块还麻烦吗？是不是就在这个里面的话，我们一样的对应的有两个view，一个view是一一，一个是二二，那对应的这两个view的话呢，无非就是我们可以在这里控制啦，对吧？啊我们如果WX用WS控制也行啊或者列位的话呢，用我们的这个像之前的设置一个啊class名字也可以啊WS冒号if对吧？在这里我们通过这个C值，如果它等于等于这个零的情况下的话呢，就显示它对吧？如果不是的话呢，啊就显示它，那运行之后列位是不是现在在线用户点一下对吧，这样的话，这个功能的话呢，我们就哎一个特别简单的啊选项卡咱们就实现了对吧？好了，接下来的话，咱们再聚焦在我们的在线用户。

这里列外在线用户啊，就是二这个位置上，咱们要在这里做的工作就是要获取数据啊，获取完数据咱们再把这块的一个布局啊给做好，那我认为这块功能不就行了嘛，对不啊，那我也说了，获取数据，咱们要每次这个组件被创建的时候来获取数据，所以最好的时间点life times attached，对吧，Attached来获取数据，所以咱们在这里要引入我们的model，哎，这个model到这个模块啊，咱们给它一样的从我们外面给它引入进来，然后咱们在这里的话呢，把这个给改成a think函数啊，我们在这里的话，Model什么呀，我们要弄一个方法哈，是吧，A wait，我model get我们的member好了，当然这个get member这一个的话，在咱们model中，咱们还没有去创建，那接下来就跟客人赶紧的去创建这个get member这一个。

啊，方法吧，来走，就获取当前正在看的这个人是吧，在咱们的啊猫到这里来获取一下，在这儿有人就蹭毁了，说客们这咋获取呀，我好像发请求，我也没记录说谁加进直播间了呀，哎呀，这就是当初我思考的不多呀，我应该每个人进入直播间就把他的信息插到我的数据库中，这样的话我再获取所有啊在这个直播间的人看，哎，不用这么麻烦啊，在这里啊，我说了就要用到咱们即时通讯的一个小功能了，非常方便啊，这个功能的话呢，就是咱们的Z4.trs，但是在这的话，你这个this就获取不到了，所以这块的话，你得想着，其实它里面有一个方法哈，就是咱们那个TS，它有一个叫get group member的这样一个方法，你只要列位啊，能获取这个方法的话呢，就可以了，所以你要拿的是这个方法，那现在这。

TRRS咱们再给大家给传过来是吧？啊，怎么去传呀？啊，我们可以在这个组件中啊，在类务GS这个组件中，因为咱们现在在类务这里边，你可以当成属性传给咱们的online u4，那你也可以在类务GS第一次拿到这个Z4点T2RS的时候，是不是在这获取到大家，哎，你就把它往APP上挂一份呗，咱们在这这个是全局的嘛，我把这个往APP上我挂一份，例外你看看这里APP挂上了TLS的APP，咱们已经在这里面引了，所以我在我们这一个online这一个组件中啊，Online user这一个组件中，我就在他的GS中，我也一样的引入APP，到时候我一进来之后，我就把这个TLS啊，我就给它怎么样传过去，另外你看这样的话呢，我们在我们的副组件中，把TL。

S，这个对象啊，咱们存到APP中全局的吗？然后咱们在组件中在用这个APPTS，咱们调用get member这个方法，对吧？在这里的话，我们就可以接收到这个TRS，然后通过这个TS.get group，哎，我们这一个member list就可以了，另外好了，就这一个方法，这个方法是获取当前的这个用户啊，获取在直播间所有用户，搜取在直播间的所有用户，好了，保存之后来吧，另外咱们在对应的get member咱们不是在这个地方调用的吗？你可以给他附上去，咱们这打印一下这个list，咱们看一下我们这个user list到底有几个人呀，对吧，我们判断一下，看一眼，运行之后来重新编译一下吧，来到这里之后，我们再次进入到阳组。

我的直播间在杨组的直播间中的话，他们点一下两人再看这一块，咱们得到了一个数组啊，一个对象，对象里面有个data data里面有个这个啊，这个member类似的中，就是咱们两个正在观看直播的用户群主，还有这个我们的引兵进来了嘛，是不是是这样的，所以我在这里面拿到了，那么可以在因为他要点data一下，所以我可以在这个model中的话呢，在这里的话呢，我重新呢，反正是一个promise对象，所以我给它返回的是data，这样的话，咱们获取到的话呢，就已经是这个data属性了，所以我在点member，就是这个类似的列位，你说呢，是不是在这里就是这个member类似的这个数据了，到时候我把这个数据的话，直接设置成我的这一个状态，一开始是一个空数组，我在这里之后就给我的这个设置成我的状态了，诶直接把它做成。

状态，那剩下的就是在咱们的页面中利用这个数组啊做布局了呗，来重新的啊编译一下呗，在这里咱们看一眼啊，点击这个杨祖好了，点击这里咱们来看一下，就这段数据了吗？那么拿到了吗？你已经给到了我们状态了，所以我接下来就把我的注意力放在我的WXML还有我对应的WXS中就可以了，好，打开WXM2打开WXS，这个时候热重载也会让你很舒服的，对吧？因为热重载这个功能就很方便的啊，我们只要一保存哎，这个数据也不获取，就在这页面的一个更新，所以这块就能体现出热重载的一个好处来了，那咱们在这里就可以根据我们数组的长度呗，在这里view啊，WX2和four数组的话是我们的member list，我在这里是给到了是一个叫member list的这样一个状态。

WXK值的话呢，咱们列外，咱们给它这一个什么呀，Index吧，好吧，然后对应的里面的这个内容的话呢，我们就可以在这去写了，首先我要的是这个什么信息，来让我看一眼这张图，我们啊在这个地方是头像，还有这个一级粉丝灯牌啊，还有我们这个名字，其实在这里这些信息都有嘛，你看一眼有没有在这里啊，头像信息啊，内昵称信息啊，这不都有嘛，所以我们在这里直接就src，等于我们这个item.ava我们的头像信息对吧？然后再就是我们接下来的是一个粉丝登牌，应该是在这个膝盖image子膝盖来一平进。再再是我们的一个view啊，我们在这里是一个item.link1保存之后你看看，虽然现在有点难受，但是这个数据对吧，图片都对啊，剩下的就是你列位的话呢，给他做点样式啊就可以了，所以我们就可以在这里的话呢，给它啊设置上啊，这是我们在线的用户是不是class online啊，这一块的话是咱们的这个头像的AVA这个信息，那接下来这一块的话是咱们的这个level的这个信息，其实我主要是通过这两个class来控制一下图片的大小啊，对吧，就这些信息，那这样的话咱们就可以在我们对应的CSS中来，来到这里咱们就可以写了呀，对吧，点我们这一个叫做online是吧？啊点嗯，Online，然后它里面的对应的这个level来，咱把这个几个给它写一写，还有这个点on online下面的点。

头像AVA2的头像信息啊，然后把它给写好，那这个宽度的话，我们跟之前一样，60RPX，高度的话呢，60RPX1保存之后是不是图就变小了，然再来一个包杠RADIUS50%是不是热重载功能好像已经感觉出来了，有那么点用了吧，列外啊10PX好了，列外可以看一下是不是好多了啊，然后再把这一块再设置一下，咱们这个粉丝灯牌的话，给它设置成54R PX高度的话呢，32R PX，然后我们也一样的马给杆right，然后我在上面，我一个在那副身上的话，直接设置整个的马上也会比较好一点是吧，我们在这里利用弹性和布局对吧，点行来让它在一行上呗，啊那有人说我这个让它浮动啊，怎么样都行，对吧，嗯，在这里的话，咱们就可以，或者是你要是这个直接更图省事的话，你可以直接把这个什么呀，View的话直接给。

它去掉了的话呢，那不就在一行上了嘛，对不对啊，所以在这就排在一行，答案在这儿的话，你可以为了更好的这个排列他们的这一个垂直啊居中，咱们可以利用弹性核去做就可以了，DR这个online我给他设置一下display，我们这一个什么呀，Flex哎，我在这里给它设置一下，然后对应的我们让他在我们的哎保存之后啊，咱们看一下是吧，是这样的啊，然后我们让他按照justify contentles干什么呀？Start让他在左边这一块呀，对不对，让他在开始这里不要在这种位置上排着一保存之后。

诶，列位咱们这个效果的话呢，不明显呢，为什么来一保存测试一下，看看我们这个图片发生了什么事了，列位看一下我们在这里面这张图片，你看宽高设置好了啊，你看咱们在这里的话，在当年有一个这个room gift中这个image好像给它加了一个呃，Marin or two这个属相影响了，所以导致的话呢，对吧，出现问题的，另外还记得吗？当年咱们在room gift中的话，就这块那点开之后弹起来这个地方。

你在这里的话，咱们那个marin or two加上去是为了让这个上下左右居中啊，就是让它在主轴侧轴中居中，咱们用了marin or two，当时我也说了，这个方法的话呢，是不是有的人知道，有的人可能不知道，你把这个去了，就现在这个熊样了，但是在这里的话呢，咱们就可以通过什么呀，你看你通过just费count center去控制，A line it center去控制，这样的话也一样好用的，但是你把这个MARIN0MARIN auto two给去掉之后，就不会影响咱们这里了，你看点开之后，它就不影响我了啊，这样就行了，所以我就可以回过头来呀，继续开发了，哎，弹性盒布局啊，在这里的话，这就写示好了，当然你也可以在这里给它一个高度，比如说每个的高度的话是50RPX，而且有点小哈，给它一个什么80RPX，然对应的再来一个什么a LA at，给它设置成center，那这样的话呢，是不是哎，就对齐的，那在垂直方向上的话，都是我们居中呢啊。

这样的话，我们这个在线用户这样一个小功能的话，那就给实现了，列伟好了，来咱们在这里简单的去回顾一下，在这一块的话，我们就是先做成一个最基本的一个选项卡功能，做完选项卡之后，我们要获取在线用户，那这块也不用你去发贾克斯去跟你的后台用啊，咱们只需要调用啊，我们啊，啊即时通讯R'M的一个方法叫get group member list啊，就能获取到在当前直播间的所有的用户，咱们拿回来做布局就行了，在做布局的时候出现一点点小问题啊，居然不听我的话啊，所以导致我在这里的话呢，就是找了找之前，发现之前有一个弹性盒marking on two影响了啊，所以这样的话，咱们给它修正了一下，诶你看这个也正常了，咱们底部这一个也没有问题，在这里点开之后，这一块的话也都没有问题，在线用户好吧，那位行，关于在线用户这里啊，咱们就说到这里，下一小。

接咱们来看一下我们的送礼榜这一块的一个功能。