00:00
好了,另外啊,咱们这一节把我们的聊天区啊,咱们进行一个优化处理啊,就是呃,每次新消息来,它能自动的滚到这个最后面,诶,这是我想要的这个效果,那这会儿的话呢,列位一定要知道我们sc view的强大之处啊,这也是为什么一开始我就推荐大家呀,去使用咱们的sc view啊,我说这个东西很强大对吧?好,咱们来看一下我们小程序的文档,它里面是不是有对于sc view中有个叫scll into的这样一个属性呀,咱们可以去搜一下。Sc view,哎,第一个啊,第一个就是对吧,就他嘛,好点进来之后,列位可以看一下,里面应该有一个scll into view,你看一下这个sc interview的话,你给它附上一个值,这个值可以是某个元素的ID,但它不能以数字开头啊,一定要注意哈,然后设置哪个方向就往哪个方向滚动到该元素啊,所以你可以往你的SC中套几个view,里面设置ID属性,然后再配合上它就可以了。那这样来说的话,就是我们首先要在这里放上一个scar view,然后这对于下面这个子的这些孩子的话呢,每一个孩子都得给他们放上这个ID,这样的话,你把那个对应的ID给我扔进这里来就行了,大家也知道这个ID值他不能是写死的,这样WS放便利的时候,咱们其实每次便利出十个八个来啊,这个很多的这个view,咱们要想让他滚的话,应该是滚到最后的一个ID。
01:36
也就是说我得知道最后一个的ID是什么,我放在这里,那每次啊,我们message改变之后,咱们都得把最新的最后的那一个的ID放在这个score into view这个属性值里面,所以这一块东西它一定不能是写死的,它得是一个状态,对吧?这个地方动态改变了,所以你应该是什么?如果我们在其他的语言中其实很好做,我们就写一个计算属性啊,像view中写一个计算属性监听message啊,每次message改变了呀,我们就把message最后一个数组元素截出来,把它的ID放在这儿,那这样的话,它会自动的就滚到这个地方来,对不对啊,因为我们这个是遍历出了N个来,所以说我们可以在这个scll into这个属性值里面放上我们数组的最后一个ID,那我们就要监听这个数组的一个改变啊,所以在view也好,React也好,是不是都有相应的方案?
02:36
我们可以在这写一个什么呀,这个函数表达式啊,函数小括号调用,那每一次让这个函数计算完了,结果就是我们最后的一个ID就可以了,那这样的话自然而然就能实现这个功能,所以像这个功能的实现,你得知道有这个属性在。其次在这套小程序中如何去写这种函数表达式,你默认写一个表达式直接放在这里,它不执行,它会把这个AA小块当成一个完整的函数名字,他不会去执行这个函数啊,所以在这里我们的方案的话呢,是怎么去做列外,我们在这里是不是在引用一个东西叫WXS啊,这是小程序骨子里的东西,就是他自己的,说小程序的语言,GS语法啊,小程序特有的语法,但这个语法中其实支持咱们大部分GS这种基本类型啊,然后的话呢啊,不支持ES6的东西,所以你在写一个什么 chatroom.WX。
03:36
的S啊,是咱们WXS模块这个使用列为对于WXS如果不会用的话呢,你呀就得去看看咱们小程序的基础视频啊,我给大家简单的去说一下,非常简单,你在这里写一个test,哎,咱们在这里的话return一个一一然对应的把这个模块的话,你导出去点诶export等于这个test,哎,你就可以在你的这个WXM2中的话呢,引用它了,WXSRC指向咱们的点Cha room wx,然后你把这个猫叫指向好了,猫叫的话,我就叫你看你这块导出来这个叫test吗?所以我在这里的话呢,导入进来模块,我故意的也叫test,那我叫AA行不行啊也行,你可以认为咱们这样导出去,如果在GS中导入,用a part来导入,但现在是咱们的WXML,所以用WX这个标签来导入进来,那这样的话放在这里就可以。
04:36
可直接执行了,你看看直接执行一下,给你看看test的来运行完之后咱们看一下这个test的,我有返回值哈,我重新的进行这一个编译一下,我这个路径的话应该没写错哈,啊,重新的编译一下就能找到了,有时候你不编译啊,它找不到啊,点击羊左之后列位可以看一眼,是不是在这里,哎哟,我这个方法的话忘加小括号了,与运行之后你看就拿到这个结果了嘛,咱们就利用类似的这个道理,可在这里要写一个什么呀,写一个我们这个watch message啊这个方法一个是这个什么啊,叫target ID吧,这样get咱们这个target ID获取目标ID的这样一个方法,因为要滚动到这个ID,然后我再把这个他给的ID放在这里,然后我们希望就是你在这里给我写一个方法对不对,导入进来也是盖了他给他I。
05:36
猫叫就叫它引入进来了,叫get,他给的ID导出来也叫它,我们这个本来返回值永远是111的,但咱们不让它永远返回111,咱们需要你给我传递的原始的message,我给你吐出来的,就是我自己过滤完了,这不就行了吗?所以我可以在这里来get他给的ID,这个函数传递的原始的message,我在这里调用我之后,我本来以前写死了,但现在我可以怎么写下,我这样判断一下呗,我判断啊,如果给我传进来的这一个message,首先它不能是空数组,对吧,要是空的话就不行的,如果长度是这个等于这个,这个大于零等的情况下啊,我们在这里再进行这个处理啊,我们在这里进行怎么处理啊,我们就可以找出来那个最后的一个re return出来,然后对应的点减1.id列看一下对不对,是不是message message的这个点。
06:36
Les这个长度如果是大于零的情况下,就是为真的情况下,咱们返回的是它的这个减一长度减一的那个数据的ID值啊,给它吐出来返回来啊,如果不是的话,就默认返回一,那这样的话你想一想,来一保存之后,第一次是那个公告进来,那个公告进来那个东西本来就少嘛,所以在这里它即使是一的返回的是零,就滚动那到那个零上那个地方,对吧,也没有问题,但后来多了之后,大家想想,后面我加了八九条,好像是一旦加进去八九条之后,那对应的这个message变化了吗?这不相当于我们小程序会重新渲染这个模板,会把最新的这个message传进去,这时候你吐出来的不就是我们倒数呃,最后一个了啊,最后一个I的,那就能滚动过去,来测试一下能不能滚,运行之后走有没有用,点击杨左进来大家看一下,是不是看到最后一个了,我成功了列位啊对吧,你看前面还有很。
07:36
多,但是我一进来之后,他就给我滚到最后了,这就是我想要的效果了,另外啊,我就想要这样一个效果,一点完之后自动给我滚到这个最后优化这个处理非常好,而且在这里的话,你也可以让它在什么呀,平滑的滚动,在这只需要加上一个属性给我们的sc view就可以了,这个叫做什么scw with animation,你给它设置成这个触,它就是平滑的,哎,给你滚到这个位置来,那咱们在这测试一下么?哎,运行这之后来一进来它是不是慢慢的给你啊滚动过来的啊,带着这个动画滚的,但是我怎么感觉好像也是一瞬间给我滚过来的哈,啊,在这的话设置成这一个触置啊,就应该是工作的啊,可能在这里咱们这个屏的话有点。
08:24
在这个模拟器上的话,好像看不太出来啊,对吧,在这里啊,因为这个好像闪了一下哈,在这里这个属性的话,应该是干这个意思的吧,咱们看一下在滚动到指定位置的时候的话呢,是不是显示scll with animation,我这个值没传错啊,Sc with animation布尔值设置滚动条位置的时候使用动画过渡啊,咱们这个sc interview设置滚动条位置的时候使用这个动画,那这个触我也穿的对,好吧,大家可以啊,也去测试一下啊,这样来说就达到咱们的这个目的了,嗯,我们的数据如果过多的情况下,它会自动的滚动到最后来进行显示。
09:08
好,接下来还有一个小问题,就是如果这个数据里面这个消息过长,比如有人给你发表了这个爱慕之情啊,说你这个直播的忒好了,对不对啊啊,这也太好了吧,这个直播啊,所以我这个时候可能就发布了很多的赞美之情,比如说我现在在这里,咱们伪造这个数据的时候,就是最后一段数据吧,我在这里啊,特别多啊,特别多特别多特别多,因为咱们现在只有加入群,那没有发消息吧,但特别多特别多的情况下一保存,哎,列位,哎哟,好好,又得重新编译一遍了,哎呀,实在太烦这个问题了啊,每次都得重新编译一遍啊,重新编译一遍啊呀,这怎么了,我们这个调用这个失败,我这样重新清一下这个缓存吧。清除之后重新的编译一遍啊。这次咱们编辑完之后啊,再跟客人家咱们一起来这个测试一下啊,有时候出问题了,清一下缓存啊,点一下这个羊组略微可以看一眼在这里啊,你看看诶不对啊,我们在这里的话,如果是这个字儿它比较多啊,比如说有一个字特别长,我们在这里写的超级长的这种东西,一保存之后的话,这次应该出问题了吧,啊,我们看一下哈,啊单词的话呢,没什么问题,咱们诶这个没事么点诶怎么还点不住了,被挡住了,被这块给挡住了哈,没事,咱们点一下再来看一下啊,是不是这块的话好像就已经超过了它这个长度,你看一下这块就已经出来了,说明怎样?这个单词的话呢,再让它什么break掉啊,Word break加一个属性就行了,所以我想说这块就是如果我们的这个数据啊,过多的情况下的话呢,我们就可以在这里来一个CSS的一个控制啊,单词太长给它break掉啊,要不然这块的话太长了,这个数据是吧,所以坑可以在这个地方。
10:58
啊,在咱们的这个chat room呃,WXS中,对于这个text,这个class的话呢,咱们加上一个什么呀,Word break呗,就word换行,咱们给它设置成这个break杠这个word好了,一保存之后,接下来咱们就能看到这个效果了,对吧,一编译之后啊,自动的话呢,就断开了这个单词了,就嗯,每次这块都会有问题,怎么重新编译一遍啊,咱们在这点击养组在这里列外可以看一下是不是,哎这样的话呢,他就把这个单词给你断开了啊,要不然的话都超出了这块的一个长度了啊加上一个break word就可以了,好了,这样来说的话,我感觉啊,诶这个还差不太多啊,每次运行完之后呀,挺好啊,重新编译一遍,看来我章百度图片取得有点问题是吧,每次都是他最慢,到时候我只能给他换一换就得啊好。
11:58
把这样到最后了就好,嗯,我们在这还得考虑最后一个问题了,就是如果哈,咱们这个人都在聊不聊天室里面聊天,可能这个聊天室里面已经有1万个这个用户了,大家想想每人留一条言,我这个message这个数组的长度,我的天呐,得多长呀,这样的话呢,我们如果数据过多会导致啊我们所有的数据,而且这每一个message这个还不太小呢,对吧,它是一个大对象,将来每个都往这里面插入数据,插入数据将来我们这个message可能这个速度就会无限大,导致我们这个内存被撑爆了啊,所以咱们在想到这个问题,大家可以想想平时看的那个抖音直播间的时候,并不是说往前面啊翻我们整个直播,这个人直播的四个小时,你四个小时之前的留言都能看得到,你是看不到之前的留言的,你每次进去之后,那留言都会少很多的,就他其实每一次都在这儿清除我们的这些内存。
12:57
我们在这里的话呢,可以控制啊,它只能存100条数据啊,如果超过100条就自动把前面的给顶掉,用shift的方法给剃掉就行了派啊,所以这没有什么难的是不是啊,所以我们在这个在哪处理比较好呢?我认为啊,是往拆的room传的时候处理就比较好,就你在live这块往这个chat room传的时候,就把这个message啊,就给它过滤好,你只要这个message数据量大到100,就把前面几块给它shift掉就可以了,所以我认为我们是不是要写一个优化的这样一个方法啊,哎,我们在这里要写一个message的一个优化方法啊,可以在这写一个queen啊排队这个方法,把原始的message咱们传进去,这个方法返回值就是处理干净的行不行,就用这个方案比较好呀,那这样的话,其实我想说的意思还是一样的,在小程序中,它是不支持咱们直接写函数表达式。
13:58
是的,那这样的话,我们的思路就是新建一个WX这一个文件,然后在这里面写好我们的这个message queen这个方法,然后利用我们的毛焦点XPS导出这个方法,然后咱们在这个6G,呃,WXM2中,咱们在这里的话给它导入一下WX。
14:22
Src导入这一个方法导入来在这里的话,咱们应该是点斜杠live物WX猫叫咱们也指向好了,猫叫就指向好我们这一个,呃呃指指定好这个名字叫message queen,那这样的话,相当于我每次运行的时候呢,Message queen这个模块啊,就会这个在这导入了嘛,已经,所以相当于这个模块里面的这个是一个函数,就会执行这个函数了啊,因为咱们WX就是辅助咱们WXM2进行啊模板布局的啊,所以在这里咱们所有的核心代码的话,是不是就写在这里面就可以了,用法也非常简单,把原始的给我,剩下的我就在这里面,只要判断大于100个,我就把前面几个给你替掉就行了,那在这里写一个message来,大家可以想一想怎么写就行了呀,是不,我们写一个for循环就行了,我们写一个for循环,然后基于message Les减去100,然。
15:22
然后啊,我们把那些多余的给他说服掉就可以了,所以这个方法的话呢,还是很容易啊去想到了一个方法来咱们这可以指定好啊,我们在这可以给他指定好我们这个最大的这个池子的长度的话,比如说是一个一百一会儿我可以这样啊,咱们可以写小一点看看,因为咱们现在已经有十件数据的,我可以写小点,咱们能做测试呀,对吧,如果咱们判断一下啊,我们这个message这个这个Les,哎呀,它已经超过了我们限定的最大了这一个长度了,那怎么办?另外咱们只能写一个for循环了,我们在这里头vri等于个零,I小于个,就是我们的message.les减去我们这一个指定的这一个长度,然后在这加加就行了,然后咱们就对应的让这个message.shift服它列外来shift的方法是不是将数组的D,呃前面从前面开始弹出元素嘛,所以在这里判断啊,如果是这。
16:22
个,呃,比它大的情况下,咱们再减去这一个长度,那这样比如说是105,就个减去变成了五,所以这样的话就弹出了五个就行了,如果他不是这个这个没有没有别的大的情况下的话,咱们就正常的把这个message原模原样的给他返回出去,那就可以了,好吧,那就是这样一个方案呗,你现在一运行之后,你可能看效果看不出来,因为咱们现在没有100条数据列外,咱现在这个数据的话呢,一共就十条,你可以这样列外,咱们这样1234567这样,我这样我弄个八吧哈,我数了半天弄了个八,我就最大长度只能存八条消息,在咱们的这个聊天区里面只能存八条消息,这样来说,我们一保存之后,我们可以测一下,另外哎呀,每次这个编译一下是吧,编译完之后呀,好,我们点击这个羊组走,咱们可以看一下,你会发现的话呢,对应的来在这里是不是,诶是不是啊,我们这个消息的话呢。
17:22
就截走了呀,把我们截的就要注意哈,我们这个消息是截的前面的两条消息走了,就是我们最新的,你不能说从倒数开始截啊,我们再把前面那些消息,你看我那个公告已经没了,因为你你已经超过了八条了,所以他只能把前面两个给他这个shift服掉了,所以在这里我们前面来给他说服掉了,对吧,你要在这里你要给我指定好最多存五条消息,你会发现连起目要加入群聊一二这些消息也会被说服掉,所以这块就是咱们指定好到底呀,要存多少消息的这个地方,你看前面这个消息对不对,说服的掉了,只留下了这么几条消息的。
18:00
哦,咱们这里是有问题的列位,因为这个message的长度时刻在变化,所以我在这里呀,每一次的话呢,这个都在改变它,所以这样的话,我这个for循环的这个条件也在改变,所以我们在这儿啊,你可给它单独的存一份啊,Les在这里存起来,然后这样的话小于这个长度就可以了啊,差点出问题了啊,所以咱们在这测试一下来列位啊,我们这里就是我们限定好哈。只有五条,只能存活五条数据,而我们总数据长度我记得应该是个十,另外你可以看一下咱们传进来的总长度应该是十条数据啊,我们的十个消息,那这样的话呢,我们在这个地方已经判断好了,我们要减去的这个是个五,所以说这样会弹出了五个来,我刚才直接把这个方法,把这段东西放在这里就不对的,因为这样的话,Message每次shift的长度都会改变,所以这样我这个for循环shift就不准了,好测试一下这次应该没问题了,走以后我认为只留下五条消息,看一下是不是最新的五条消息,你看看45678,哎,就是五条消息,我指定的是五嘛,哎,所以将来的话呢,咱们这个的话就是存这个什么100条,哎这样的话呢,就生效了,咱别弄五条,只能留五条消息,太近的这五条消息好吧,OK,这样的话咱们这个就确定好了,嗯,最终的话,我们可以来测试一下我们此时这个功能,哎,从这里的话,一进来之后,我们这个聊天区的话,就正常的就咕噜下来了,你看现在所有的信息。
19:29
都能出来啊,我们也通过这一节中啊做了这个自动滚平哎,让我们每次都滚到最后这个位置,所以这也是为什么咱们之前啊就提前的创建好对应的这些ID啊,这些ID创建也好,不但是为了做K,将来也可以配合我们Chad room中的sc view啊,滚动到咱们指定好了这个ID这个位置来挺好啊,这就是我们把处理文字过长这个优化给就一个CSS样式嘛,对吧?啊最后就是我们如果这个消息过多啊,观看的用户过多,看的时间太久啊,发的消息太多了,承包内存了啊,我们可以对于我们这个message做一个优化,所以每次往这个chat room传的时候,咱们这个message都要经过这个池子给清洗一遍,这个池子里面代码非常简单,但是我还出错了,刚才啊,就是我们应该啊,在这里锁定好我们到底要删几条数据,从最前面删。
20:29
对吧,我们在shift啊,所以我们提前的把这个值给取到,然后我们每次啊加加啊shift了一条,Shift这一条,那最终的话呢,就没有问题,咱们给它改成正常的这个100条啊,内存只能放100条消息啊,防止消息过多承包内存这一个问题,你看这样优化的话就做好处理了,好吧,行了,咱们最后的话呢,就把这些假数据给删吧删吧啊要不然的话就放在这儿,这也是有问题的啊,大家也可以自己啊再去测一测,看看咱们这个东西的话呢啊,有没有什么问题呀,对吧?嗯,我们一进来之后,我们只来一个加入群聊这一条消息就足够了,所以咱们现在整个啊,这个直播间里面没人聊天呀,很尴尬啊,但是我们的功能的话,已经做好了整准备,大家的一个检验,好吧,咱们在下一小节呀,咱们还是沿着我们这个功能呀,往下去走啊,列位的话呢,一定不要错过了,好吧,这一小节咱们就到这儿。
21:30
列威害我返场了啊,我这个没想到啊,输了这么多次,敲了这么陀锣,竟然这次返场了,因为我发现这块有个错误呀,这里的话呢,咱们这个sc view,我当时默认给他返回一一啊,人家不允许啊,因为咱们当时在写这个拆的room写WS的时候,我记得咱们如果这个咱们每次返回的是最后一个的ID嘛,那这样如果这个长度压根就是为零的情况下,咱们就返回空字符串得了哈,就这这个啊,返回一个一一反而出错,你这样吧,就返回一个空字符串的话呢就行了啊,返回一个空字符串至少的话,他不招人恨啊,也不会再报错了,好吧,就这一个小问题啊,另外啊,这样的话,我们这个问题就解决了啊,这一次咱们真的要敲锣喽。
我来说两句