36_尚硅谷_react-ui_antd.avi原创

来我们继续往下看啊嗯，下一个比较简单啊，比较容易做，下一个我们要学的是叫UI。啊，这个其实并不是一个库，也不是个插件啊。啊，我要跟大家说一下，现在比较流行的一些开源的UI库，组件库啊，有两个，一个是国外的，国内的。嗯，这面有一个叫material UI，其实这个单词还是挺难的啊。哎，大家可以把它打开。嗯。嗯，这个呢，它的那个效果有点仿那个安卓系统的一种效果。稍微有点慢啊。就大家知道一下行，因为我们重点不是用它。我们重点是要用design，这个就比较好读了啊and，什么意思？

蚂蚁地震设计啊。它是蚂蚁金服提供了一个UI库。可以把他的官网打开。他设计了两套，一套呢是针对于移动端的。嗯，当然一道是针对于什么呢？PC的啊，有PC的有移动的。但用法呢，很类似啊，用法很类似，因为我们后面要做的一个RA项目呢，是移动端的，所以我们就给大家去介绍它移动端的一个用法，其实用法基本上一样啊，我的天呐，这慢的有点可爱呀。你们别跑了啊，你们就就断开就行。来了。

啊啊，简称什么呢D。啊，奥利就代表是蚂蚁金服的这套啊UI裤啊。那这里面呢，前面呢，都有一些说明，对它的一些啊描述什么组件丰富，功能全面，说白了有很多组件可以让直接用啊，一步上手，按需加载。体积小，性能出众啊，一定制多种风格，真的好，重点是要怎么用上对吧？说的再牛逼，你得最后用上。好，那我们呢，也去把我们最终啊做的，我们最终用的它会做一个简单的。就点有一个按钮能看到吧，点击个按钮呢，会有一个提示，哎，这个提示它会自动消失的。

另外呢，这种效果应该是在手机上挺常见的啊。好来我们来去用它用啊。我当前的这里面有一个空的工程。还是以这个混工程为例来改一下名字。改一下名字啊，UI或者安排吧。等于Y等于Y好。把它看成C。给它打开啊。嗯，就这个焦虑。大家看着啊，我每次其实尽量是打开一个项目啊，因为打开多了一个是它会变慢啊，这外部多会变慢，再一个就是有时候打的快会对你有一定的影响，因为里面东西太多。好，来，下面我们来去准备去做，这里面还是没什么太大用处的。

嗯，先给他干着吧。来我们就写一个入口JS是吧，啊先写上，所以这个里面的切换很固定啊，再写一个，写一个组件读过了创建文件夹吧。Components。啊，创建一个APP。GX，好，那这个里面的写法基本上固定。嗯，我把先把那个基本的环境先搭好，我们再去写啊叫import。React from react。如果这个工具不能提示啊，有两种可能性，一种是工具出了问题，你重启一下，如果重启后还不行，那十有八九你是没有下载。或者说你你看一下怎么样看，就是你你能不能点过去很关键。

听懂吧，如果点不过去，那你就要去找一下这个文件夹存不存在，文件夹存在，再看一下这里面的文件有没有。好，还有就是那我直接写个什么。对吧，最终需要去渲染一下，渲染哪个标签呢？是APP啊，所以我把APP也引入一下吧，Import APP。点斜杠component下面的APP。这个写法其实很固定啊。OK，第二题用了，后面呢，我们就是要在这里面写东西，先把整体结构搞出来，对吧，写个APP好里面啊，重点里面要写什么呢，这个还不确定来。把它收起来啊，我们既然要用它首先的第一步要干嘛去，是不是下载啊，下载这个库那。

大家看一下啊。诶，我们现在这地方它有几个像这一些是一些介绍性的啊，一些介绍性的告诉你怎么去下载，诶这里面是不是告诉我下载了啊，其实它这里面有个更好更贴近我们的，就这个。什么意思？在我们的。它不是脚手架吗？说白了就是在脚手架里面如何去使用这个under d mobile。嗯。啊，OK，你可以点一下它。他以后呢，这个前面它其实是在告诉你啊，去用这个create AP，这个我们好像已经做了呀，咱已经做了对不对，我们现在要做的是啊使用上。它它这里面啊，其实有一点做的不太好，就他没告没有这里没有去写如何去下载，其实这个下载它主要是在前面已经说过了，写在这里。

