00:05
那我们继续往下啊,啊,下面呢,我们要去做的是我们注册登录的界面,先就是把这个静态组件呢先做出来,简单做一点交互啊。我们先来看一下这个。登录和注册的界面。这个登录和注册的界面呢,他们嗯这里面嗯这一个呢,都是一个UI组件啊,所以说就不太一般了,主要这个。是不是都有一个这个东西啊,啊,应该有点样子。那这里呢,我会将他们嗯,抽取成一个专门的组件,因为它就是个logo嘛,所以我就叫他什么啊logo.jsx的一个组件。这弄吧,啊,那下面的呢,都是用我们的al d。
01:03
的一个UI组件,来去写的一个布局界面啊。好,那我们就先来去整这个logo的组件。先把那个组件文件夹创建出来,我们来看一下,那一旦创建组件就有一个选择的问题。什么选择呢?我是放在contain下面,还是看到component下面?也就是说,我们要去评估我们当前的这个组件需不需要去跟re进行交互。需要吗?那肯定不需要,它不就显示一张图片嘛,对吧,其实我这里面不抽集成组件也可以做。能懂吧,只是我把这个东西要写两遍嘛。能不能理解好,那我们就应该在这一个component下面去创建一个文件夹叫什么?
02:02
Logo。是吧,那logo的里面应该有一个我们的JSX文件是吧,就叫logo.jsx好,这一个组件呢,是一个非常简单的一个组件,它就显示一张图片。它需要状态吗?不需要,他需要什么点击操作吗?也不需要,也就没有任何的交互,什么意思呢?我就想说啊,这个组件可以用函数组件去写。啊,什么意思?你说我们一般不写类组件吗?比如说下面写一个exportport什么方式。能懂吗?啊,这样我们就是啊,只需要写一个简单的函数主页即可啊,下面我们要去写一下啊,当前的这个组件的这个结构啊,这个结构非常简单,我也不打算去一点一点的写啊,给捞过来。
03:13
就是一个div里面套了一个什么呢?Image,但是我这个image是不是需要有一个图片呢,对吧?啊这个图片呢啊,我这里面已经有了,其实在这里面也有啊。资啊,给大家发的资源里面是有的。Fair resources image logo这个。能看到吧,把它看成C。啊,你可以直接放在这个文件夹下面,也可以专门建一个,再建一个文件夹,可以叫images或者叫image给它放去,因为我这就一张,我也懒得再去建一个文件夹了,就直接放在这里。当然我这一个大家看到啊,我这个div和这个image是不是都有样子啊,那所以我当前是不是还要有一个样子。
04:04
看到不好这个样式,那我也叫它logo点好,这一次说一下我们写样式都用什么nice来写。啊,Nice来写的话啊,大家来看一下啊,我们最外层不是有一个他吗。那我就写一个点知道没啊,它里面啊,主要是要去写一个写一个居中。等于什么center,好接着去写什么呢?接着啊,我们先写一个句中再说啊,接着还有一个事情,我们需要去写这个image的好,这个image类型写在哪了。是不是写的这个嵌套关系啊。能不能看到啊亲的关系好了,可以去指定我图片的一个啊尺寸啊,比如说我来一个。
05:04
啊,我先写一个啊,差不多写一个,譬如说三百二啊,我先写一个PX。那再来一个高度啊,也写个300。先写一个,等会我们再去慢慢去调这个样式啊,这个样式可能还需要调,慢慢再调好。那我的样式洗效果了吗?没有对吧,因为我们的样式还没有什么引入,因为我这个奈这个样式是不是专门为我这个组件创建的,所以就在我的组件里面引入即可,Import点斜杠什么。logo.nice还有一个我们的图片好像也没引入吧,我们的图片也没有引入来一个constant logo啊,这不是constant吗?Import是吧?Logo from我的图片。
06:04
logo.png。没问题吧,这个应该是比较简单的啊好。现在我们没法看效果啊,因为我们还没用这个主页是吧,来下面呢,我们要去写的是我们的注册或者是我们登录,我们先写注册,注册写好了,登录是做减法就行,就减掉几个就可以了,来看一下我们当前这个。主要是要我们要看着这个,看着这个写啊,看着这个写。那如果你想更简单一点,就可以看着这个final去写。就这个怎么看他写了,你得知道要写哪些。组件标签呢,对不对?因为第一次写大家不太熟练,所以如果能参照他能写出来,那基本上没有问题。
07:01
什么,那怎么参透了,大家说我在这里面看他写。能行吗?那不行,这个已经生成好了,最终的页面的标签,这没法看啊,应该去打开它。那么呢,但它层次有点深,大家掌握一个技巧,大家看到啊。先审查一下,再切换过去,它有可能没有展开,如果没有展开,你再来一遍。再切换过来,再切换过去,基本上就应该好了。啊,当然你要不怕烦,那你就一层一层打开。能不能啊,这样我就能看清楚我的整个结构。你看。啊,大家如果能参照这个写出来,基本上也没问题啊,因为大家现在对这些组件标签都不太熟。啊,这里面啊,其实前面呢,我写了一个列表。
08:02
啊,就是我们用到了一些,嗯,昂D的一些组件,有布局的一个叫两翼留白。啊。这是这E的意思啊,两页留白,再一个white space上下留白,就是有一个中间有空格。再一个导航的,诶,我们就会用到什么呢,来吧,后面会用到再一个啊数据输入的button input item。Radio啊,这个也用了一次,叫text error item。好,这个数据显示的,但这个显示什么呢?大家知道那个通知你消息,收到消息后未读消息几个几个的啊,就用这个来写的,用这个组件icon,这个小图标啊grade grade有什么呢?我们在聊天的时候是不是可以表情呢?那聊天的时候不有有表情选择吗?那表情是个网格,很多个表情是吧?啊用的是great加个list,就列表当前我们就要用list啊,再一个是反馈的啊,这是个对话框,这是一个简单的文本提示,这个咱用过。
09:14
对吧,这个咱用过,就是一个小的文本提示自动会消失。啊,整合的这里面result页,到时候后面再说啊,这个不用背,背着也没什么意思啊,你会参照着去写,可以看文档就行啊。其实用组件标签相对来说还是比较简单的。好,那下面呢,我们就要去写这个界面啊,写这个界面来写吧。写的话来啊。整体是一个div最外围没问题是吧,那接着通过这个来看,应该是上中下。三个结构。能不能看懂啊,上中下三个结构好。来下面我们就把上面上面用的什么。Never never是导航的意思,一个导航的一个条,所以我需要把它什么引入。
10:12
哎,不是这一个是d mobile。接着是LEVEL8是吧,还有一些需要引入的啊,我们来看到把它引入进来得了啊,这个w blank就两页留白的一个组件bla,它提示是吧,挺好的啊,往里面往里面去看啊,往里看接着是一个什么list啊,List是可以形成滑动啊一个列表。好,继续的往里看啊,继续往里看打开。这里面有什么啊?Input item,这比input好点了,它可以自动的指定左侧的文本。就这整个是一个吗。那道不,这跟我们的硬网页的标签一步的,那还是强大一些,他们网页标签不一步的,不就一个输入框吗?
11:05
这个能不能懂啊,叫input item,那我们就把这个input item写上啊。好来啊,因为这个比较长,因为这个比较长,所以呢,写的时候我们会这么写的。因为引入的项目比较多啊,所以为了能够更好看,我们可能会这么写就能看到,不好,那往下看啊,下面啊,每一个item之间会有一个间隙,本来他们挨的比较紧。懂吧,那我们让它隔开一点啊,它这个是个什么叫white space。问题吧,没问题,好继续往下看啊,这都是em space,主要看下面,嗯,下面呢,有一个叫list item,这个list item是哪个里面的,是list里面的,大家看list里面有一个什么。
12:07
Item下啊。啊,我们可以这么写啊,这么写。你可以写成item,也可以写成什么呢?List item,当然你的标题名可以直接写这个都行。就是不用写这行语句,你直接写这个名字也没问题,好来继续往下看啊,在这个list item里面大家看一下啊,包含了一个这个,这个是它自动产生的,不是不是我家的啊,有一个什么呢。看看什么?就这个实际上是两个radio组成的是吧?啊就单选框这里面有一个radio。这能懂吧,啊好,其他的还有一个就是八层了。
13:02
啊,那整个就完了,就这么多啊好,那下面我们要做的事情就是把整个结构给它搭起来。那我们第一个是不是最上面是这个导航条吧,对吧,那这个导航条怎么用呢。我得是去看文档,看文档首先呢,大家需要去打开on d mobile的主页啊,因为我打开比较慢,所以我直接就打开了,那打开之后呢,大家可以去选择它的这个什么组件的部分。听到不好,主键部分打开就是这个样子。啊,左侧是它所有啊组件的一个列表。而且他对他的组件进行了一个简单的分类啊,我们现在要找的是谁。So,来吧,啊。认懂不?当然我们前面嗯,也看过这个什么两翼留白,什么叫两翼留白啊,来看这个它并没有。
14:07
靠近最左侧是留了一部分,看到了吗?啊,还有上下留白,就是这个之间有一个空隙。能看到吧,也就是我没有不加这个标签,那就没有这个空隙,那就挨着的。那现在啊,还有一个是列表后面用的啊,我们现在用的是什么来玩吧,因为这个打开有点慢,我直接把它打开了。啊,其实我们这个LEVEL8可以做的比较复杂的。也就是说左边是不是可以有回退啊,右边是不是可以有搜索按钮,有这一个菜单的这个点点点了。但我们这次无比简单。只需要什么呢?中间的这个文本。懂吧,那中间的文本怎么指定啊,你去看一下它就行,大家看一下中间的文本,它又是一个什么。标签体文本,这不跟button一样吗?对吧,所以我这里面只需要去指定这是什么呢?啊,我们要选,我们要做的是不是就是这个是一个名称叫硅谷之境是吧。
15:19
好,中间呢,我想有一些有一些空格怎么办呢?就是多乐福NBSP。嗯,加一个四个142。能懂吧,这个应该在比较好用的,这个东西跟这些标签一样,只是你不太熟练这个标签而已。啊好,往下看,下面是什么。是我们的这个logo的这个组件标签是吧,那所以我要将它什么,我要将O是不是给他引入好蓉来,我大家看的这个关系啊。
16:00
我在看下面,你再看po,下面就得回退吧,回退一层估计还不够两层,两层以后你稍微写一下,写一部分看它有没有提示。是不是component啊,接着是logo下面的logo。没问题吧,那下面我是不是直接就去写这一个组件标签就OK了。能不能看懂来啊,那其实我们现在写到这里就能够去看了。也就你不用去所有都写啊,你写一部分啊就去看。来我们打开我们那个,就是现在有问题啊,问题有问题看有问题啊,这也没关系。来看一下他说什么。17行,那17行是哪一个呢?是这个他在说一个什么意思啊,大家看一下这个他说的是import in body of Mo。
17:04
这个port first。Force。First什么意思?第一也可以有先的意思,其实就这个意思,哎呀,搞了半天。就是先要硬破的,后面才能写别的语句。能懂吗?能懂啊,能懂就行,呃,这一个我们要去找的是什么。好,那一说我们写好了以后就马上出来,这个效果是没有问题的,对吧,没问题的,呃,这个这个图片有点大是吧,显示也太大,因为下面你下面就没什么没太多贡献的,显示这么大干嘛呢?又又不是卖图标的。啊,也就是说我们得调嘛,对吧,这调一调没关,比如说200先搞个240,嗯,或者200多少先试一下对吧?嗯,先搞个差不多的,到时候再看啊差不多就先这样啊,啊先这样好,那这样以后呢,下面我们是不是继续往下写。
18:10
那继续往下写来看啊,我们来去审查一下。那下面是一些什么结构呢?啊,我们需要去,诶这个看我们的没用啊,得看到这个最终的啊,来看一下它。那嗯。下面的最外层的标签是谁?两页留白是吧?When black black,就是两边有空白区域能看到吧,嗯。好,那来写写呗,这是没什么太大难度了啊,找到我们的。啊,诶,这个里面的一些东西,接着里面呢。里面整个是一个什么列表吧,里面整个是个列表,这个div它自动生成的。
19:04
这个认懂吧,是它自动生成的,所以我们这里面直接来个什么历史,历史也不用写什么属性啊,直接是个历史的一个滑动列表就行。好,往list里面后面啊,这些都是它自动生成的,后面我们就一项一项的写了,没什么难度,就写了一个什么input item。啊,Input item里面会有一些属性。不就是这个吗?是吧,那这个里面得写一些什么呢?那我得去看。这个input怎该怎么用呢?是不是一有两个方面可以看啊,一个方面你可以看事例。这个没懂,另一个方面你可以去看一下它的API的一些说明,对吧。这能不能理解?啊,那四例呢,其实你可以看的,这这不都都都有嘛,可以去输的对吧,好来。
20:04
在这个里面呢,我们可以把一个声音打开,稍微的看一下它的input吗。来,这不是一个inputem吗?这个input里面可以标签体,你说这个标签体就是那个左侧的什么呢文本。试一下这个是第一个是什么用户名,那我们可以看一下我们的,就是你写一点看看,看看我的这个写法到底行不行,对不对,是左侧是文本,右侧不是我的输入框吗?假设我还想加一个冒号,那我就加个什么冒号,这个没关系是吧。看懂不好,那还能写什么呢?还能什么什么看看这个文档啊,你也可以看它的一些东西,这里面有个什么type,这个type有哪些值呢?肯定是输入框,大家应该知道输入框有不同类型的输入框。真懂不啊默认值,大家看到默认值是什么text,其实我可以不用写了。
21:04
用户名嘛,明白吧,啊,其实跟我们的input很像啊,很像好。啊,我们先就写这么多啊,我们先把显示显示出来,那下面是什么?呃,下面本来我先把那个先写出一个不好效果,我们再说啊这个下一部分是不是密码呀,密码其实很简单,就是这来个什么type等于啊这个你们不用猜,你就知道它是what。能不能啊好,这个就别写用户名了,什么密码啊,这个密码呢,中间为了为了尽量跟他对齐吧。嗯,好,我测了一下,写三个空格了,刚好是对着。能看到好,那也说你来看一下,我们不是输入ABC,输入123,你看这是密码。很对呀,对不对,好这个里面啊,现在的时尚挨的有点紧,如果我们想隔开一点怎么办。
22:03
嗯,对吧,如果我们想两者之间隔开一点,就需要去在这里面加一个什么叫space space。就行,不用写什么属性。就隔的之间就隔得更开了,能走吧,啊。线啊,不是他本来加的,本来加的一个线,他加了线。这个没关系,嗯,加的好怪啊,那你你说上面吗?那你说那你很简单,就是你你你想你想让他那个整点,那你就加一个。是看下是了是吧?啊,看来你们要求还挺高啊嗯,好行啊行行啊,那下面是不是继续啊,继续还有一个什么。
23:01
是不是确认密码是一点难度都没有吗?改一下这个东西就行了,叫。确认密码,那就是把这个就得删掉了。因为这个宽度比较宽了,对吧,能看到吧,嗯,我再往下。看看我们要做的东西啊,再往下就是啊,这个稍微难点了,叫用户类型啊,关键是这里面说一下啊,这个用户类型这一这一项是我自己写的一个东西,我自己写的一个失败。接着接着我来这里面啊。看看这个会更好一点。看了这个用户类型啊,用户类型,我这个是这么搞的。大家看一下,这是这是我写的时候啊,写了一个SPA,写了两个radio。啊。因为我现在不能,你前面之所以左侧出来是不是那个input item了,我这一次不能用input item了,那我左侧的这个文本怎么产生的,得自己写啊。
24:04
也就是一个什么概念啊,大家看着我下面是不是新的一行。对吧,那这个新的一行呢,它有三个组成部分,有三个组成部分有我的一个文本,有两个radio。听懂不,我要让它在一行。能理解吗?那怎么样呢?这一行呢,如果我不外面不加点东西,它是不会在一行的啊,那个样式比较丑,我最后用的谁呢?用的是item,我们有一个list item嘛,应该叫历item吧,这个。就是我把这个先写一个他出来。能懂吧,在这个里面去写一个什么呢?磁盘那个叫什么来着。呃,叫用户类型。这个吧,接着再给他来两个什么。
25:03
Video被引入了吗?这不有吗?有没有看到,那radio怎么用呢?啊,Radio怎么用,那你也应该是去看啊radio它的一个使用是怎么用的。啊,这个其实没有太多东西,它就有一个有一个name,有一个有一些相关的一些东西啊里面的用法,大家可以把它打开,具体来去看这一个radio是怎么用法,这个radio用起来还稍微有一点小麻烦啊,稍微有点小麻烦,我这个radio啊在这。那你说他是不是有一个文本。是吧,啊,有一个文本,来来试一下吧。试一下我这个写一个文本叫什么?呃,假设叫大神。还一个呢,叫老板是吧,啊这个都用中文。
26:01
先写着看看是什么情况是吧,先看一看到底是什么情况,我们再根据实际情况再慢慢调。大家看一下。现在现在这种情况就是嗯,都选吃慢慢我们教过慢慢整就挨得是不是有点太紧了。认了,不,那我怎么能让他们隔开一点呢?啊,那我最最简单的方式就加这玩意。譬如说我我在它们之间是不是加点,在它跟它之间是不是点是嘛。嗯。能看到吧,啊,这个都能勾选,这个问题我们等会再解决啊,是可以解决掉的。啊。能看到吧,那如果你你想你想这他们俩之间再隔开一点都,那那都好点,那你再加一个都,都没关系,这个是可以加的,看到不啊没有问题好。
27:00
还有什么?这个是这一行对吧,没问题啊,没问题,下面啊,下面我们要做的一个效果就是把那个。两个按钮是不是搞出来呀,这个是比较简单了,这个咱按钮咱整过呀,啊八了。也就是说我们来去写两个button啊,写两个button这个叫注册是吧,注册那下面还有一个button叫什么来着,叫以有什么账户,嗯。就写个已有招呼拉倒啊好来下面我稍微的把这个里面的这个隔开一点,隔开一点,我这个需要一个type吧,因为我是有颜色的嘛。Primary。能不能看懂,好,接着稍微把它们俩之间也隔开一点。
28:03
可差不多了吧,差不多了,好,现在我们来看一下我们当前的我们的这个。也还看得过去吧,嗯。啊。这不差不多吗?嗯,这个稍微有点就是这个按钮是不是这种按钮是看起来就像合在一起了是吧?啊这也没关系,你就把它当成一个链接点过去得了是吧?好,那现在呢,我们就基本上啊,基本上把这一个整体的这一个界面给写好了,那我的注册界面写好以后,其实登录界面,那这是收easy这件事情。因为他比他少几下。是不是这概念啊,所以啊,登录界面我就不会跟大家去一点一点的写了啊,那我们的注册界面呢,我们就已经写好了啊,就这么一个情况。
29:00
行。
我来说两句