024-直播广场-界面布局原创

好了，列位，咱们这一集啊，来把我们直播广场这个页面啊，咱们给完成啊，其实就是把样式啊，让它好看一点，因为数据都已经拿到了嘛，那接下来我们应该是在我们live类似的点WSM中，咱们先把这个原来这个数据咱们给它删了，给它换成一个什么呀，直播广场，哎，先写出来这样一句话，直播广场，然后咱们再简单的对于直播广场啊做一下样式就可以了啊，直播广场这一块咱们给它设置成一个class名字，咱们进行一个选择啊，Class就是咱们这个页面的一个什么，算是标题吧，咱们可以设置它的字体大小的话呢，让它大一点，哎，点title，我们设置fo size，我们给它设置成20PX，我们text line，让它进行center居中啊，我们的front weight的话让它啊加粗一下，那这样的话就是我们的直播。

广场，哎，这四个字啊，然后接下来在下面这块，这时候有人就说了客们这个简单些view，然后的话里面又放咱们的image啊，又放咱们新的view那个字嘛，啊，这个直播间的名字，那这样的话呢，来一个wx four循环就可以了，肯定没问题啊，没有问题，咱们在这里呀，咱们用用这个组件呗，因为我觉得你想一想在这个地方，它每一块每一块这不都是可以复用的嘛，所以咱们在这儿的一个合理的流程的话，应该是写成这样一个组件，类似的我们的这个live-item这样一个组件，咱们根据我们room类似的数组的长度，遍利N个live item这个组件出来，这样是咱们的正道啊。另外啊，答然你说我就要放在这里，那没有关系啊，所以在这儿咱们可以简单的也一写，回顾回顾咱们这个组件的一个写法，是不是在咱们小程序中组件的话呢。

来，咱们习惯性的啊，新建一个components文件夹，专门放组件的，在这个文件夹中咱们再放上我们第一个组件叫live item这个组件，然后当然这块是一个文件夹的名字，要新建一个live it啊，就是一个组件的啊，所有的代码大家可以看一下，组件这一块无非就是在我们初始化的时候，用component来进行初始化，咱们页面中用配置啊，那这块咱们不用管了，反正这个组件现在非常简单，就一句话，看们你能够给我把这个组件引到我的项目中来啊，我接下来就会开发了啊，怎么引呀，咱们是不是在这个配置中，在这个地方，咱们首先在Jason中，咱们应该写一个什么，使用这个组件，然后组件的名字是你自己起的live-at，然后冒号，哎，路径你给他呀，在哪里呀，点点上一级，点点上一集咱们的components下面的live item live item这不就行了吗？来一保存之后列位可以看一下。我们以。

已经在这里边看到这个live item这个组件了，那接下来我们可以把live item里面的代码的话呢，咱们给它啊写一个什么view啊，写一个里面先写一个AA吧来保存之后你要做的流程就是我们要对于内便利它N次，怎么便利用wx for，那在这里我们的数据是不是放在这个叫room list里面呀，是不是在咱们的live list中，咱们有一个叫做room类似的这个字段，咱们将来是把除了自己以外的所有数据放在这里了，所以我对它进行一个WX范的一个便利，果然好用，只不过这块报了一个警告，一味的提高性能，让我设置K值啊，这可是嗯，老生常谈的问题，咱们设置一个ID字段为K值吧。好了，这样完事之后，那接下来的话呢，我们可以看一下词，一保存，你看是不是没有再出现这个警告了呀，啊C已经保存了一下，CTRL加S保存一下。