前面这里面不有一个。看到了吗？啊，放稍微放大一点啊，稍微放大一点。能看得清楚不啊，就说白了，就先下载呗。那我们先就把它下载一下。就这个呗，刚刚是。后面的是如何来进行使用啊，进行使用它有外表的方式，有native方式，这种方式是告诉你页面中如何如何去引入一些东西。大家看着啊，这个页面，因为我们是要做移动端嘛，移动端页面是不是要要写点东西啊，写密呃的对不对，是这个吧，啊大概用这个看下C。其实还用了它，其实还引入了一个，引入了一个GS，这个GS用来解决什么问题呢？大家应该能够知道，叫fast.gs。

大家知道用来干嘛的吗？解决那个在移动端点击有一个300毫秒的延迟。还记得不是移动端的页面，如果你加点监听，它是有一个延迟的。啊，OK。这个能懂吧，你点击你们可能用嗯，Mo去做的是吗？嗯，触摸你们用touch嘛，Touch它的是吗？对吧，但是我就想用明白了。啊，有对应的一些解决的库，你看这个这个名字你就能看出来fast叫什么。啊，快速点击啊，就是它能够你用上这个库以后呢，能让你的点击能够没有延迟，说白了你就把这个整个部分。啊，这是个这是模板代码，你把它粘过来就行，放在哪个里面去。书房的页面啊，OK。好，那我就直接。

讲到这里。啊，最好把那个media。放到上面去对吧。密点一般在在这里嘛，统一的放嘛。啊，放在这里对吧，好。来啊，这个有了，把这个把这个本来的给他是吧，是不是干掉啊啊替换掉就行啊好。那继续往下看，下面是一个实例，就告诉你怎么用说从我这个地方引入一个。是不是引入一个吧台对吧，接着去渲染这个。发展标签，大家看看为什么是大括号？因为你得想啊，这是个组件库，组件库里面有很多组件，看到吗？各种各样的组件。那它应该整体向外暴露，是个整个大的对象，这个对象里面有很多属性，每一个属性都应该是个组件。

这个能懂吧，啊OK。好来，我们来去看一下啊，怎么来去，怎么来去做啊，怎么来做。啊，那我们就去，现在刚才已经下载过了，引入他下面啊，我们就按照他的说法做呗，不过我们是在里面写啊，在这个MP里面用。Import。什么？他不说了，有一个什么，But。昂地，诶，没有。啊来没有是因为18小是刚才看我下载没有我的个天。慢的呢啊，这里要说一下啊，我现在这个NPM实际上啊是去淘宝去找啊，已经是尽量用的是较快的服务器了啊，因为默认NPM不是找淘宝的那个地址。能懂不？NPM它本身是有这个仓库的，但这个仓库太慢了，确实太慢了啊，所以我稍微做了一点修改啊，就是设置了一下NPM自动去找淘宝的镜像，但是现在依然还没达到我的要求。

啊，没关系啊，把它复制过来。啊，复读啊，不丢人啊，丢人的事你最后没做出来。啊哎，出来了是吧，我听了是不是error了问题，诶好了是吧，出来了出来以后啊，你要尽量让它，你切换下，尽让它加载一下，看到了吗？它没加载那也识别不了。那么懂怎么让它识别加载一下来，你切换一下这个窗口。懂吗？啊OK，他现在去加载去了。好了吗？好了啊好了。

来后面呢，这个八条的用法，它写个简单的，我我也就写个简单的呗。对吧，跟它一样，只是我就放在这个这个里面吧，当然你也可以放在外面啊，这个没关系，好下面继续往下看。继续往下看啊，他说我需要引入什么，是不是引入样式。能没有看到啊，引入样式来。走，你看下C。引入样式，我在哪去引入呢？Index引入可以吧，可以。大家看看。能定位过去吧，当然这个得说一下啊，是将d mobile的所有样式是不是都引入进来了，其实这种方式现在来说并不是特别好，说实话。因为为什么我们没有实现一个按需打包的问题，就是我现在其实就用了八。对不对，也就是说我当前仅仅只需要八成的样式。

