00:00
大家好,我是学习园地的特约讲师高洛峰,上节课咱们学习了VIVO的组件化开发的一些基本的语法,如何创建组件,以及组件的相互关联,那这节课呢,咱们按照官方这个DEMO,我们实现一个这个结构,再熟悉一下为有组件化开发的一个思想,最主要是怎么提取组件这样的一个过程,如果这个思想掌握了,那我们下一步就是组件之间的通信,然后一点点去学就可以了。所以呢,这节课也是非常重要的,怎么去提取这个组件,那组件在划分的时候呢,我们可以把这个所有的功能,比如说在这个页面分为头部,然后呢,中间的主体部分,然后以及这个侧边栏,外层是这个三部分,那你可以把这个布局的部分最好是放在最外层这个应用上面。最外层这个应用上面也就放在这个位置,最上层来我们这块。啊。删掉了啊,那把这些里边的这个也都删掉,现在不需要。布局的东西最好放在这里边,让里边的每一个组件不涉及到一些布局,因为它有可能你就说,比如说里边的宽度高度在每个组件里边去写,去写死的话,那么这个组件有可能只能放在这个位置上用了,不能放在别的位置上用,所以呢,把布局的东西放在它的上一层,那里边放什么内容对吧?这个内容要尽量用组件单独独立才可以,你如果都写在里边可以,比如说如果我们写完,那我们就是1DR,假如说有外头有三个组件,那我们就他组件对吧,然后呢,Man主体组件。
01:29
然后侧边栏,比如说ID呃三半这样,那我们在这里边模板里边加载三个组件就可以了,那布局的东西写在里边。那假如说这么做的话,那我们需要在里边组件布局,那组件呢,就很难公用了,对吧?那如果我把布局的样式写在外层里边不涉及到太多的布局,只布局自己,组件放在哪都可以。这样的方式才是正确的解法,那假如说我们在外层,这个本身APP就是个组件,对吧,那我们布局一下,比如说。
02:00
最外层来div,当然了,你可以he section都可以,对不对,然后呢,里边我们来一个he harder头部对吧,头部,然后呢,我们来个M啊,来个主体区域吧,主体区域div吧。然后我们下边for。这是用H5的这个标签,这些不是用的我们自定义组件,不是用的自定义组件,这是用本身的RTM标签,我现在在写布局的部分,比如说分成上中下三部分。然后呢,在中间的部分里边。我们又加一个,比如说啊ECT主体部分吧。来吧,就是用用div吧。Div侧边条我也用div分这么几部分,那这里边的布局呢,那比如说嗯,最外层这块样式我们加一个。就比如说BOX1随便写了一个,然后头部我们家class来一个box,就是head吧,加上这个类。
03:01
然后这个主体区域我们加一个plus。这块加容器Co,嗯,容器con,我就叫con吧,简写一下,然后这块主体区域min,这块主体区域里面我们这块叫做呃,侧边条这块已经是中间部分了。呃,内容部分希体体也就这个吧。那然后正好来侧边条,嗯,Sid赛吧。这边部分,然后这块拉来一个。叫做photo for,我用的都是类,那我在这个最外层这块布局,当然了,我们现在写的布局,你这块是什么都看不到,对不对,那我们开始加这个样式。比如说我们在这个地方,原来的地方不需要,我就用最简单的电压位加线压态布局了,Con最外层的布局,那我们宽度让它是呃固定的宽度,那我们这会可以用什么,可以用一个变量,假如说改变变量以后的所有用到的宽度,那我们都可以用的这块,那我们这边加一个。
04:05
只要在这个首页面去使用,不让他在子页面使用下这个l language等于SGSS,然后第一个。整体的一个宽度,Wta宽度,假如说是。呃,是1200吧,这这这这这个浏览器咱们现在是放小的,咱也别做那么太宽,那就是呃600。600像素加一个,然后你做几个颜色的值,几个颜色的值go lo,颜色E,我们是井号CCC这个,然后在颜色二我们做一个井号888,就是模拟的两个颜色,那我们这是宽度,那我就直接用这个宽度就可以了。这是整体的宽度,然后呢,整体的一个背景颜色,那我们用上啊。这个八八这个咱们还是用这个卡。
05:01
用这一吧,整体的一个最主要区域的颜色。然后我们给一个呃高度,随便给一个高度,这个高度是临时的,里边放内容的时候我们再篡改,比如说500像素加一个这个。你看现在就变成这样了,对不对,那假如说我让它左右居中,Mar g marin,零个像素AU to左右自动就会居中,你看左右集中,当然这里边还可以加一些公用的属性啊,比如说啊HTML body。然后所有的样式可以给它清除,PARTY0个像素,PARTY0个像素等等。当然你这块不加这个东西也是可以的,不加这个的话,让他所有全局都用,那所有的这个marin都清除对不对,然后比如说u Li Li等等等等都可以去加这个什么图片呢?Img啊对吧,都可以去掉,你看上边下边咱们先简单布局一下这个这个样式啊。就是这个,然后里边我们还有一个头部点he DR头部。
06:04
头部呢,我们可以设置呃宽度,假如说也是整体通,而那我们直接变量这个宽度高度H直接接,比如说80像素。这个高度咱们也是定义的,然后B背景颜色咱们用这个包袱COLOR2。你看头部就有了,对不对,那头部下边。我们再放上呃一个。我们可以放上一个空白条对吧,放上一个空白条,或者是你加上那个marin什么的都可以啊,你加不加,那我们加一个min主体区域。主体区在这块我们也来一个宽度,宽度是什么呢?宽度是整体的,这个宽度你可以用100%啊都可以的。这里边用100%。都没问题的,因为它最外层我们已经设置了一个一个宽度,对不对,宽度主体,然后高度给一个,比如说300像素吧。
07:02
当然这会只是临时做的,不是这是地面,因为我就缩到这么小的区域了,对吧,300高度300,然后再加一个颜色,这会就随随便写个颜色了。井号。捏着就不需要粘这个黄色的区域,对不对,那下边还有什么,还有页脚的区域,还有页脚的区域,For也是一样的,宽度一百百分之高度he he HT高度是。啊。100万像素背景颜色,绿色。来下边就加个一角,但是中间马什么都可以去掉啊,然后我们还有呃,Con内容区域,面容区域。宽度70%。宽度70%,然后呢,嗯,Lolo左加这个。不让做。嗯,然后B加背景颜色,我们给一个井号。
08:04
嗯,倒吧,Color Co主体颜色二的部分。一的部分吧,进行的前点,然后嗯,高度得给个高度,不然显示出来高度呢,也是300像素,其余。你看就出来了,对吧,那70%比较多,那我就60%吧,做一下对吧,说一下,然后呢,我们再给侧边栏set,给一个这个宽度40%。然后又五分,然后背景颜色。我们是。嗯,正好随便给一个吧,嗯。因为都是用灰色,咱们区分不开,然后这块黄色也有了,咱别太用太深的一个颜色,FF00。嗯。零零。这还是黄色。
09:01
然后给个高度。给个高度,咱们也是300像素。就加上来了,对吧,这布局。这是最外层的一个布局,布局写在咱们首页上面。跟原来一样,或者组件这样的话,我们组件里边就不用摆这布局了,只关心我们自己组件的内容就可以了,比如说那我需要建哪些组件了,这里边需要建一个。嗯,组件头部h he低压头部这样的组件,然这组件和我们这个标签有点呃相同啊,那我们是自定义的。MY,我的头部对吧,一个组件,然后我们再需要建一个。组件建一个。嗯。这块然后有菜单,你可以进菜单M我的主区域main。前面加个麦吧,自己区分一下,然后再建一个侧边栏,呃,麦。我的测标栏,这样的话咱们就分成三部分,当然了还有页脚,那你就可以去自己去加,然后在这三部分里边,我们现在就可以在主体区域里边,你看啊,去加这个三部分怎么加的,当然这三部分里边都没写东西,对不对,我随便在这里边写一个,这是he DR加个哈ER,然后主体区域这块写个manin,就写几个字母串侧边栏。
10:24
这几个都保存一下。当然这个是上节课咱们写的,就不需要了,给它去掉,那现在在这个APP里边,那我们现在在头部这里边,我们就需要包含这几个组件,那我们现在把这个引入,你看iport在这里边需要引入这个三个组件,我新建的三个组件,那my hard再引入一个,然后I port引入。啊。主体区域的。在引入。再引入侧边栏三个都引入,这三个都引入了没用,还得干嘛呀,还得去注册,在这里边分别注册,嗯,当然跟顺序没关系了,主体呢啊。
11:06
主体的这个头,主体的和侧边栏,侧边栏三个引入,那这三个引入在这里边,我们就可以头部里边,比如什么my heart。这块MY2,你可以用这个he DR加上这个保存一下,你看这上面就出这个字了,对不对,在主体区域里边MYMN。在这里边就出现这个对不对,在侧边栏我们使用MY,呃,I de-B。这三个就有了,对吧,这三部分,那这三部分里边,主体区域里边,如果还需要两个内容,两个组件对吧,头部的就主体需要需要两个,侧边栏需要三个,那这两个和三个内容都是一样的,在主体区域里边,那我们现在再建一个。你可以建一个子文件夹啊,因为主体域里边有的话,那我们就是比如说child,呃,S子组件Co。
12:00
随便写吧,当然你加个S就行,这个目标在这里边,我们新建一个主体区里边,比如说我们叫一个呃栏目。栏目呃组件,那我们这块叫做我的呃栏目,栏目咱们用什么词比较好呢?它是呃后面的con吧,就这个在处理区域里边叫这个名。或者叫。主内容我的容器行吧,就这个吧,嗯,可。就这个,那在这里边,呃,我们定用一个div,这里边写上内容呢,当然这里面可以用it。点做可以做详式的。然后数据在这里mess。随便写一个。这是min测试。这块不用加逗号,然后这个div里边我们就加一个,呃,差值MSS。
13:01
当然这个组件我们在别的地方没引入,所以这里边是看不到的,那我现在就简单加这个,然后我在主体区域里边,这里边我们需要加两个,按照这个图需要加两个对吧,需要加两个,那我在这里边就加上。先一定得在这个里边得干嘛呀,Port引入,引入叫做什么啊。My con这个你看它直接加上这个目录下的这个对不对,然后这里边一样的注册组件。注册组件把这个他需要的就是这一个组件名,只不过我们名称不同,对不对,加上这个,那在这里边我们就可以使用Y。CNN。来,我们打开这个浏览器。麦希,我看我这块卖con。这个位置mess,诶这有数据了,为什么没显示。因为我这块用的什么这个date方法里边的。
14:00
Return一个这样的语法对不对?必须加,不加的话肯定是不行的。Get啊,就断网了,刚才又弄上去了,那我这会刷新一下。可以了,对吧,不加return是不行的,那加一个,那我这里边是需要有两个对不对,那我需要在主体区域里边加上两个,因为它不是两个嘛,对吧,当然这里边你布局的部分也可以写在这里边,那我这个布局我写在这个my son里边,写到这个组件里边,所以在这里边我们加上。能关人创建组件,它都是在限制访问,给一个区域的空间,对不对,只能在这里边去使用这个,那在这里边我们加上呃。这个div这里边是两个。呃,没加上Z啊,把这里边加上class,加上这个类,我们叫做嗯,My son。里面写着一个。方总,然后在这块我们再加上内点y con。
15:02
这块有个宽度是100%,呃,高度是。这块咱们可以是150个像素,然后呢啊。高低150BK背景颜色咱们用。这个。颜色吧,保存一下。来,我们看一下。他没有生效。麦西恩。Plus my con这个类。Div宽度100%,高度500。为什么样式不生效,刷新一下可能网络断了,对刚才网络断了,哎,你得刷新一下,不然它不会自动响应了,有的时候你自己去刷新一下就可以了,那。加了,但是这个颜色跟这个背景八八这个咱们再稍稍,呃,换个颜色吧,井号随便写一个34F。
16:00
加一个这样的一个颜色。你看变成这样了,然后中间假如说有个区域,呃,Marin。G marin,咱们用的是十个像素,四个标都给他十个像素。你看这样的话,它就有十个像素了,当然这宽度是100%,它是会把这个撑开,对不对,这高度也太高了,比如说我们这块是100。嗯,高度是100个像素,然后这块90%吧,加一个,不然的话妈会有默认的那个边距。不定这个这样的,我这里就两。在这个地方一会儿我重新运行一下,这就好了。那这节课先这样吧,我就不重新启动运行一下啊,然后呢,这里边有两个,那我们现在在侧边条里边,我们还需要有三个横过来的,对不对,那我们在侧边条里边,也就是在这个里边,我们中间还需要三个,三个呢,我们就都叫做什么Y霸吧。BR这YBR。
17:03
有三个。三个呢,咱们就小一点的这样的一个区块。那在这里边我们需要建一个这样的组件,那我们也在子组件里边新建一个。VE我们叫做my bar在这里边我们同样E加上这个里边呢,呃,B就随便叫一个词就行了,这里边我们直接给样式,因为咱们现在还没涉及到数据,等数据的时候,咱们下节课开始来回讲数据之间的传递,那一般都是从接口里边传过来的数据,对不对?这里边加一个类class等于YBR,然后这里边我们加上YBR,然后关注。是假如说我们给个是。估算一下。50个像素高度。Heg高度也是50个像素,M j marin是十个像素。让它四边都会有十个像素背景颜色,咱们也随便点一个。在里边用yellow吧,颜色新鲜点。
18:02
这里边加上这个了,那我们在这块已经有这个麦霸了,那我们需要在这侧边栏里边用三个,当然这里边我们。怎样的飘起?让它横着摆对不对,那在这里边应用这三个应用之前,我们必须得什么import引入。什么麦?切换。呃,这款引入自动引入,然后我们得需要注册,一样的这样道理,每一个都需要注册。然后。MY。保存一下这样注册了,那我们上面呢,也使用上了,我们刷新一下。你看三个条是不是就有了。那如果每一个里边再需要组件,比如说这个栏目里边我们需要列表,对吧,每个列表像LY你来做组件的话,还可以继续划分组件去划分,那这就是我们组件的一个简单的一个层次结构。布局的东西你可以不写在组件里边,那你还也可以写在外层,也可以写在内层,都是没关系的。
19:04
都是没关系的啊,就看你这组件怎么个复用性,才把样式或者是特效写在里面就行了,这是一个拆分,也是组制化的一个开发思想,当我们只是临时的一个布局的一个方案,这个用这个宽屏的,那现在一放大它就失效了,但是这个位置是网络的问题,我重启一下这个服务。加报错重启服务就好了,跟我们组件这个没关系,因为在这属于临时的服务器嘛,对吧,DV server,所以用这个服务器他报的错,那现在。刷新一下现在就好了,这里边现在我再改它就会自动显示式的了,比用现在幺保存一下,你看就全变成幺了,对不对,可以服用,那我在现在这个组件,我还可以在下边这个地方复用,在photo里边复用都可以,你比如说我现在想在。呃,Photo里边,Photo里边假如说摆几个,假如说摆个这块是一个二维码,对吧,找到呃,我们的photo,我好像没做这个photo的。页脚这个组件对不对,那比如说在头里边吧。
20:00
你可以共用吗?在头里边儿,假如说我想用一个这个组件和这个组件这俩组合,那怎么办呢?在这里边就按port引入,引入什么呢?引入呃。MY。这个和再引入一个。麦霸这两个,然后我把这两个在头里边注册一下行。注册一下,然后一个是my sonn,一个是MY,对吧,这两个,然后在这里边我们使用的时候可以用钢线的方式使用也可以什么呢?Con这样使用也行,对吧?头里边加这个再加上YB。然后两个给你混合型。那你知道写的时候的一个。呃,没关系。就出现网络问题了。你看这过来,但这个。太宽了。对吧,这把一放到这了,因为这个放到这里边,咱们没有限制那个肯定是一个样式有问题,样式有问题里边,因为咱们都是用float,不是所有都加float,如果所有都加float的话就好了,这个没关系,您可以比如说在这里边。
21:09
它就会出现样式的一个问题。在这里边啊,这个float。左。然后刷新一下。就可以上了带,但这个宽度90%,这个太宽了,在里边共度这个图片太宽了。嗯,你要是改成百分之,你要改这块也有个好处,你比如说改一个组件这块宽度60%,那所有的遇到这个组件的地方全会更改。所有组件全部能改,都会变成60%。看到吗?好,谢谢大家,这节课我们就讲到这里边,只是简单给大家举的一个例子,组件怎么划分,不然的话大家就不知道怎么去拆分组件,那具体内容就是我们根据实际的业务去开发就可以了然组件学习的时候还有一些细节。谢谢。
我来说两句