没有出现警告就说明我们啊KZ也设置好了，那咱们下一步是不是得让这个live at这个组件获取属性，因为人家要开始渲染图片，人家要开始渲染咱们的名字呀，所以我们应该让他获取这个属性，咱们在这里获取属性是不是得给他传值啊，我们可以在这自定义一个属性呗，Item等于咱们把里面的每一项it，因为咱们WS2它会把里面的每一项结果放在item字段中啊，所以我就通过自定义属性item啊，你随便写ABC啊属性名字都可以把这个item这个字段啊，你给它传到live item里面来，来到live item这里面，咱们要按照什么呀，是不是在这里呀？属性这里的话呢，你可以接收这一个段object，当然这块还可以规定它的初始池，能这都可以对吧？然后我们在这里啊，Pros接收啊，就是我们在view和red中各种接收方法都不一样，它小程序是在这里先标记一下，说我将来要接收一个item这个属性，它是一个大对象，然后接下来在页面中啊，咱们就可以简单的写一个东西测试一下，写一个什么呢？em.room name大家可以看一眼哈，呃，我们为什么是room name，你将来这些数据中，哎，这个是我们的user信息，好像让我都给注释了哈，在咱们这个live list中，咱们先给它保存一下，来看一下啊，在这个list的中啊，我找到这个信息get这里面注释的，因为这里面的话，大家也知道这个数组过来之后，里面的里面有一个room name这个字段啊，咱们把这个room内。

字段给取出来啊，所以我现在在这的流程就是我们只要一呃获取完数据for循环结束之后，我们会渲染它N个这个live item，并且给它传过去item，而这个item传进来之后，咱们用了这一个item来接收，所以我在页面中直接用item拿到了就是里面每一个对象了，点room name这个字段就是我们这个直播间的名字，大家在这大家会发现不好用，嗯，小程序这个最新版的话呢，它确实勾选的那个自动编译，每次保存确实有点自动编译，但这个组件这一块啊，这个用上去之后啊，你得自己手动点一下这个重新编译，要不然他有时候他真不好用啊啊所这个坑的话让我踩了很久啊，我还以为一直以为代码有问题是不是啊，好了，这样的话别忘点一下编译就可以了啊，那这样的话呢，我们就好用了，那接下来咱们再把那个头像列外坑这一块啊，把它放在这个view里面吧，啊view好了，把这个信息给它。

点进去，然后咱们再在这里面放上咱们的这个image image s RC，等于好了，Image SR咱们可以写成什么呀？是不是里面还有一个item.room咱们的这个信息啊，头像信息cover吧，是不是放在这个字段里面，点cover属性里面啊，你也可以在这里直接看这个啊，我们数据库中是不是点cover啊，下划线cover room_cover是咱们的图片信息，来一保存之后，你看cover这张图片啊，看着这找的这张图片还真的不错啊，对应的这个名字铁锤啊，然后这个钢带挺像诸葛山针寻传翠花，好，这样来说的话有了啊，咱们简单的把这个布局的话呢，给它写一下就可以了呗，对吧哈，因为这块内容确实简单啊，咱们把这个图片首先给他改一下这个图片的一个模式，给它Mo改成这个wide是fix啊，我们这个模式啊，就是宽度固定啊，高度的话呢，自适应的这样一个。

式，然后接下来咱们再给他设置一下我们对应的内容呗，来给他一个class it home，好，咱们在这里对于他开始加样式啊，Class I home，我看一下怎么去写这个样式，咱们让他这样呗，让他占这个什么50%的这一个宽度啊，加点PA定，但一加了PA定之后呀，是不是这个盒子的话呢，就超过了我们50%了呀，所以我这样用一个box塞，然后变成border box，变成这种收缩的内聚的这个盒子啊，咱们所有的怪异盒子嘛，Box塞ing啊，然后让它浮动起来，每一个都浮动起来啊，然后再让里面的文字的话呢，咱们进行一个什么呀，居中啊，其实现在这个文字的话呢，已经很听话了啊，大家可以看一下，就这个图片不听话啊，为什么图片不听话，因为这个图片的宽度的话，它有一个默认的宽啊图片这个图片它有一个默认的宽，所以我得修理它一下，我要把它这个宽度给它改成什么220PX吧，一保存之后这个图片就已经很听话。