发展肯定也有样式的，对不对，但是别的样式其实我也引入了吧，因为我是引入整个文件。懂不懂好，不管它啊，先实现效果再说，你管它是不是最优良的，先实现效果，咱再慢慢考虑优化的问题啊。好，来吧。N吗？Start。就现在用的做了一个最最简单的。啊，应该要还要切到移动端是吧。这个有人说老师这这这白色的看着受不了，你不是要要做一个另外一种颜色的吗？那个颜色看起来好一点啊，就是我们最终是这个颜色都看着多舒服啊，是吧，那我怎么来去设计呢？我怎么办呀，下面我也不知道啊。

啊，看文档对吧，现在我们是不是用的button，那也就是说我现在是不是要去找button怎么用。组件化开发最好的好处就是，哎，这个东西你就你就跟他写HR标签差不多。写标签不就是传递一些属性吗？这里面是不是有些样子的，哎，说下面你需要哪一种呢，对吧。是不是应该这种对吧？好，那我怎么知道这种是怎么回事呢？大家可以看一下，它这里面有个东西，有个属性叫什么type。啊，有几种值看到了吗？啊或者不设置，那你说这个设置什么值。你你想想你都应该知道，说实话啊，OK，这是没有传的对吧，这个不用它嘛，也就是说我这个理念啊，非常简单的一个事情，Type等于啊，应该这个字不串是吧，看。

What？啊，能看懂好了，那同时啊，我们先看一下，看一下先看行不行，慢慢一点一点的做。这不挺好的吗？对吧，那下面呢，我希望点击它一下，大家看到这个很好的地方，就是我按它它有反应了，对吧，它样式的变化，就它已经做好的样式啊，已经做好了，下面呢，我希望点开一下，能提示一个，能有一个小提示。啊，那这个东西也是一个组件啊，也是一个组件，首先叫监听怎么讲。对不，你要不知道看看啊，其实这个呢啊跟我们。以前的差不多。有没有看到？好，那来吧。跟以前差不多，Click等于this hand，因为没有意义，就是hand。懂不懂，好，下面。

写一个箭头函数对吧，下面我是不是显示一个提示啊，这个我写假设提交。那这里面就提示提交成功。可以吧，那那个骑士它是一个什么组件呢？这个我就直接告诉大家了啊。这有一个组件。新提示啊，就一个toast。啊，其实你应该这个地方可以就用一个操作看到吗，也可以操作的。那这个界面用的什么代码呢？就是这边的。但这个很多是吧，因为写了他写了很多测试用例，只是个测试用例的一个DEMO。听懂吧，啊OK，当然我们简单看一下，因为这个语法太简单了，说实话大家看。透视点什么什么，哎，而且它这里面还有不同的提示类型，有成功的提示，有失败的提示。

啊，这个里面你要你要不知道，你就你就可以去看一下失败提示怎样。看到吧啊OK，那我们就弄一个一半的提示，也就是说啊，譬如说举个例子，我们就用一个tot点音，看见吧，还有loading的。Loading什么概念？就是加载？你看这样呢。能看到吧，啊OK，好，那我们就搞一个就搞一个吧。嗯，这里面有很多可以传的一些参数，但是呢，首先你得引入吧，引入。能看到好。下面啊，我就我就指定先学这个。内容什么提交成功收进来来，你还可以指定时间，原来老师这些我们其实都可以不指定，它应该有一个默认的时间。

只是这个默认时间，你要觉得长你可变小，对吧，要觉得短了，你可变长都可以。我们来看一下，看看我们的这个行不行。找你。各位你它这里面肯定是有一个有一个默认时间的，至于默认时间是多少，你可以根据文档来看啊，可以看的。这个33秒对吧。那我是不是可以制定时间。啊，这个duration。啊，可以指定啊，这是这一个。其他的还有一些别的啊，还可以直接变on close，这什么意思感觉？他肯定指定一个回调函数，只是说回调函数什么时候掉了，我们说on什么意思，当什么什么的时候。听到吧，当关闭的时候，它是不是自动关闭了吗？关闭的时候相当于给你发一个通知，调用这个函数啊。

一般情况下我们都不用，用的话你就写。再有什么是否有一个蒙尘啊等等啊，这个都用的少，好，其实你还可以手动的去。关闭，也就是说它显示的过程中，你就可以对它进行关闭。能懂吧，它不默认时间是三秒吗？偏说我。一秒以后我就想关闭怎么办？是不是一秒以后调用这个就可以了。那这这一个啊。这挺简单的吧，啊，当然也有一些别的，其实这里面提供的组件特别多，基本上你去做一些效果。啊，用它就可以了。嗯，OK。好。那我可以给大家去演示一下我们最终要做的那个项目的一个效果。

