00:00
能不能看到,那现在缺缺就缺那个什么。是不是这个handle呀啊,需要去把它呢,也给它去写一写。啊,而这一个头像的组件呢,需要去主要的任务就是要去用一个,大家看到这整个结构还还是比刚才的结构要复杂一些。这不它吗,打开,当然我们看一下最外围它是一个什么list的,为什么需要一个list史的,等会我要跟大家说一说啊,因为这个里面啊,这个里面历史的里面,看这里面,这主要下面这个主体部分是谁?Great great是什么东西,这知道吗?网格网格布局能不能看到网格啊,我用list的原因就在于我想在网格下面,在这个上面显示一个上面的一个这样一个标题。这样一个头部啊,而这个头部靠谁来渲染呢?靠这个list,其实这个list主要是提供了一个头部,而且这个语法还挺怪的,等会给大家写一写啊。
01:09
好,来,我们把这个界面也给他搞定啊,那也就是说我们要去写出来了,写它呗,是吧,啊把这个界面写出来啊,来它整体需要用到一些组件,先引入一下,引入一下from谁了,On d mobile,好,这里面需要两个,一个是list,一个是great great是这个网格,主要我的网格的上面吧,它有个这个玩意。有个这个,而这个靠谁能够去显示出来了啊来啊,这里面我提前已经把这一个list给大家打开了。在这个list上面呢,有一个这东西。叫re hand,什么意思?渲染一个头部,那当然有头部标,会有什么底部啊?也就是说历史里面是不是可以包裹一个东西?
02:11
那把list里面不可以包个东西的吗?我我这外面是list的,里面呢,可以是任何东西,比如说great of you,刚刚的great不就是我们一个网格吗?或者也可能是item,没关系,主要是他说的意思是什么呢?我这个历史可以在它的上面。显示一个标题的头部,显示一个标题是什么呢?底部,如果你有这个需要,你就用它来去指啊,这个里面大家看一下,就这这玩意。我应该这个吧,它这里面这个效果。而我们现在大家看到我们现在的这个效果,不是需要一个这个东西吗。对吧,那这个地方来啊,我们要知道如何看着文档去把它给它写出来啊,写出来好来看一下啊,包括这个,包括这个例子中,它其实也是有用到的,你打开这个例子,你就能看到,大家看到这里,这不一个list的吗?这个run the hand干嘛渲染一个头部,它指什么类型。
03:23
是不是函数,而且这个函数返回是什么?返回就是要显示内容,返回来就是显示要显示这个标题,来看这里basic style basic style不这个吗。不,他呢?这不就是这个文本,大家看着这个就他呀,这不是吗。啊,跟我们的效果是一样的,其实你没有发现它这这个效果跟我们最终要去显示的这个效果的这个部分。是一个意思吧,啊一个意思,但是啊,我们现在显示的是个文本,你看后面还是个文本吗。
04:00
不是,这肯定会有变化的,对不对啊,先不要做这种交互啊,先尽量不要做这种交互,我们就先做简单的把文本给搞出来,那我们这边该怎么去写呢?来看一下。来这个地方不用写div了,省一层是吧,直接来一个历史,只是这个历史它需要有一个属性,这文档里面已经告诉我们了,对吧,叫render,什么hand,而这个re hand。干嘛?他怎么写的是一个什么类型函数,而这个函数是不是应该有个返回值,我返回的东西就是应该被渲染出来的东西。这能不能懂啊?那我给它取个名字叫list hand。那这个时候就说明我这个力hand是不是需要在外面提前给它什么定义好。啊,我教他什么呢?头部界面可以吧,啊,给他定义成这样等于什么呢?现在我写个简单的。
05:12
我们现在显示的效果,大家看到我们现在想法不就是显示这个吗?先显示简单的也就一个文本,但最后要写动态的啊,因为我们现在写的静态组件。能不能看懂啊,那最后我们这里就有一个头部啊,有个头部里面我们最终需要下面接的什么。是不是一个网格,那很简单,来一个什么grade呀,是吧,而grade的里面需要指定一些属性,这个必会有指定,你看你要指定数据啊,要指定你有几列对不对,你这个地方有几排几列啊,这个东西都要指定的呀,好,那我怎么办呢?看了。网格。
06:00
哎,跟这个是不是很像是吧,反正他做都可以啊,这里面,当然这里面也有API告诉你该怎么去做。好,来啊,一定要能看懂这个文档,这个很关键啊,学会了就好了,来,我先把这个网关出来,我这个地方第一个参数就什么这个属性date。那对的,不就是要显示的数据吗?懂不懂要显示的数据是什么类型数组能看出来吧?啊,数组再一个他写了个这个东西,看看怎么理解哈。什么意思?数组里面的元素什么类型,你告诉我数组里面的元素应该什么类型,对象,对象里面是什么属性?Icon和T的,它是不该告诉你啊,你里面有icon这个图标,有那个text的。
07:06
懂吗?能不能这个看懂很重要啊,这个其实是你挺多写法都知道那写的啊,一定要看懂,它其实告诉你啊,你的数据是数组类型,就是说数组中的元素是对象,对象里面有两个属性,一个是icon,一个什么看,而我们显示的效果就是就需要嘛。头像。喝什么?这个文本嘛,文本是不是要有对应的一个名字叫T,而头像的名字叫什么icon,有这个图标对吧,那也就是说我这里面啊,为什么这个东西写起来有点费劲啊,就是还是要写一点东西的,需要一个属性叫什么date,而这个date里面是不是需要有一个数组数据。对吧,那我是不是提前准备好一个数组数据,而且这里面是不是还包含图标啊,包含图片啊,图片呢,我们有。
08:10
看到了吗?能不能看到,那也就是说我们现在呢,有这么多图片啊,看C怎么复制这个图片呢,大家看啊。这个图标从现在啊看来是我当前这个组件,我当前这个组件需要吧。对吧,我当前组件不要显示它吗。那我就展示啊,那我现在想法我就肯定会在这个里面建一个文件夹叫什么呢?Images,因为这个文件图片文件太多了,你直接放在这个项目文件夹里面,放在这个组件文件夹里不太好。能不能建一个专用文件夹来存放?这些东西。看到吧啊,但其实最后我们不会放在这里啊,我们要放到这个位置来。
09:07
那如果我要放弃,原因是什么呢?啊,别的组件也需要。也需要这些图片啊,哪个组件呢?就是那个人中心不要显示,你登录以后不有个个人中心吗?个人中心有你当前自己的头像啊,我暂时先放在这里啊,因为我们现在还没做那个。啊,我就我就觉得只有我用可以吧,可以到时候需要的时候我们再换都没关系啊好,那下面啊,下面我现在我这个date需要的是一个什么呢?需要的是一个啊叫取个名字啊看到。嗯,取一个什么名字呢。假设,我就叫他汉斯,他。可以吧,头头部的一个集合列表数组对吧?好,那这一个数据是不是不应该在润的里面准备啊,润有可能自行多次对吧?啊,我们应该准备好,因为准备好了它不会变的,懂吗?准备好了以后不会变,那我在哪去准备了?
10:13
啊,你只要在润执行之前一上来准备好就行。那我在哪了?而且我把这个数据保存在哪个位置呢?嗯,我一般会这么写。大家看着我。我取的时候这么取,看大家懂不懂this.hand什么意思?说明这个数据存档了。组建对象里面呢,对不对,那我应该怎么办呢。我应该想办法往组件对象里面是不是塞一个判断历史的一个数组,所以这个数组要写点代码才能才能出来啊,这样看着我,我去,比如说我在这里面做。可以了,好久没写它了是吧?在这里面写个点,它等于一个值。
11:05
能懂吧,好,那最终是不是一个数组,数组里面有东西。那这个怎么产生呢?啊,这个这么多从一到20是不是。比如说这个里面我要产生二二十个元素的速度,对不对,而且每一个元素都是对象,对象里面有两个属性,一个叫T的,T是谁,就是这个名字认到不。另外一个icon icon就是图片对象。这个人问到,那这个怎么办啊?啊,这个看着我写啊,估计大家不太清楚,我去来一个啊看看来一个负循环,来一个负循环啊,我们可以用ne吧,可以吗?可以哎,这一个写多少了看看。
12:04
20。那病理多少次二次。是吧,从零到19吧,从零到19,好,下面我要做件事情就是往这个里面。往这个里面塞对象或塞对象,看完了塞对象对象两个属性。一个是。而这个T的是什么呢?是啊,头像几,头像多少呢?对吧,是不是应该是I加一,因为I是从零开始的。这个能不能懂?好,接着还有一个东西是什么icon,这个icon需要设立一个图片对象。哎,这个时候我们是不是要去引入那个图片对象才行。对不引入图片对象得怎么搞呢?啊,那我们是不是得去import呀。
13:07
你import太费劲,那import你得写在上面。啊,这个时候我们要知道派打包它支持不仅支持ES6的模块化,还支持GS的模块化。那么呢,我现在写的是另外一种引入的方式,Require。里面传那个相对路径,这个应该是好写了点,斜杠images下面的。哎,这个时候我们该怎么写,把这个实际上是他这个部分吧,那我这个时候就最好用一个什么模板字符串写起来比较舒服一些,这个能不能弄啊,这个是固定的头像,接着来一个多乐福大括号I加一,接着点PNG。
14:04
能不能看懂这很关键啊啊,不能使用import啊,Port。只能嗯,通过它来动态的去加载我们的这个图像啊,所对应的图片对象。那也就是说到此为止,我们这个是不是相当于在准备需要啊显示的啊。呃,数据那么懂,也就是个列表数据呗。能看到吧,那我这边是不是能读,能读吧,好,有了这些基本以后,后面就相对来说比较简单了,还需要指定一些东西。这个大家能懂的列数,也就说多少列。
15:02
对吧,那我看一下我们的效果一共是几列呀,五列,那也就是说我们这个地方来看一下它的值什么类型。那么默认是几列,是列那就不对呀,所以我们就要去稍微的改一下啊,这个都不难啊。来它就等于什么5000万啊,也就是说我这么写行不行行不行,那我那个其实也是写死的,哎,对啊,关键数据类型类型的问题,其实他也写死的。能懂吧,只是这个时候是数值五,因为它需要的是number。能不能看到来啊好。嗯,其他的我这里面好像别的就没有什么了,我们暂时先写这两个看看对吧,看看啊来。
16:02
按理来说应该已经有效果了呀。这是我的啊,这是我的吧,这这是他的嘛,这不就是这肯定就是我的啦,对吧?好,那也就是说现在我们这几个是不是都显出来了。你想我的这个老板信息完善,能搞那另外一个那么轻而易举的嘛,因为他就相当于这个相当于注册,另外一个就相当于登录,那时候我们写登录是不是轻而易举啊啊登录的界面轻而易举就能给它搞定好那个,把那个也给它搞出来得了啊,很简单。大家看到这个不用动了,因为它是固定的,下面我们的这个这个老板的这一部分。啊,就是把这整个给他搞过去吧,哎,这个都一样,搞过去到稍微改改名字改改就行。啊,这个呢,我们叫啊大神音佛是吧,其他都不用动啊大神音符懂不懂,好这个呢就是。
17:11
大神们。哎,大神怎么写好大神信息,好了,来看一下啊,我们大神信息呢,它其实就是有有几个信息没有,大家可以来看一下那个大神的信息啊呃,我怎么样,就看这个得了,看这个截图。我们不有截图吗。在最下面。有一个求职岗位,还有一个什么。个人介绍能看到吧,啊,求职岗位和个人介绍啊,求职岗位啊,就这一个,就不要写这个了啊,叫求职啊嗯,三岗位。
18:02
嗯,这不对吗?岗啊,你们不会是吧?岗岗位啊,好,请输入求职岗位啊,请输入求职岗位啊,就这样啊,就是这边呢,就是求职岗位,你们都没一个人会吗?好,再来一个啊,还有一个什么呢。那个个人介绍啊,个人介绍啊,个人介绍。那后面的这个就什么。是不要了,这还是个保存。怎么可能,那这个就这个这个tax driver就没必要写了吧。没问题吧,好,那我们就快速的去看。看看我们当前的这个有什么错误,把它打开啊。呃,我们重复引入了啊,重复引入了啊,来看一下是什么概念,就是这个地方这一个包括这一个是吧,这个不要了呀,刚才没删掉没看到好。
19:11
来啊,看一下。在另外一个谁大谁淫惑走里。吃好啦好啦。嗯,我们现在写的是个纯界面啊,纯界面下面。
我来说两句