大大家然后让这个图片的话，咱们给它加上一个圆卷呗，Border radius正好给它切成50%，诶这样的话呢，诶我们这个图片的话就放在这儿了啊啊这样的话就没问题了，咱们可以把这个字体颜色的话，你改不改改改一改也都行啊，我们item下面的这个view的这个字体颜色的话，改成这个灰色的啊，这是我们的几个人的信息啊，不改也行，对吧？啊这就是我们直播广场现在啊，除了我之外的其他人的这个信息，铁锤啊，钢带诸葛山真还有轩辕翠华这一些，那另外你可以看一下，在刚才这个过程中，咱们其实啊，直接把所有的信息写在这里也行，但是用了小程序的这个组件化之后，感觉还是挺好的哈，组件化开发，那对应的我们便利了N个组件啊，在使用组件的时候需要注意一下啊，我们对应的啊这个地方。

你得重新的给它编译一下，要不然你光写完之后不编译呀，它有时候识别不出来这个属性啊，你弄了半天，你这次也点不出这个属性来，好吧，就是这一个，那将来咱们一定要还要想到一个功能呀，就是我们将来还要什么点铁锤，点钢带，咱们得对应的进到他的直播间，所以咱们才能拿到他们的这个信息才可以，所以点的时候咱们要在哪去处理啊，是不是我们这个组件的设计就应该能够复传子，那刚才这块算是咱们的父传子传给他了，这些属性到头来咱们点完之后，咱们还得来一个子传父，再回来把当前点的这个信息给我，对吧？哎，因为咱们可以直接的在他身上绑定这个点击事件棒的TP，咱们哈到TP咱们很正常很简单的就可以在这一块，咱们给他写好这一个事件来在这里咱们写好，诶写在method里面哈，写错地方了，写在method。

这里面写好它，咱们可以很轻松的在这里通过这4.item拿到当前点击的这个信息，轻不轻松呀，来点一下试一下，一点之后拿到了吗？大家居然说没有handle table这个方法，重新编译一下吧，他现在连这个方法它都识别不出来，好点一下大家可以看一下，哎哟，我这一次点这个我这个事件的话已经执行了啊，我现在点这个item这个方法，这一次点在示这个属性名字是吧，没写这个属性名字试件好用了，还有一定要注意啊，别忘了重新的编译一下啊，好了，编译完之后再点一下，你看这个信息完了又得重新编一下，气死我了。好了，这样来说的话呢，再点击，大家可以看一下是不是有了这个信息的呀，你是把你的ID还是把其他字段回传回去，那我不管，反正我现在拿到了，那接下来问题就是咱们不能在这跳转页面，有人说在这跳转页面得了坑你这不行啊，你组件是干什么的？是替你附件分忧的。但你不。

能越权去干这些事情，就咱们的思路就是子组件啊，就是一个傀儡，我让你干什么对吧，让你渲染什么就渲染什么，有事的话呢，还得弄回来我副组件来处理，可能这样的话，咱们就来一个子传夫的流程，子传夫的流程就是在咱们这个地方。

咱们可以怎么样帮的evet这样一个事件含到EVENT，也就是说我给我的孩子啊，除了传这个属性，我还给他绑了一个自定义的事件啊，棒的ABC都可以，棒的是固定的啊，EVT是咱们随便写的，然后在咱们的副组件中，然后我在这里我准备写一个喊道EVT，我这样呗，我写在我的最后喊道EVT，将来我在这里写这样一句话，副组件定义好不好，所以我现在相当于给我的孩子传了item这一个属性之外，而且我还在这里的话呢，给他绑了一个自定义的事件，等待我的孩子通知我触发呢，那这个孩子怎么才能触发绑了这个使劲呢？另外是不是通过this点儿什么呀，一点咱们就进行一个吹歌event固定的方法，ET这。

