00:00
大家好,我是学习园地的特约讲师高国峰,上节课我们封装了网络请求,那么具体的每个页面如何请求网络,如何访问接口,那我们在每个页面的时候再单独申请一个跟页面对应的一个JS文件,咱们再继续分装,前面呢只是封装的公共部分,那这节课呢,咱们开始,呃,项目初始化咱们做完了,咱们开始做界面,我们先看一下需求原型图,那我们从哪入手呢?先看一下每一个页面都有下边的导航,首页分类,购物车,我的这样的几个选项,这是移动端的导航,通常呢都是作为商城,都是这样的差不多的一个形式,那我们就先做首页的这样的导航。那导航呢,肯定是对应几个页面,那我们把每一个页面单独做一个目录在里面,那前面呢,咱们已经做过了,比如说home下边有home这样的一个,呃,文件,那这里边我们加上,当然每个一定要有一个外层的div,比如说我随便先加一个H1。首页加上这个,然后我们再看一下。
01:02
分类页面,我们下边建一个嗯组件,每一个页面先把这些组件都建完,那我们就直接叫做分类。尽快说话。首页,嗯,最好是大写的。嗯,这就可以,然后我们在这块加上。加上外层的。CV,然后加上he,当然这现在只是临时的分类页面。然后我们复制一下吧,然后再有这个概述里面,我们也是新建一个,呃,组件概述里边我们组件呢,我们叫名就叫做这个文章详子这个商品详情。那我们也叫这个名称就可以了。来。写上商品详情。商品。详情。
02:01
要保存一下,然后呢,我们还需要有呃,用户在里边。用户,这里面我们加一个个人中心的用户。也叫这个名pro。通常个人中心都叫这个名,但是你叫user也是不是不行的,也都是可以的啊,然后购物车我们再新建一个组件购物车,那购物车呢,我们起名字叫呃,Shop卡吧,Ho。好看。上。购物是,然后我们个人中心这块我们也加上,加上个人中心好加上这些,那我们也需要把第二步呢,因为每个页面肯定都是通过路由导航我们加进来的,所以呢,我们在路由这里面我们开始加路由。把这些加进来,那首先我们不用这种去导入。因为用这种去导入的话,他不能给我们,呃,类似于懒加载那种对吧,所以呢,我们一定要自己去写,比如说。
03:03
用这种方式。你复制过来。Cost声明一个,比如说声明一个home组件,Home组件等于,然后呢,它是一个什么?是一个呃,箭头函数,但这个故事我们可以把它去掉,然后我们home组件是在这个下边的有一个home目录。Home目录下有一个home这个组件,当然我们现在有多个组件,不光是home,还有什么,我们这里边还有分类caty,然后它在分类弄下cat加下边的这个组件,然后还有。呃,文章详情的。De TL。就是商品详情。一个一个生命价bet。然后。这个先是目录第这个下边的这个组件。
04:04
没有,我们这个是,嗯,用户和购物车。用户,呃,咱们叫也就有了,咱们叫做。呃,Pro然的背面。Pro这个下边的这个图件好像还少一个,还有一个购物车对吧。Shop up。然后在购物车这个目录下,每个页面单独是一个目录。好,我们都加来了,然后呢,分别写这些路由,把每一个路由对应的都给它加上,比如说。我们第一个。从里边嗯,Home路由跟路由对不对,那对应的就是home,那组件呢,那就是home对吧,当然了,我们可以在每个里边加上m Meta对吧,原元素,那现在暂时不需要加这个,然后呢,除了这个加home组件。
05:02
我们还需要有一个默认的,反而空路由的时候,我们也让它加载home组件,加载home组件,那这个呢,Home组件的名字这两个是不能一样的,我就叫缺省的home,因为名字一样的话就会冲突不好用,所以呢要把这个去掉。这个不需要了,然后除了有后路由,我们这一块再加上嗯,还有分类的路由对吧,分类的路由一个一个的写上分类,我们也叫做cat啊go就可以,然后名称也是caty,这个组件也是我们cat YY加这个。除了分类,我们还有购物车详情页。对吧,还有呃详情。详情详情,咱们用不用动态路由呢?可以不用动态路由啊。详情页,咱们叫做第呃。
06:01
De deta。Det,直接就这个吧,咱们用直接用参数的方式。EG。加上这个,然后还有购物车和个人中心。购物车。Shop CRT。加载这个组件来,还有一个嗯,个人中心。个研中心,咱们叫做呃,Pro或者你叫做user都可以啊。Pro。FLE。Pro Le加这个,这样的话我们所有路由就都选完了,这路由那接,然后边的路由的导航首位那些我们后边遇到的时候我们再加,需要的时候我们再加,现在呢暂时是不需要,现在呢我们使用的都是什么,都是历史模式对吧?加载路由,把路由导出这些就可以了,其他的我们在呃,其他组件里边用到的时候,我们再回过来写这些,导航首位我们先把这个加上。
07:11
加上之后,那我们的导航既然是每个页面都需要,那肯定我们需要把它做成一个组件,你可以把导航做在我们放到,因为它单独一个组件,那既然是本项目用,其他项目有可能也用,你可以放到这个下面。可以放在最下面。那另外呢,这个组件其实就用一次,不用每个页面加的话,这是单独页面,我们也可以直接在APP里面去写。就跟它跟我们提供默认的格式是一样的,可以直接在这里边取加这个导航,可以把它写成组件的,也可以在这里边直接去写,你比如说这个就是我们的导航,只不过现在在上面,那我们现在怎么样,要把它放到什么,放到下边,那这里边儿加的导航可不光是有。嗯,这里边儿有首页啊,首页。咱们四个。有四个正好有分类,分类页面,然后呢,有啊购物车购物车。
08:09
然后有我的就是个人中心广告,我们这几个就写了首页分类购物车,我的。那下一步咱们需要做的就是样式对吧?当然这里边to这块这个导航咱们说多多次了,对不对,就是咱们讲路由的时候讲过,点击这里边每一个链接的时候,对吧,对应的加载哪一个页面是这样的情况,所以呢,我们一定要把这个对应的链接和我们刚写的那个路由这些东西是要对上那首页的话,我们就对应登路由就可以了。对吧,那分类这块。呃,分类这块我们叫cargo,在这块那购物车,购物车呢,我们叫它shop cart这块我的叫pro。这样的话到具体的某一个页面,那咱刚才不写五个吗?我还有商品详情吗?商品详情是在首页里边点数据或者分类里边点数据转到的页面。
09:03
过去的,那不需要我们在这里边去写。不需要我们在这里边去讲啊,因为这里面只有四个,那我们来。看现在在上边对不对,你看默认显示首页对吧,分类页面购物车我的看上去现在是可以,现在咱们需下一步需要的就是样式把它放在什么,最下边那每一个按照我们这里边需要的。你看它都有什么,上面都有个图标,有个图标和什么和一行文字,图标和一行文字,对吧,这个是不需要的。那现在呢,我们就看一下,如果我们用图标,你可以下载图片,那我们还有另外的一些办法,什么办法呢?我们可以到什么专门的图标库里边,咱们用CSS样式去写更好一些,如果你用图片的话,那图片呢,就基本上固定颜色了,对吧,固定大小了不好做,那我们如果用图标的话,那这个图标可以是响应式的,也可以改变颜色会好一些。icon我们在这里边呃搜索一些图标。
10:01
比如说咱们需要购物车的图标,咱们就叫嗯,购物车直接搜中文就行。及书法。购物车。看一下哪个比较漂亮,你就选哪个啊,比如说咱们选择一个吧,随便选择一个这个。这购物车加入到这个购物车。这边有一个,然后我们还需要有个分类。分类。在里边看一下,喜欢哪个分类就加哪个,这种的这种的这种的对吧,咱们就选普通的就可以了。选普通的分类。这种吧。加入购物车又加了一个,然后当然你可以把整个项目需要用到的图标全下载下来啊,我这只给大家演示这个,后期我就不一个一个这么加飞机了,就直接怎么着,直接下载,从这里面下载图片就可以了,只是演示这个,那你所有的图标只要能搜到,你想用都可以用同样的办法。然后还有是购物车分类首页,对不对,还有一个。
11:00
首页。首页我们选择呃,一个漂亮的一个小房子,比如说这个吧。首页,然后还有一个个人中心用户用户。用户呢,我们选择一个好看的头像,看这里边哪个好看。都差不多。的。这个吧,加入一个。然后我们看下购物车,购物车里边我们选择这四个对吧,你觉得哪个不好看的话,你可以把它删掉,再重新换一下,然后呢,我们可以添加这项目,那就可以添加到你get里边项目里边,然后我直接用也可以,但是这他都会放在CDN上,你每次都CDN访问,那现在咱们想在这个项目结合在本地使用,那我们就可以你的下载代码。我们访问找到这个程序。我看一下他没下载完啊啊,然后。解压到。这个目录下。关闭一下。
12:02
那它这里边儿有我们给我们的DEMO的例子,对不对,有我们自己的CSS有这么多字体库,那我们现在需要把这么多的字体。和这个文件,这些字体库和这些文件。通通怎么的,当然那DEMO演示的话我们就不用去看了,你想放的话也可以。然后我们把它放到我们的字体库样式里边,放到这里面。好,都添加到这个里面。那这个里边现在就给我们加载的,你看就是我们的这个字体库对吧,然后呢,字体库的一个,我们得加载这个类对吧,然后下边是每一个具体的字体,我们只需要加载你看这首页对吧,这个是呃用户,然后分类购物车对吧,只要是我们通过这个类加在这里边,就会把我们这个图标给我们加上。那现在这个类拿过来了,它这里边有了,它下边找的也是当前目录下字体文件,如果你把字体文件单独放在一个目录下,别忘了在这里边会要改变这个地址才可以,这里边我们就不改了,因为后期咱们有可能再加其他字体,改来改去也比较麻烦,对吧,你重新粘地址的话,也要重新改变这个录目录结构是不需要的。
13:12
那下一步呢,我们就需要怎么的把这个文件加载到这个里边,或者是直接把这个文件在我们的。这个位置。这个位置里边直接引入都可以,用哪种方法都可以啊,直接在这里边引入也可以。然后你引入这个文件,就把这个字体引入了,那也可以在这块直接引入,两种是一样的,那直接在这引入,用别名a ss ets就能找到src下的这个目录,CSS下边的叫做it,找到这个文件。这样的话,我们在页面里边就可以使用。可以使用这个。对吧,这个里边的你看。我们一定要加载这个类,加载完这个类对吧,就可以使用下边的每一个类了,对应的每一个图标,那么在这里边写一下,比如说首页这块。
14:04
在这里边,那我们因为它是上下两行的,所以我们这块先加一个,呃,加一个div吧,啊用它换行。把这个字放到这块来,然后我们这块加一些图标,图标呢,我习惯用I图标,你可以用SPA什么都可以啊,用I我们加一个class,引入我们说的icon这个类,这样的话我们就可以把这个相当于把这个图标当成自己给我们引入了,然后具体使用哪个图标,你icon开头了,比如说这是首页,我们加这个他就会找到。我们这个里边的。首页用相当于用的这个首页这块用的是这个字体图标就给我们拿过来了,那同样的办法。嗯,在这里边不光是我们要加这个首页,当然了我们分上下两个,正好我也加一个div吧,放到里面去。我们这块来啊。因为我们在这块你看是放是相当于上下两行首页图标和这个对吧,上下两行。
15:01
那样式的咱们后期再再去写啊,先放在这儿。然后里边每一个。随便吧。这块分类分类。购物车购物车。这块来一个啊,我的我的,然后再把这些首页这改了,这块分类I con杠。分类分类。它会自动提示用工具证明我们加载到了这个是购物车。购物车。然后这个是我的,呃,个人中心。用户对这几个,然后我们缩小一下看一下。你看他现在加上这几个图标都在,对不对,但是字体样式它现在是多行,这个呢,肯定是我们需要开始,我们需要改我们的什么,做我们的样式了,那这里边儿呢,我们将每一个链接,我们给它加一个加一个类。
16:06
这里边加一个类,我们叫做什么呢?这块是导航,叫TAB2ITM吧,Itm每一个我们都加上一个,需要给每个链接单独去写样式,前边的每个文件呢,我这个样式都单独给大家写一下,后边呢,如果咱们用呃有赞的那个组件,那我就直接把这些写好了,不然这个太耽误时间了,每一个去讲道理都是呃都是一样的。AV导航这是加位,然后我们在下边就开始一个一个的去处理这些内容,处理这些内容,比如说那我们现在让这个导航,呃,让这个导航的背景颜色加一个,咱们先看出来啊,这个帕这些东西我就不要了,比如说bak背景我们来一个。嗯,背景颜色吧。好了。比如说我们要的是井号。嗯,大概是稍稍一个灰色吧,六六。
17:01
大概可以了,这个一般我们导航都是这种F6 F6的一个背景颜色,不是整个页面的这样的一个,呃,背景颜色。这块,然后呢,他加这个颜色了,那我们得让这里边的,它不能说是多行,它得摆在一行里,不对得放呢一行里面,那放到一行里面。这块我们应该把它加到啊,这块加上是什么SS了,对不对,加S了,我们就可以直接在导航里边,咱们还有一个什么,还需要有一个类。还需要一个类,咱们刚才写的叫tab-BRM,写在这个导航里边,因为这个是我们现在又默认的这个啊,你看这下边na ID在它里边是不是有这个类啊,那我们现在给这个类让它怎么着。横摆过来就可以了,不用说。在每一个里边,那需要在上层里边,那我们用呃弹性和布局,用弹性和布局,那我们首先呢,需要在这里边,呃,让它是什么?第4PLAY我们得把它变成弹性和。
18:02
变成弹性盒,它变成弹性盒,那我们里边的每一个,你看它现在这不就横过来了,对不对,横过来让它每一个占用的空间是一般大的,那我们就flex,嗯,每个人各占平均占一份来一。你看它就会变成这样了,对吧,所以弹性盒布局非常方便,那我们还需要让里边的,比如说让里边的文本。T用文本比如CT居中啊,默居中的嘛,默居中,所以这加不加都行,高度一般的呢,我们导航像手机里边下边导航高度一般都是50左右,那咱们就给个给个50。你看那个收入更高一点对吧,然后呢,我们设置它里边的字体颜色,当然那个字体它都默认的颜色,当然默认选中这个首页是这个颜色是我们默认的这个地方,它自带一个这样的元素,我们加的对不对。我们得设置一下字体的。啊。字体的尺寸吧,大小吧,字体颜色这个颜色也可以,我们就自己尺寸吧。
19:02
嗯,VR咱们用标准的尺寸,记得咱们在监控录的文件里边有一个杠杠,自己的尺寸是14像素,对不对,所以你直接写14像素也行,那统一下看稍稍怎么样变小一些,稍稍的变小一些。就可以了。嗯,稍稍变小一些,现在还在上边对不对,那我们再分别做里边的,呃,一些图标。比如说我们需要在这里边把图标他们两个之间的距距离给分开。这个分开,所以呢,我们在每一个图标,我们再加一个。这块已经有个I cn fo这个字体,那我们用这个里边的这个。最好是给他加样匙,给外边加钥匙,里边图标不变,那我这好再来一个plus,等于I con,给这面加一个图标吧。又加一个类,那每一个里边我们是不是需要都加一下。都加一下这个里边,这个里边,然后还有。
20:01
首页。这个里边。啊。那我们现在加上那一类了,那我们就可以单独给这个图标,我们去给什么,去给样式了,比如说。图标大小啊调整啊,那我们就是这个里边的这个里边的icon这个类,这样的话就能控制这个图标,那比如说我们设置宽度,比如说24像素啊,大概的不行,咱们调高度。相送。你看跑到这边呃,位置现在没关系啊,稍稍改变了一下这样的宽度高度,所以下边距离怎么着就可以让它去分离,分离开了,然后呢,MMRJ。呃,Marin顶部,顶部呢,我们需要给它个几个像素,别让它靠的太近,三个像素吧,你看上面是不是就有点距离了,对吧,然后呢,我们再让它居中。呃,用V这个垂直这个咱们再移动。
21:01
立体效果。嗯,力气效果主要是因为什么?它现在是嗯块级,什么是行级元素对吧?块级元素,那我们得把它变成行级元素,它才能通过这个,呃,Pass例这种居中或者是这种居中对不对,那我们得第一次play一下,第一次play in like block,让它是行几块,你看这样的话就可以居中了。就可以居中啊,然后这个字体什么也比较,也比较粗一些,对不对,所以呢,我们。设置一下这个它本身下边字体都是A链接,对吧,那我们给这个A链接也给一些处理,字体加太粗了,那我们不要出字体对不对?A链接,你看这细字体是不是稍稍好看一些,那颜色呢,这个应该是他那个默认的颜色,呃,颜色呢,我们也改成一个用我们声明的变量的那个颜色,有一个color。对吧,文本颜色TST应该是F6F666的那个颜色对不对。这样会稍稍好看一些。
22:01
对吧,然后呢,A链接默认的下划线什么都去掉了,所以呢,在咱们工艺样式里边,这里边你就不用去掉,然后选中的颜色,这样也可以大致的样子就。好像没什么问题了,已经已经可以了,对吧。已经可以可以了,那我们需要把这个放到最下边是不是才可以啊,放到最下边,那放在最下边呢,我们就可以用什么用定位的方式将我们这个放到最下边,就是我们最下边使用的导航了,对吧,放在这个位置。PC端的一般的放在这个位置对吧,环境端的一般呢,我们不需要放在这个位置,所以呢,我们在这块,这个放在这里边也无所谓了啊,就是所有APP给自己,这是它默认的跟我们创建的加的这个,那我们就放在那块不动,如果不需要的话,你可以把这个删掉,因为我们在公共部分里边一样有这样的全局的一个处理。然后我们把它固定,固定了,我们就让它是一个使用位置,固定位置用这个就可以,那现在写的固定位置,你肯定得写什么,让它左部是零对吧,然后呢,又是零。
23:03
这样的话它就会100%,但现在看没有效果让它在底部,那我们就得加什么BOT To Button,我们button不是按钮啊,BOT To Button让的是什么?零是顶部,你要想在顶部的话,就top是零,你看是零就在底部了。这就可以了。然后我们点看了一页,你看每一个购物车,我的购物车。都可以看。哪个都没问题。分类,然后呢,选中的导航默认是颜色,那就是我们说这个导航它自带的一个标签。这个属性是这个对吧,所以这个是控制它当前选中是哪个分类是一个颜色的按钮,也就是在我们这个里边,它自带一个刚才那个那个东西不用去调整啊。基本上写完了,但是是不是上面再加一个阴影是比较好看一些,所以呢,我们最好在这个导航这块,我们再给这个航加一个,加一个阴影,加一阴影。
24:02
呃,左右,比如说是零二。然后在上边上边左上下上边负负十,就先先随便写一个负十像素,然后呢,嗯。阴影是一个像素吧,这是左右上下上这块的。然后一个是破散,然后几个颜色RG。随便起几个颜色,比如说灰色的100 RGB100,然后透明度是零点。二。看一下负十,你看是不是太多了,那我们这就可以等到负三。对吧,一点点,好像这个又太重了,对不对,那我们这块再调整一下,比如说0.1。稍稍有点感觉就行,对吧,嗯,完美就这个啊,当然我们后期也有现有的,这既然是很通用的东西,所以呢,有固定的这样的组件啊,只不过咱们现在前边几个页面的东西,我都是自己会给你详细的写一遍,然后后期我们这些都是用组件,很少去手动的去写,你写的再漂亮,里面有那个写我的组件那个漂亮。
25:12
不是模拟的去写一下啊。好像上边空的少,下面的多,那你在这个顶部。这样好一些啊,当然这些都可以调整这个样子好,谢谢大家,这节课我们就做到这里,这以后我们主要做。
我来说两句