00:00
现在想去搞一下那个表情是吧,觉得表情功能好像很强大啊,来表情功能该怎么做呢?大家看一下我们这个表情功能。啊,现在又包括说啊相关的影响,到时再刷一下。我这里面我们来看一下表情功能是个什么东西啊,嗯,大神一。这是123走你啊看一下什么是表情功能。啊,首先呢,我点击它,诶走里是不是可以输入一个表情呢,表情是什么东西啊,是不是这东西怎么出来呀。啊。对吧,这个表情怎么出来嘞。来,我们来看一下啊,这个不难,其实挺简单的。来啊,说一下这个表情,本质上一个表情就是一个文本,这个字符文本说白了就是串,就是一个特别的字符串。
01:09
可以用作字符串来直接使用啊,各个操作系统都能显示,但是这个这一个word显示的时候有点问题,只能显示一个表情,看到他就对他有想法,别的都没想法,都本来我是有好好一些不同的表情啊,别的表情说白了他就不支持看到吧,就是word不支持,但浏览器都支持。这个你不用担心手机啊,浏览器都支持的啊。那人说,老师,我去哪找表情是吧?嗯,好,这里面有一个在线的可用表情打开。你看。啊,那这个里面呢,有这是一些常用的一些表情的一些,这是分类的表情,这是一些非常什么啊流行的一些表情,这是最新的一些表情,对吧?来我们可以流行的表情,比如说大家想一下这个这是什么表情,看一下。
02:07
就这这也太大了是吧,啊就这种啊,OK,还有这种啊,比如说找这种比较小的吧,这小一点好点,这个是不是挺多的呀。能没有看到啊,这些表情可以复制啊,可以进行复制的啊,复制下来最后就可以让它显示出来,比如说啊举个例子啊,看下C。我的这个chat好,我这里面不有一个失败吗?我再加一个失败,到时候我的这个表情需要点击,所以必须要有一个失败,就这个不需要它了。这就是个表情是吧?只是这个表情好像有点太恐怖了,嗯,有点胆子小啊,用这个吧啊,这个笑脸的表情是常用的是吧?嗯,这个龇牙咧嘴的好像不太好是吧,哎,这个看起来舒服多了,对不对啊,这个地方得说一下啊,他这个action必须要有一个跟标签没关系,我再来一个什么,再来一个是吧,给他包起来。
03:17
有没有看到,诶,来看一下我们的表情。看看出来没有啊,来我们去登录一下。呃,大神一是吧,123走你进去不有了吗。你咋?对不啊,这样式调一下,你觉得是上面下面搞了,左边右边搞了,是不是调一下就行啊,这是简单的事啊好。那下面呢,我们要去做的事情呢,嗯,就是需要去点击它,还要去显示一个什么表情的一个网格列表。
04:04
是不还要能够去显示和什么隐藏对不对,那这个地方啊,有显示隐藏必然需要什么。需要状态。你有显示有隐藏嘛,那必然肯定要状态嘛,只是我点的时候就去切换那个什么。不切换的一个状态吗?对吧。这这能理解吧,啊就我点就显示,再一点就隐藏,这不是切换状态嘛,那也就是说我们首先来个状态吧,因为这个简单,先把它搞了,来个什么一数为默认,为什么默认显示么?不显示那就force啊这个是什么意思,是否显示表情列表可以吧,好。那下面啊,我们要显示一个表情列表,这里面用到一个网格。
05:00
啊,我把我把这里有些简单代码我就拿过来啊,没什么难度来说一下。大家看一下啊,我们这里面呢,有一个,呃,有一个叫G。啊,我直接就把它拿过来啊,我再写了,这里面呢,是一个写在这个这个input下面的。那我这里面是不是需要一个grade,我还没引入吧,对吧,好看一下这个里面,这里面我就不再一个去写啊来这一个需要有一个什么。表情的数据嘛。这个能不懂,需要一个表情的数据啊,需要一个表情的数据,那这应该是个数组。那这个数组需要提前准备好啊。来看一下啊,我们怎么准备啊,这个地方需要放慢,而且这个数组应该在水里面。是不是组建对象?你说这有什么用啊,是组建对象吧。
06:02
对吧,好,而且这个数组必须要有一个啊,里面的元素是对象,对象里面有个text,是这样一个东西,大家看一下就能懂了,这东西没什么文档里面都会去说清楚,大家看一下最终呢,是这样一个结构,每一个元素这个对象,对象里面要显示一个文本啊。Text的属性什么意思呢?来看一下。嗯,这里面呢,我可以利用一个生命周期的回调函数啊,有几个可用的,譬如说你用construct,可以在construct里面去初始化去做一个事情,当然有一个属于有一个方法可能用的少,给能用一下,像component amount,这个在什么之前,在第一次认之前,那也就是说调用润的时候,我是不是已经有了,我不能在amount,必须在amount。这个要知道在什么第一次润执行之前对不对啊,之前回掉,那我在这里面干嘛呢啊,初始化表情列表数据看懂不好来啊,我首先来一个啊。
07:25
那呢,开始站起来。我这边搞些表情去啊,都是些串,哪一些串。嗯,来一个他。啊,但是呢,这个地方这个文本不需要对吧,嗯,再再来几个是个意思啊,我不能这这就不能搞太多了,太多了麻烦。当然你要是写项目,那你多的是时间搞,只要你找到位置了啊,我的天搞一个这个。
08:00
啊,这是啥,天呐,全完全崩了是吧?好来啊,那下面为了能够去显示一个效果,那多搞一些。好,差不多了。好弄好这些以后,但是这个数组不能用,这个数组不能用啊,我们应该哎嗯这样,而且直接直接搞一下得了。可以吧,或者说这个数组不能用啊,这个不能动啊,这个不动,看一下我来写一下啊Z点它等于等于一个什么呢?是等于他吗?行吗。不行,刚才说过这个数组里面的元素有要求,要求什么呢?要求它是个对象,对象里面有一个属性叫TT的值是这些东西。那我应该怎么做?怎么生成那样一个数组了?用什么方法对用卖法,只要大家能想卖法,那就没问题了,那下面我就不问,大家自己写好来返回的是对象,对象里面有T的每一个,诶,这里面就写个V得了。
09:17
啊,就写个字。能看到吗?那不能,那这样的话,我是不是就有emerge啊,那emerge有了以后来继续往下看啊,这啥意思知道不。啊,我们这个地方显示那个网格一共有多少列,能不能,最多有多少列,八列能不能。啊,这个说的什么,最最多有几行四行啊,这个是什么意思,是否显示轮播的效果,也就是说四八三十二嘛,那也就是说我可能是不超过32个,我天我有没有超过32个,那没有,那就再来一条啊这样换这样。
10:23
哎,这里面应该是。多了一些点,因为点在左边的话是吧,那么看到啊,这个也多了一个点。这个总共三个了吧。够了不应该差不多了吧,啊够了好,那够了之后,那就是会形成应该是两两页对不对,就比32多不了多少,肯定是两页,能不能看懂,好来下面啊,下面继续往下看,还有一点小东西啊,比较简单啊,这是干嘛去了,也就是说现在是不是指定一个点击某一项的时候,点击某一项,而这一项。
11:08
就是那一个对象。那个数据对象。哎,那我现在干嘛去。我点他的时候干嘛。点它的时候,你想想看,我点它的时候,是不是要把它的数据保存到那个输入框里面去,要想保存到输入框,必须去更新哪个状态,是不是看。对,不好更新,这怎么更新呢?来写写啊,This件set state大括号,那值是多少呢?是这个item.text的吗?是吗?不能啊,他本来可能是有有有文本的,对不对,所以我先要干嘛。This时间是这点什么?Contain在干嘛?加上?
12:05
是不是在那里,说白了就在后面,再加上你的表情嘛,你不能一上来就把以前的数据给覆盖掉了。能不能?啊,主要是这样一个事情,大家要注意好啊,关键的时刻到了,看看啊行不行,这边要说啊,现在我并没有去做写那个隐藏的限制对不对。我虽然有状态,但我现在他显示隐藏了吗?没有啊,我看一下。哇,是不出来了,哇,是不是可以。对吧,点一下你看挺好的呀,输入一个是不是咔咔咔咔挺好的吧,好,但是呢,我们说过这个东西不能一上来就显示啊,对吧,得干嘛呀啊,得根据状态来去做显示隐差对不对,所以不一定有。
13:03
啊,我这里面不有状态的吗?This时间是state点一秀对吧?哎,它有值吗,对不对。那有值就干嘛,就显示那没有值了,那没有了,你说它不是有没有值啊,是force的话就怎么着,那就浪呗,是不是给你好,那这个时候,那这个时候我们怎么办呢?把这一呃看一下这个给他。放在这里呗,大家看着我怎么写的,你要不按照这个规则写,你写起来挺费劲的,这里面去必须要加个小括号,因为你多行嘛。能不能看到好,而且而且他一上来是默认是隐藏的呀,也就现在还能写什么。不能了,那我怎么让他出来呀?是不是点一下他呀?点他的话怎么办?来on等于我干嘛去?This,时间set state,我直接在那干你得了。
14:15
一只shoes为除五可以吧,那我这里稍微让跟右边隔开一点啊叫marin,嗯,再呃,再写个大marin来一个,来一个五吧,五个像素看一下,跟右边跟这个发送隔开一点,不然的话就会点到发送了。来啊,我们来看一下啊啊来看一下走诶这不对呀,对不对啊。大看我操作一下就行了。是不啊,这是他的一个bug,不是咱的问题啊,跟咱一点问题没有,这是他组件的一个bug啊,而且啊,通过查找那个它里面的一些说明呢,他最后也告诉你一些解一个解急办法,按照这个解急办法去解决就行。
15:12
啊,我们这个地方有一个表情啊,来看一下在这啊有一段代码的啊做一个什么事情呢?来我们在切换显示隐藏的时候啊,如果它要显示了,那需要去异步手动的派发一个事件,那个事件名呢,叫一个什么呢?Reet事件啊,就是那个尺寸改变的一个事件,来解决它列表显示的一个bug。而且需要异步的做,怎么异步的做呀。Set time out。指定为零,我也不用指定多长时间,只要指定零就是一步了,我不用说啊,写个1000,那你想想看,就1000,你点完以后1000才出来。就过完一秒钟才出来,这样不太好,对不对啊,这个地方是一个固定的去写吧,啊我把这个那这样的话啊,有一个事情啊,就是这个是这个就不能这么写了,因为我刚才是。
16:13
啊,大家看一下啊,我们这里面啊,这个写法都不对,不能是指是处是切换对不对,对,不是切法,你不能一点就出来了,再点我想隐藏怎么办呢,对不对,那不就废了吗?所以啊,这里面稍微的改一下,我们来去写下this点啊我叫它什么to数to什么意思,切换开关的意思来,那我们就在上面啊,去写一个对应的呃,回调函数对吧,这个写到很好写就是呃,This the set state是吧,接着呢,我们的值。
17:01
一知数为多少呢?对吧?比如说我可以先取出这个值来,对不对啊,取出这个值来,因如说假设一知数等于等于什么Z点10STATE点一知数,而且我还可以它直接上面一个取个法。是得到最新的值,得了最新的值,接着上面就可简写了呗,冒号给它删了呗,啊写在一起的了。是不是这概念?好吧,那下面有个事情要做,如果当前要显示了,那就按照他的说法,按照他的说法就需要去干嘛呢?异步手动的去派发一个事件,我们来看一下啊,看大家能不能看懂。大家看到啊,异步很好做,Set out。对吧,怎么派发一个reet事件呢?哎,Window它有一个方法回答,以前没用过,叫dispa even什么意思,分发的意思,分发,分发什么世界啊,里面传的是什么,这是干嘛。
18:19
就是这难道不能就你不能去说出它的一个语义吗?你有一个event创建一个事件对象吗?Event不是事件的意思嘛,也就是说第pach大家想分发事件嘛,那你给我传一个事件对象给他嘛,那你说这个参数这个六的时候,参数名是个什么概念?世界名码对吧,你不要创建一个世界吗?创建个世界对象指定了,它需要分发的是一个什么世界啊世界。那这样做了以后来再来看一下,我点。这不出来了吗?
19:01
那后面的事情是不是就好办了,输入可不可以可以吧啊,但是有些小问题,比如说你平常大家有没有注意过,当我去点它的时候,这个还会显示吗。肯定不会对吧。也就是说,当我的输入框获得焦点的时候,这个东西是不是要隐藏啊?这咋走啊?来,我要去给这个输入框啊,输入框在哪嘞。哎,我的在下面我的输入框啊,Input item对吧,它需要去指定一个事验叫什么呢?叫on。或或者焦点focus对吧,等于在这个里面得干嘛去啊。隐藏显示对不对?怎么样隐藏显示啊?Set state给谁去设置值,Is设置什么值,隐藏吗?不吗?看一下。
20:14
啊先我让他啊点一下它是不是显示了,接着我这样没事吧,这样没事,好我准备输出文本走,你挺好是吧,现在我是发呀,好我发。这个位可以,但是还有一个问题,大家看一下,我走走走,我直接发走。为什么?不是平啊,这个收起来呀,其实看得到被他挡住了对吧?啊,被他挡住了啊,所以啊,因为你发完肯定收起来了,对不对啊,在这里面啊,还有一些问题啊,等会再说啊,我们一个一个解决来,现在也就是说发送完了以后,还剩了我去更新状态的时候。
21:07
除了更新它对吧,还要让一只数,为什么。对不对,我们往下看啊,看它行不行,慢点改呗,来打开它走走播放还没点灯啊各位。可以啊,对不对。是不是可以啊,这不就好了吗?看起来好像很牛逼,实际上也很简单,是不是啊,这比咱写的那个要轻松多了。啊,这是这个。
我来说两句