我先找一下在哪吧。啊，我们这个项目呢，就是用RA加u d mobile做的。啊，这里又包含两个项目啊，我先运行这一个项目。这项目呢，先要启动服务器端。嗯，接着同时还要去启动一个客户端。NPM2 start。因为这是个移动端应用，所以我切换到移动端。怎么办啊？

第一次的时候，你看他要打包变异啊。好，现在之所以启动不了，是因为我的那个数据库的服务没启动，就漫果DB是不是要启动一个服务来的，还有印象吧，啊，所以我刚才的那个数据库没有启动成功，没服务器没启动成功，我把服务器再启动一下。嗯。好，下面我再刷一下。好了吧，那接下来我可以去登录，这是一个招聘类似的啊，就是叫留人。啊，密码是123，因为我注册过一些账号。好，我还可以启动一个界面。可以启动要需要两个啊，因为是两个人，两个人交流嘛。还要启动一个界面。正面就是整个界面的搭了就是用的啊，那我这个里边呢，搞个boss。

啊，我写写了B1啊，走你。这是不是大家看这像当前左边的是牛人，牛人应该看到的是boss列表吧。其实是相当于boss直聘的那种，就是啊那个招聘者在上面能这是这个相当于是招聘者的登录以后。他看到的是一些牛人列表吧，就是一些求职者的列表啊，我呢，我们俩就可以进行什么呢？嗯。啊，进行对话。而且这个对话呢，应该是可以实时的啊，比如说你好啊，试一下还可以去发一个表情。啊OK，好来看着啊点一下。

看了吧，啊，这个里面呢，会用到服务器的一些技术，而服务器也是我们自己写。啊。大家能看懂吧，啊，能看懂OK啊，这里面呢，还有一些其他的一些能看到有哪些未读的消息啊OK。还有一个我们这里面有一些用户登录和注册，有一些退出登录等啊，就要这样，其实这个整个的整个的界面搭建呢啊，整个界面搭建就是用mobile来搭建的，基本上不需要写几个样式。基本上都就是一个啊，他提供的样式啊，去做的效果。这不就是刚才我写的一个按钮吗？看到吧，啊。所以最后大家应该也能够去把需要把这个东西能做出来啊。你不要怀疑自己做不出，还没做了，说不定你哪天幡然醒悟上了呢，对不对，什么叫上路啊，就是你突然间哪一天就觉得，哎，写程序员他没有那么费劲啊。

会有那么啊，遗憾的，你放心啊。你现在问学委，学委肯定说他已经上路了。好好了啊。好，现在呢，我们虽然说实现了我们想要的一个效果啊，我们想要的效果已经没问题了，但是呢，现在我们有些问题啊，有一个非常大的问题，就是我们并没有实现一个概念叫按需打包。啊，什么意思，我们现在只是说实话啊，我们现在大家看到。嗯，我们当前把这个关了啊把诶。不会把我们的替换掉了吧，我们那没了是吗？刚才我们自己的都被他干掉了。这我们写的吗？

我们这个里面有一个事情啊，我们希望实现的是什么呢？就是有两个点，第一个点我现在只需要这两个组件。对吧，你就不要把整个给我打包，但它默认是他的整个包懂不懂。还有一个很重要的问题就是这个样子，你是不是直接将整个样式文件引入了。我的希望是我不想样式，但是呢，啊，对，OK，我把它隐藏。但是呢，你能自动的去加载你所需要的样子。能懂我意思不？其实他是可以做到这一点的，大家看一下。大家看到吗？这个里面每一个组件其实就是一个文件夹。能不能每一个组件就是一个文件夹，诶，我现在就要说一下大家看到这个文件夹的名字。小，你看的这个名字，你观察一下，全部是小写的。

懂吗？呃，如果，但是呢，有的时候是不是主键名，是不是多个单词啊，怎么办呢。用杠隔开，其实我之所以啊，这我们刚才的想法就从这里可以看得到。说白了，你跟别人。别人写出这么优秀的UI库都这么写，那我们应该这么写对吧，跟别人统一啊。其实它每一个里面都会有自己的什么呢？样式啊，都会有自己的样式的。能懂吧，每一个每一个组件都有自己的样式，但是呢，我们现在不是这么做的，我们是什么，是不是引入了所有的样式的一个。最终打包的一个文件。能懂吧，他把所有的样式都集合在一起的一个文件，那当然你引入它肯定可以。但有这个必要吗？没有。那怎么才做到了，这里面要写一些配置。