块是有规律的，你在这里的话呢，写的棒的EVT，你这块trigger的话就只写EVT，你要写棒的A，在这里就写一个A，触发这个A啊就行了，然后在这里再把我们的这个属性点我们的item给它传过去，那这样的话呢，只要你现在点它，它就会打印这个，咱们给它注掉，然后的话呢，会通过我们的子传付啊，小程序的子传付方案trier e VT啊，把我们的自定义的事件进行触发，并把这个值传给他，而我们的附件中已经监听好了EVT回调函数到event，所以这样的话，附组件就会在我们这个地方执行这句话，最终咱们还能拿到传过来那个池能，诶咱们在这测试一下，诶，我建议你哈，写完了之后一定要重新编译一下，因为你刚才改了不少这个components的代码内容的，所以说一定要重新的编译。

编译来跟客户来试一下，重新编译一遍，咱们来测试看好不好用呀，来在这里点一个铁锤，点一个钢带儿，对吧，学员催化都没有问题，而最终那个信息在咱们的点detail里面，所以我通过event.detail就拿过来我子组件传给我配置这个组件的这个详细数据了，点击之后拿到了吧，拿到了吧，拿到了吧，哎，为了咱们下一步啊，去往直播间进行跳转啊，咱们已经买好了伏笔，做好了铺垫，因为这些信息啊就够用啊，虽然这些信息没有一个能直播的，因为这是假数据嘛，里面的room stas我给他零了啊，到时候咱们再说呗，好吧，就是咱们这一块，很明显我成功的把它给分离成了一个组件啊，然后你一定要不要忘了哈，重新编译，重新编译啊，这个事儿，那接下来咱们再来看一下，咱们这样在这个基础之上那个列表数据你。

不能说我这个一进来之后，这个列表数据就这点数据，咱们再给他一个可以更新的方法，那这样的话，咱们这样让他支持一个下拉刷新，每次下拉刷新这个列表就重新呢获取一下呗，啊所以咱们让我们的小程序支持下拉刷新这个功能怎么做呀，只需要在当前G文件中，咱们配置一句话叫引A，太简单了，我按上了小程序一下拉刷新之后啊，大家可以看到那几个点在这转啊，那可能看视频的人觉得我眼花，那么坑们啊，其实我也没看见，我就在瞎说啊，主要是因为咱们这个背景色啊，正好跟那冲突了，所以我们应该改一改这个背景色啊，在app.j中的话，是不是在咱们这个background t style中啊，Light嘛啊，正好跟它一样了，你给它改成一个darkck就行了啊，大CK暗黑颜色啊，暗黑天使啊，咱们可以看一下，此时那个三个小点就能看见了，那这是咱们关于这个下拉刷新这个。

点的这个小小的问题啊，在这里小程序中都有相关的一些配置，大家都可以啊，再去看一看，咱们就不再在这里再浪费时间去给大家去找这个文档了，那接下来在咱们的类务list中，我一下来的时候我得办事啊，是不是就在咱们的啊，Put down refresh这个方法中要列外，然put down refresh就是我们当前页面下拉的时候呢，一个监听回调函数，我们就在这里调用我们的this，点我们的这个get room类似再获取一遍，好，在这里咱们可以试一下啊，如果证明已经触发了呢？就如果这个时候弹出来了我们的这个回叫函数啊，呃，好像没有触发的样子哈，我知道了，又得重新编译一下是吧？如果能弹出对话框来，因为咱们每一次发贾克斯请求啊，都会弹出一个对话框来，要能弹出来就说明这个请求发出去了，但是其实大家会发现这个对话框很消。

就说明这个数据很快取回来了，但是这个三个小点还在转呢啊，因为咱们小程序默认啊，在这个模拟器上是两秒钟在手机上它就不会消失啊，所以这一定是一个bug对吧？那咱们在这里处理方案就是等我数据完事之后，我应该让这个楼顶框怎么样，这块上面这个三个小点回去啊，不要在这里就stop停止，你看不要在这再进行这个三个小点动来动去的啊，给它停止掉stop掉就可以了啊我们在这怎么去做呀，咱们是不是在等着这个这个结束了呀，那这个get room list的它是一个异步呀，啊在这里怎么知道它结束了呢？大家可以看一眼哎，在这里request它是一个promise，那你说我们可不可以直接让这个get room的这个返回一个promise，对象你想等将来数据完事之后，这个点Z执行了，而咱们在这个后面所接的这个点，它也一样的会兑现。

