00:00
好了,列外咱们这一节来看一下我们用户卡片啊,这一个功能啊,列外你来看一下,我们可以看到哈这样一个界面啊,就是等客文呀,点击咱们视图中的这个位置的时候啊,杨卓或者是头像啊,还有这个昵称呀,或者这个一个粉丝,反正就是一个区域吧,你点击任何位置吧,啊,都能弹出来这样一个界面啊,就在我们的文档中的这个地方啊,弹出来之后会显示是谁的头像啊,还有这个人的昵称信息,还有他的地址啊,地址的话呢,因为小程序这块导致咱们获取不到地址的是咱们在料就写了一个保密的呢,粉丝数量的话呢,在这里咱们就写了一个什么呀,从我们的后台中哎,获取到粉丝的数量,贩S那个接口,哎,贩S就是这个粉丝写在这里,这个到时候去咱们那个send gift那张表中查出来啊,给这个主播啊,就是兔ID是杨佐的时候呢,有多少个礼物点赞的话就。
01:00
兔ID是杨左的时候,有多少个点赞的这个值啊,然后在这里这个主页功能的话,咱们暂时不开放啊,咱们就没跳转到主页的这个页面中了哈,然后点击关注的话呢,啊,就是跟我们之前的那个关注功能是同步的,这边点完关注那边的话就显示呢,已关注一个粉丝啊,这边取消关注那边的话呢,就是关注,然后零个粉丝诶这样的一个变化,要是咱们可以啊,把这个功能的话呢,给完成了用户卡片啊这个功能唯一的好处就是好像一个省事的地方就是咱们不需要跟TM啊有什么交互了哈,咱们也不需要说在这里的话呢,再怎么去做,因为这个关注这块跟那个功能重复了啊,就没有什么新的这种,其实腾讯的这种知识点啊,纯粹的是一个页面功能的一个布局的列位,好了,在这里啊,唯一需要注意的哈就是客文,先提前说一下,有没有人会想说客怎么跟计时通讯没有关系呢?
02:00
你想我在这里假设说我点开了这个页面,那忽然有人给我送礼物了,对吧?虽然有人给杨总送礼物,那这个礼物数不应该实时的变化一下吗?这不是还是跟他有关系吗?忽然有人给他点赞了啊,在这里我认为咱们没必要做出这么实时的这种功能来,你回头看看你的抖音这一块的话,他也没有这么实时点变化,其实只需要我们一个是每次点这个头像的这个位置的时候,咱们去获取一次数据,给它更新一下就可以了,另外你说呢啊,咱们没必要那么实时的,就是说我每一次啊,我都要实时的给它获取一遍啊,我们在这只要这个页面这个打开了之后还要呃监听啊,这么like事件,还有这个什么gift send gift的事件啊,就咱们即时通讯的那几个事件,然好实时的把那个进加一减一的啊,这块的话,咱们没必要去处理啊,因为有人取消点赞了,对吧,或者怎么样子的,这块咱没有对应的事件去处理的,而且没。
03:00
不要那么实时的去啊通知啊,我们的界面的一个更新啊,所以咱们在这里也可以呀,什么呀啊,只是我们点开了之后啊,然后咱们获取一遍数据更新上去啊,然后我们等关掉这个页面的时候,等下次再进来的时候再获取一次就可以了啊,所以我们可以这样来去设计啊,我们这一块啊好了,那接下来咱们就可以按照我们的思路来,咱们分为两部分啊,第一部分的话呢,先把接口给写好,第二部分的话呢,咱们再去做我们的这个啊页面布局啊部分啊,因为接口这块,咱们好像如果将来要用数据的话呢,咱们应该少这个礼物数据,还有这个点赞的这个数据啊,我们都去我们的后台中把这个数据咱们给他获取回来啊,那在这儿咱们就可以接下来就去可以去写了是吧?嗯。我们来到我们的后台中,在这里大家可以想一想哈,我们这块怎么来去获取我们的这个数据呢?啊,我们一样的按照之前这个思路一样的,其实就在这里啊,特别简单,这一块只要照着我们之前这块来就行了,来拿过来拿过来啊,我们无非是CI来的,这个表的话呢,是来自于啊,不同的啊,我们在这里找一个这个的话,咱们比如说找的是这个点赞的这个数量,所以我还是select count星号,然后作为一个临时的这样一个count啊别名起了一个别名,从哪张表能从咱们的Les这张表中去取的word ID啊,那么to ID就是我们这个主播的这个ID,咱们拿出来之后的话呢,咱们就给它复制成咱们的什么Lex,嗯,Lex这里好了,那接下来同样的这里获取的话呢,就是从咱们这个S的下划线GI的这张表的啊,然后我们在这里也一样的是我们的主播的这一个ID啊,然后最终的话拿出来放在咱们的这个次,哎,这里面。
04:53
哎,最终的话,咱们把这几个数据的话都给它返回出去就可以了,所以我们在这里send的时候呢,我们可以啊finds就是一个,然后这就是like的话,咱们就是likes点咱们的这个count,然后再就是啊,我们的gift啊,就gifts我们的点count来列位看看这里对不对啊,为什么这么来调用呀,来是不是我们likes,咱们拿到了画是一个什么count冒号的这样一个对象结构,所以我的点count才能取出来啊,就跟当年的那个范字呀,是一模一样的,那这样的话我就保存之后咱们来看一下对不对啊,咱们现在呢,来到我们的这个代码中,可们咱就得重新的编译一下,咱们再进来的时候,咱们获取的还是这个叫get user接口,当时我就说了,咱们在这里呢,就是要复用这个接口好,进来之后咱们看一下到底能拿到哪些数据呢,你看里面有没有。
05:53
对吧,我们在这里是以呃,作为杨左有一个粉丝,八个点赞的11个礼物啊这里,然后现在是以关注状态,都是我们这个接口返回来的啊,其实大家也可以去自己去查一下数据库,看看自己的能不能对上号啊,是不是对应的是八个点赞的啊,你看从七到14嘛,是八个的嘛,那这就是我们四的gift,到底是不是我们的这个12个对不对,这样的话呢,诶,我们这个gift的是不是中间的话呢,被坑删了一个呀,怎么删了个七啊,所以说应该是11个啊,11个礼物没问题啊,所以这样的话,就是咱们这个数据的话呢,是统计呢,是对的,那接下来咱们就是来简单的诶来看一下我们这个页面的一个功能了,我们这块用的还是我们的半屏组件啊,咱们在VUI组件库里面的,所以客文先把这些东西咱们给它先关闭一下,然后在我们的live务WXM2中呀,来客在这里写一个什么呀,用户。
06:53
卡片,哎,我们用的这个组件就是user card,当然这个组件你说看们咱们还没写呢,那接下来咱们就来写写这个组件呗,来在user card这个我们在component文件夹下,咱们新建一个文件夹叫user card文件夹,在user card文件夹下咱们再新建一个组件叫user card这样一个组件,然后在这个组件对应的我们在Jason文件中live了JA中,咱们再把这个叫user-card组件,咱们给它引入到我们当前的配置这个组件里面来点点斜杠,Components我们的user card,斜杠的user card这一个组件,好,我们在这写好了,对吧,没有问题吧,我们对应的这个,诶,我这个是杠,是不是好杠,保存之后。
07:47
完活,那接下来的话呢,咱们一引入一进来是不是能看到我们的这个UC卡的这一个组件啊,哎,又来了,再清一下这个缓存哈,每一次都得抽个风啊,重新编译一遍之后啊,咱们再次进来看一眼这个效果啊,编译这么慢慢重新编译一遍,重新完了,我感觉又看到刚才那个可怕的错误了啊,我要再出现那个错误又得重启一下了啊,看到这块了啊,我估计这个现在这个点不出来了啊,你看我再给你演示一下,如果关闭了之后的话呢,再重新的点开啊,这次编译就没有问题了,大家这次眼睁睁的看见科呀,是怎么出现了这种编译错误,然后又怎么解决了这个编译错误,就重启了一下,重启了一下,来重新编译一下啊,不让这个小新的这张图片出问题,然后再点击这个养组,你看这次就没有那个问题,点击这一块就能正常的渲染出来了,好了,这个组件也已经渲染完了,咱们在这个。
08:47
组件中咱们借鉴呢,就是当时点,诶这好是他的呗,那么就附用他这个呗,啊这是咱们当时礼物这一块是吧?哎,我们的room GI的这块,把这个叫半屏这个给它复制过来,粘到你的user card的Jason文件中,好粘过来之后咱们也一样的在这里面来使用这一个组件,我看他当时是怎么用的,我也来借鉴一下呗,啊在这里把它给复制过来,来到咱们这一个user card的WXMMR中,咱们给它替换一下,再来一个闭合这一个标签好了,接下来在这里这个show这一块,还有这一块列外啊,这个是写成什么,这个title我认为都不用了,因为咱们一会这个title是那个头像,咱们要这样啊,这一块的话是用一个头像,所以你得用插槽,因为它这里写的只能是个文本,对不对,所以咱们删了这一块,将来你能弹出来东西,你得能弹出来东西啊,咱们到时候用怎么来插擦。
09:47
牌来去设置我们的这个头部部分,来设置我们的描述部分,来设置我们的button这个部分,好在这里这个瘦这一块有人就想了说科文,哎,我准备哈,哥们在这里这么想的哈,我这个授的话也跟之前那样去控制啊,就是那边传处啊,咱们这个就显示出来,那边传false啊,这边就显示出来,那这个思路是没有错的,但你要注意了,那你就要在每次点击的时候,就点击我们这个头像这个位置的时候,就要及时的获取一遍最新的数据,再传给这个组件user看组件,然后这个组件再次进行最新的这个渲染啊,这是一种思路,还有一种思路就是我们让这个组件一开始就是设置成永远是true,但只不过这个组件它不被创建,这个组件它不被创建,一开始,直到我们点完这个之后再被创建,所以我们将来在这个组件里面自己管理自己的获取数据的业务就可以了。所以我的思路啊,就。
10:48
就是第二种思路,一开始这个组件它是不创建出来WXE是false的,等我点完了这个头像这个按钮之后,我把we的话呢,我给它改成这一个触这一个值,这样的话,这个组件就被创建出来,在每一次创建的时候呢,我就来获取我们最新的点赞数,最新的粉丝数,最新的礼物数,要再渲染出来,等我叉掉之后的话呢,我再把它WXE服再给它改成这个false,这样的话,等我再点开,再它会再次创建这个组件,所以就在每一次创建这个组件的时候,再获取最新的数据,这样就能保证我说的之前说的啊,咱们每次点的时候拿到的是最新的数据,像这种时效性就已经是非常好的了啊,没必要说啊,我们在这儿监听的啊,喜欢监听的GIF的这样一个接口,然后每次来都要实时的更新,没必要啊,所以这是科的一个思路。但这块的话,咱们。
11:48
允许不同的声音的一个存在,好吧,保存之后呢,接下来诶不是在这保存啊,点错位置了哈,保存咱们来到我们的这个6WXM2中,所以它应该是这样的哈,WX来控制的,它通过的是W冒号if,大家知道这是一个条件染,如果为true的话才渲染,如果为假的话呢,就不渲染,所以咱们在这写一个if a user card的这一个受这一个如果为处为条件为真才创建出来为假,它是从这里面给移除了,所以这个值的话呢,咱们应该是通过点击room hi的那一块来进行控制,那这个值一开始那自然而然的它一定是一个false这样一个值,所以在这里看看初始值,哎,就要给他一个false,我们的用户卡片,他一开始是不创建的,等我什么时候创建呢,就等我点了这个room海ER。所以我在这里给我们的room海。
12:48
这的话,咱们绑定一个事件,绑定我们的user card,哎叫show吧,Show user card,然后hand到这个show,我们的user card这一个回调函数,咱们把这个回调函数在六五.gs中啊,咱们提前呢,给它定义好了,受我们的user card,它就控制我们这个data,哎里面这个is show user card给它改成true,那列为你想一想,现在在咱们的6WXM中啊,咱们在这个hi的这块监听的一个自定义事件,并且做好了回调函数,回调函数一旦调用的话呢,就会将这个值设成true,它变成true的那一刻,我们这个用户卡片组件就会被创建出来了,另外哎,所以就是它这一块了的列外,你这块你想怎么去处理呀,对不对,只要被创建出来,你再去取数据就行了呀,所现在就是在咱们的入门还中,我点。
13:48
我点这个哪个位置的时候,来咱们来看一下,当客们点这个位置的时候吧,就是我们图片或者是下面这一块的位置都会触发咱们这一个事件哈,棒的TP啊,棒的TP咱们怎样那个卡片啊,怎样它显示出来这个对吧?Hand到啊,Hand到这一个什么受hard啊,回调函数,当然咱们这个组件的话,你不可能在这里让它去显示,咱们只是来一个词传复,所以我在这个回调函数中啊,在咱们自己的had JS中啊,课文写好啊写好无非是触发一个这次点trier引问,它就触发咱们当时在这个地方监听的这个回调,回调的名字叫什么show user k这样一个自定义事件,所以我在这里就是啊,在我们的这个里面吹一个这个事件,那大家可以想一下,只要课文现在啊,一点击我们这个微。
14:48
这图片或者view这一块,咱们就会让我们这个授card的调用,而授card无非来了一个子传付,子传付的目的啊,就是让咱们在我们副组件中监听的回调被执行,这个回调的话,就干了一件事,将这个is car show改成true,那这样的话,我们下面这个user car这个组件它自然的就能被创建出来了,好了,一保存之后来吧,列位啊,接活了啊,咱们来看一眼啊,在这一点击这个羊组之后啊,咱们来试一下啊,看看坑点上面这块位置点羊祖对不对,你看就没有问题了吧,诶你再点一下这个图片就有问题了吧,为什么呀,因为你第一次点出来之后,你拆掉它,它只是给它改成了隐藏了,你应该让这个节点彻底的被移掉,等你再点的话,再出来好再次获取最新的数据呀,所以。
15:48
我们应该对于他身上的话呢,咱们也应该绑一个事件,为什么要给他绑呢?是因为在user card的这个里面的话呢,这个半屏呀,它有一个close这样一个事件,你点完它之后,咱们就回调它,你点完这个小叉,这个回调函数就会被调用,这样的话呢,咱们再来自传复,再通知附件,把那个受那个true的给它改成false就可以了,所以你得知道啊,它就有这样一个事件叫B的什么呀,Close,你查文档也能查得到啊,一个叫b close的这样一个事件啊CSE,然后咱们来测试一下,在这个card GS中,咱们写一个,你先看一下我点击这个小叉号,它能不能触发它对不对,你要能触发的话,你不心里就有底儿了吗?来保存之后啊,在我们的WXM2中B的一个close,哎哟,我这个close是不是写错了呀,Close,诶CL SE close好测试一下来。
16:48
重新编译一遍,咱们来到这个杨组这里面,好点一下,出来之后点一下这个小叉号,诶,我这个视件居然没有触发,看来课文这个单词呀,还真的记错了,你还真的去查查这个文档了,看有没有文档这里啊,怎么没有给我这个文档的一个提示呢?那我得自己去查一下这个文档,找到我们的这个简易的小程序,然后找到小程序中的平台能力啊,平台能力这块有个扩展,扩展这里的话有个VUI组件库,VR组件库的文档啊,所以你并不要去记这个地址,咱们就能找得到啊,咱们要的是一个半屏的,看他这个事件是什么事件呀,是小写的吗?小写的看到我画蛇添足了啊,我在这里给它改成大写的了,好了,这样来说一点完之后的话呢,咱们就能够触发这个close这个事件,那触发了这个close这个事件之后,我们就在这里面的话呢,咱们无法控制让它自己消失,因为想控制user。
17:48
他的组件销毁,咱们得让副组件来做,那它只能出一根event,哎,找咱们副组件的这一个就可以了,所以在我们副组件中,咱们也定义好,那在类用WXM2中,你给它啊绑定好这一个,等将来你点里面那个半屏的那一个啊,让它close的时候啊,它会触发我们的吹ER event啊,这样的话,我们在附件监听的close事件啊,就被触发,我们在对应的回调函数中来列GS中,咱们在这里写好对应的回调函数,Close的时候,咱们就将这个列,咱们直接就给它干成这一个什么呀,False就可以了,User card show,咱们给他一个false这样一个值,那这样的话呢,就能够满足啊,咱们点开一次啊,然后第二次还可以啊,再次点开,看看这次功能好不好用嘞,点开之后,咱们再点开叉掉好,叉掉之后呢,你可以再点开啊,因为你每次。
18:48
都是让这个组件创建和销毁的这样一个过程的啊,这样的话就对了啊,因为点叉号它会先触发咱们引用的那个组件的一个回调啊,在咱们这个回调函数中的话呢,咱们再吹一个负组件的这一个,那这样在附件监听的这个就能触发了,所以在附件的回调函数中来控制的true和false,这样让整个组件进行销毁啊,这符合咱们组件的一种开发的理念。
19:18
那将来的话,咱们就得user card这个组件中,大家也知道user car组件中是不是它有自己的生命周期啊,那每一次就在生命周期创建的时候的话呢,咱们就来获取这个数据,因为你每一次这个WS是true create的生命周期都会走一遍,因为咱们走的就是创建和销毁,所以生命周期中的create每一次都会触发一遍来测试是吧,这样的话大家就心里有底了,哎,点开到时候获取数据更新在这里,然后叉掉,点开再获取最新的数据,然后再给它叉掉,再点开获取最新的数据,哎,这样的话,咱们每次点开的时候拿到的是最新的最全的这个数据了。好了位,那对应的接下来就是咱们在user看的这个页面中,具体咱们怎么去做页面获取数据,以及咱们更新页面这个过程,咱们在下一小节。
20:18
咱们一起来看一下好吧。
我来说两句