啊，需要写一些配置才能够实现啊，才能够去实现，而这个地方。来，那我们就要回到我们前面的那个这个。还是回到我们前面的这个啊这里啊，刚才已经走了一些了，对吧。这什么意思？同学们，这个其实说的不是特别准啊，不是按需加载，更准确的说叫按需打包。能懂吗？就最终我们是不是要生成打包文件运行的。啊，那我是将所有的打包了，还是只是我需要的那些打包了啊，就是按需打包会更更好一些，其实他这个加载就打包的意思。啊，注意什么，强烈推荐使用。啊，只加载什么用到了组件啊，选择其中一种方法可以，它就是说这里面有什么。有两种方法是吧，啊两种方法。来吧，首先啊，需要去使用这样一个插件。

那首先你得去装这个插件，这个插件什么意思啊，它就是Bible plug in就是Bible的一个什么插件，什么插件后面是它的一个作用的插件，叫import。引入什么意思呢？这个插件能去只加载你import指定的。模块你没有import，我不加载。能不能啊，我们这个写法就非常的关键，因为我现在大家看看我们在使用的时候，是不是只破了他们两个，这已经创造了一个基础的条件。啊，有了这个基础还不够，得用算它啊，用它那首先我们得去什么。下载它呗，对吧，接着是不是说有一个配置啊。能看到吧，但是啊，这里有一个小问题啊，有一个小问题就是我们当前这个它需要写个配置文件啊，这个配置是什么，是这个。

看到吧，是这个，而我们当前呢。不好意思啊，这个配置文件被隐藏了没有？我们当前看干干机没有那个配置文件。都被他隐藏了啊，其实呢，他还提供了另外一种方式来去做啊，来去做什么方式呢，在这里。打开它。看它好，下面就提供了一种方式来，不说了吗？又来一个I是吧？啊，下面就告诉你啊，你要记什么。是不是下载它啊，下载它接着改一下你的什么这个pen为由吧，改一下。啊，同时呢，你要在根目录下面再去创建一个文件，JS的模块文件，记得写上这段代码，同时还要下载这个。

啊，挺烦的是吧，啊挺烦的，最后还要改一下这个配置啊，你看它呢，会麻烦一点，看我的比较好。因为我对它进行了一个简化。来看一下啊。啊，往下翻第一步啊，其实这东西都通用的，你要不会留着这个word文档就行，参照文档最终能做出来就OK了啊第一步下载包。但是呢，需要下载什么呢，两个。能懂吧，这个杠杠DV实际上就是杠杠C-DV，能懂吧，啊OK。啊，但是这里面用的是亚命令啊，不用亚命令嘛，我们换换我们那个我们那个NPM命令，因为亚还没讲是吧，没关系，NPM因斯多。这个吧，还有一个是吧。还一个。接着杠杠C啊杠DV，因为它是我们进行编译打包的一个工具包，而不是运行的时候需要。

所以最好是刚刚是有刚低位。有人说老师我要万一刚刚睡了有问题吗？其实也没有问题。你甚至不写都没关系。啊，说白了这个声明是给人看的懂吗？啊，我这个声明不声明，你觉得有什么问题。啊，他怎么说呢，对你个人来说没问题，但是对其他人有问题，你想你把项目提交到get up上面去。对吧，别人来去下载你的项目，下载项目的时候有漏干吗。没有没有，他是不是根据你的拍来去下载，你想想你要没声明行吗？那肯定要报错呀，他下载不下来呀，懂不懂，但但是你要声明错了，其实这个没有太大影响。也就是说，譬如说我这个一不小心声明到下面来了，有影响吗？这个是没影响，这个就确实没影响啊，只是。

意义没有那么好而已，因为确实我们这节课就是什么。运行的时候需要。对吧，那下面呢。开发的时候需要。这个很懂吧，啊OK，好。是不是进来了？好，下一步就按照这个步骤你们做出来就OK了啊。来，下一步我们要去干嘛呢？去改一下pat。我们对比着看一下他，看他改了什么。啊，对比的稍微看一下。改的什么啊，这个前面好像都没动，对不对，也改了启动命令啊，改了start加build加了test来看一下。变了。以前是不是用的是这个包去运行的，对不对，而现在呢。是不是用的新的下载包能看到吧，啊新的下载包其实是对这个原有的这个包呢，进行一个包装。