承诺，最终我们在这里就可以来做我们想要做的工作，就是一个stop pull down refresh这一个方法，另外来看看这里啊，我们在这里的任务啊，一下拉之后咱们开启这个开关呀，简直是轻松不行了啊，毛毛雨洒洒水开完了开播之后，我们通过这一个一下拉回调我们的this get room类似的这个方法，它返回值是一个promise对象等前面那边我们的request成功了，Promise兑现承诺了，咱们这边的点赞也会兑现承诺，我在手动的调用stop put down refresh，停止下拉刷新功能，你说这次是不是就好用了呢？为了防止我再出叉子，我现在就给它编译一下啊，这个小程序确实有有点有问题，这个新版的这个开发者工具一刷新之后感觉怎么样？诶诶，这就是我们的这一个加载这个。

要少一条数据，多一条数据，那我们就可以得到最新的这个直播间的这个广场内容是吧？啊一刷新就可以了嘛，诶将来咱们再把这个在线和不在线的状态也给他加上去，哎，是不是就感觉哎呀很靠谱这个事儿啊，好了，就是咱们小程序直播广场这个列表这一块儿，那剩下的就是咱们把我要直播这块给他做一下这个布局啊就可以了啊就是我们也说了，我们将来上面这块列表是别人的，咱们可以去看下面这一块的话呢，是我这个人，我当前登录用户，我要发起直播，我们给他留一个小按钮就可以了，列外这个小按钮的话呢，我们给大家放在这个image文件夹下，里面有一个叫live.pg放在这里了，哎，到时候一点它就可以了，好吧，所以咱们现在就在我们的live wxm2中，咱们把这个小按钮的话，咱们给它布局出来。好在这。

这个地方呗，这块是咱们的这个什么底部直播按钮这一块啊，底部直播按钮，底部直播按钮，好了，咱们在这里的话，咱们开始写一下view view。对应的这一块，咱们给他一个class class的话咱们给它一个live button，然接下来的话放一个什么呀，Image s r c，就等于我们的斜杠image下面的点P啊，我的mode模式的话呢，还是给它那个fix这一个模式啊，这就是一个小的view啊，点我啊点我啊立即开播啊这样一个小功能是吧？好了，我期望的是这么想的哈，就是将来我一这个呃，看到这个点我之后，对吧，你这个字必须得写出来，要不然人家不知道这个是点的这个开关的意思啊，我就可以点击就直播了，咱们给它放在底部这一块，所以我给它做一点定位就可以了，所以我在我的live类似的WXS中的话呢，咱们可以呀，写一点样式的来，对于这个点live啊，咱们给他设置这个定位，咱们给它position，给它来一个定。

正定位为Y是100%，然后对应的我们的left是零啊，Bottom也是一个零啊，我们T的还是老规矩，设置成我们的CENTER1保存之后，你看看这种感觉上的话呢，已经可以了，对吧？让咱们在稍微的对于这个image的话呢，设置一下它宽度啊，别跟上面一样宽，让它小一点吧，150RPX让它小一点，对吧？然后再对于这个字体的话呢，咱们对于这个view的这个字体，哎，咱们也给它设置一下，比如说这个color的话呢，给它一个green灰色的这一个颜色呗，啊然后放size让它小一点，放size也没必要这么大，放size咱们给它一个14PX，哎，字的话呢，变小了啊，然后这一块的话呢，好像还是不够直观，人不知道点这个要执行直播，所以我们可以这样给他做。

这个动画啊，大家之前也看见了哈，在这里的话，那个动画这个一会儿放大一会儿缩小的啊，其实就这样，这个给你一个什么提示啊，说快点我呀啊，那咱们在这里来复习复习啊，特别简单animation啊，咱们可以利用我们的animation这个属性，给我们这张图片的话，加上一个小动画买animation，让它是五秒钟啊，然后0.5秒吧。然后让它无限的执行啊就可以了，好了，接下来我们就可以在这个地方通过我们的key frame关键帧动画and key frames my animation my animation啊，然后我们可以通过就写两个状态，我觉得就够了吧，咱们也不用按照那个针分成零百分之十的，就写一个from to就得了啊，From的话呢，这一块就是transform，我们的skill，从我们的原来的这个一啊，然后放大到我们的这个1.2啊，你要是想放的更大一点的话，你可以从这个什么呀，从0.8啊到这个什么呀，1.2啊，这样的话呢，好像给你的警号啊，更加的明显啊，这个告诉你快点我呀，立即开播，但是我感觉怎么说公害呢，这个啊，咱们咱们是不是这个动画在执行的时候啊，0.5秒钟就重新执行一次，又从0.8开始。那其实我们可以让他向。

呼吸一样，从0.8到1.2，再从1.2再到0.8，再从0.8再到1.2这种是吧？啊在这就是一个关键帧的一个用法，有一个叫什么呀，是不是这个啊alternate啊，我们这个双向运动的啊，重复的执行是吧？啊我们先正向，然后的话呢，我们再重样呢，再来一遍，所以大家可以看一保存之后，诶我们这个就有规律了，你先从我们的0.8到1.2，然后它再反向的再从1.2再到0.8，这样一个循环的这样一个模式啊，就是给我们感觉啊这个东西啊，你说你赶紧的点击进行开播吧，啊所以在这啊就可以了啊，我给它换成一吧，怎么这个0.8好像有点小对吧，这样就行了，不要晃动的幅度那么大啊，这样就行了，告诉大家赶紧点我，点我的话呢，就能够进行我们的直播了。

哈两位关于咱们这个直播广场这个页面啊，咱们就差不多了，那可能在最后呀，咱们把这个过程呀，给大家简单的总结一下啊，其实在这个页面呢，构建中啊，倒没有太多的新的技术啊，都是咱们现成的小程序的技术，无非是写了一个请求啊，存了点数据库而已啊内容不难啊，咱们通过一进来先进行奥斯认证啊，奥斯认证通过之后啊，我们然此方法执行完之后，我们再自己去get我们的room类似的这个呃方法拿回来整个的这些列表，拿到这些列表之后，我们分别的哈，把除了我的存在一个地方，还有我的存在一个地方，因为将来咱们里边有推流地址和咱们的播放地址，咱们得用呀，哎，存在这个room类似的中，咱们利用了小程序的组件，咱们构建了一下，呃，组件化开发，创建了N个啊这个直播项出来。

哎，当然这些数据一开始是伪造的啊，没有关系，后面咱们会有真数据的，哎，咱们就把它给辨列出来了啊，然后我们这个点完之后还能拿到，此时知道是谁点的，其实就是父习底下小程序的父子通信而已呗，啊然后底下这块的话是有一个直播按钮啊，咱们在这故意让它放大这个效果，这样的话咱们点的话，咱们就自己进行开播啊，然后咱们为了让直播广场的数据啊，能够实时的更新一下啊，咱们在这里就可以自己手动刷新啊，就能获取最新的直播列表的数据，那就可以了，那大家说那如果我们在手机上，咱们要想真机的测一测呢，因为有人就是说客们假数据不太靠谱，将来怎么的，咱们也得有两个真数据，这样可以轮回的来看你的脸对吧，让我来进行直播嘛，所以咱们在下一小节啊，咱们决定去试一试啊，就是我们生成一个预览的二维码。

牌，然后在科文的手机上去扫一下，扫成功之后这块应该也会有科文的一个账号，一个新的账号显示在这个位置上啊，咱们用真机测验一下啊，但列位你也想，如果要用真机去测的话呢，咱们那些安全域名是不是就得校验了呀，那对应的我们这些云函数是不是也得进行部署了呀？啊所以这一块内容的话呢，也是有很多小细节咱们需要注意的，好吧，那咱们在下一小节再来具体来说，这一块那位可以先自己啊去试一下。