包装了什么呢？他做了一个扩展。我们还要写一个。其实它就是多运行，提前运行的这个配置文件。叫con什么意思？Con？覆盖对，就是在原有的配上它去加了一些配置来。把这整个啊看到啊，把这整个选中。看谁。放在这里面。啊，这个很多是吧，没事大家能看懂啊，大家能看懂啊，这个是去加载我刚才那个包吧，啊这个包最终啊大家看到啊，最终这个看就整个con就整个配置。其实这个配置是不是在里面被他隐藏住了呀，啊，最终它是在干嘛呢，大家看到inject什么意思啊。知道吗？叫筑路。注入注入什么。

Bible的什么一个插件，那个插件是什么名字呢？大家知道Bible的插件是有一个固定的名字，前缀一样叫Bible plugin什么。干什么？用哪个插件注入了import，刚才我们是不是下载一个插件，这个插件就专门用来实现按需打包的。听不懂，好，那针对于谁来按需打包呢？针对谁就on d mobile这个库，也就是说我们在写的时候是import大括号叉叉叉from d mobile。看着嘛，是不是。不就他吗？也就是说针对于你from是他的，我来实现什么按需打包。能不能好，后面一个大家觉得什么意思。

啊，这一个就是啊，告诉外派你。在加载我的这个，加载我的这个button的时候，你也把我对应的样式给它加载一下。那也就是说，有了这个东西以后，我还需要引入这个CSS吗？不需要。看着吧。啊，OK。这个不需要你写啊，我读的过程中大家能懂就行，其实说实话说的说的更不好听一点，你即使不懂都没关系。啊，你因为这个东西都是通过的，是固定的一个写法，但最好能懂，其实这个懂一方面是锻炼你，另一方面是也能表明你到底是个什么水平。OK，最后啊，他在里面要拷贝了，其实也不是我讲的，就是就他这里面。写的。弄过来就行了。那好啦。那大家看着啊，这里面非常关键，我现在啊，我现在是没有引入样式的，看到吗？我没有引样式啊，OK，我现在需要做这件事情，把这个给去掉啊，这个给得得去掉。

因为有重复的了嘛。啊，把它给去掉啊，这个里面没法注释啊，其实我是挺想注释上的，但这不是JS文件。节省文件，你要写注册，到时候就运行就报错了，这不行，这不能留啊。好，来，我们来重新的什么，练习一下怎么运行MPM一样还是以前的命令的名字。但是跟以前的运行是一样的吗？它不一样。啊，不一样，好啦，走你。不是完全一样的啊，因为这个里面最终的这个命令都不一样，哎，报错了。呃，我们看一下这里面多了一个什么，多了一个解，他现在说白了，通过这个你应该知道一件事情，你看他报什么错。

他找不到某一个模块，哪个模块看杠，你说谁在找我。就是这个包。懂不懂它会去加载这个文件，但现在我的文件名是不是写的有问题啊，多了一个什么点。能看到，不一定要写在根目录下面，你看它固定找的位置，好重新再来。这一步如果它能出现那个很友好的按钮，那就非常爽了，大家看看样式是不是说明有了，那没样式肯定出不了这么好的效果啊，OK。这样啊，我们就实现了一个东西啊，叫按需打包。按需打包所说的按需打包是按需打哪些东西？按需打包组件吧，组件的GS和什么CSS？

啊，OK。这个配置大家照着能配一遍，最后能行就行，因为我们后面做项目的时候也要再配一遍啊，这不用背啊，这个备的没什么意思，说实话。好，那整个其实它里面的组件很多，我就不再一个一个去整了，因为后面呢，我们做项目的时候呢，再去用哪个，再说了一个，其实这东西都很简单，他已经告诉你了。就用这些组件库吧，为什么说简单呢？就好像说大家写htime的时候是不是觉得很简单？就写一个标签，传些属性，效果是不是就出来了，因为他们也是一个意思。啊，写一些标签，传些属性。就出来了，但是呢，你要做交互，那肯定要稍微难一点。后面需要哪些东西呢？我们再啊看啊再来写。行。

那下面的时间呢，大家也需要去把它整一整啊。