00:00
好,那下一个我们要去做的事情也非常简单啊,不来就是我们现在你看现在外面都是这种,每个路由组件是不是太简单了,我们现在需要去把各个导航的对应的这四个路由组件的静态组件搞出来。所以静态组件就是从我们的静态页面里面,把那些标签和样式给他什么是不是抽取出来啊。这个能懂吧,嗯,好,一共有四个组界面,M设word以及什么。好,M set里面涉及到一些图片资源,就是我们最终要集中这个。这个界面。能看到吧,这里面涉及到一些图片资源啊,这些图片资源啊有哪些呢?这里面给大家列出来。那那这个导航是哪个呢?是这个这个里面的图片懂吧?呃,下一个呢是shop shop是这个左边的图片。另外呢,啊,还有一些。
01:02
是的,这是什么呢?星星啊,主要是我这每一看里面是不是有个星星的一个显示。啊,这些图片资源呢,我们都有。啊,当然你可以在静态页面里面去拿也没问题啊,我们这个地方是有的,我们来看一下。这不resource对吧,接着是有什么images啊,我们需要去取三个,一个是这个食品分类的列表的,这个是那个商家的。这个是那个什么星星的。Can you see。把这三个文件夹。放在哪里呢?我先会在这个M里面建一个专门的文件夹放图片,你说写什么名字?啊,我见的是images。这不是绝对的,比如说老师写这个行不行没问题,写这个行不行,也没什么太大问题啊,你来写个比较完整的啊,给它全部塞进来。
02:04
没对吧,啊,把这三个图片拆开,接着下一步就是要去把那个标签和样式。给他弄过来了。这个怎么弄?好来啊,这个稍微有点小麻烦,这样吧,啊这样。因为在这个文件里搞得有点小麻烦啊,我们这样啊,大家看到我我把这我当前的这个这个页面,这个静态页面的这个应用用web。给打开一下。你要在web里面操作起来要方便一点。就这个吧,嗯,点击OK,点击6WINDOW。那现在我们主要拆的是页面和这个mixing。这个难道不。不拆这两个吗?这不是从去抽取那个标签和样子吗?哦,不是错了啊,Index拆这个是吧?嗯,应该这个文件我们早已经写好了是吧?来啊下面啊,先要想搞,先得看清楚整个结构。
03:10
看就是整个结果大家看了啊,其实这个里面啊,做了一个大体的一个拆分,大家看一下。这不那四个部分吗。能看到吧,那四个部分里面啊,这个外面的这个div其实可以不要。啊,外面的div其实可以不要,是用来控制显示隐藏的,而这里面呢,才是来控制样式的,整个布局样式的,看到不,你就说我只需要复制它就可以。看不懂看C在这上面复制要轻松一点啊,我们就搞到这里来,那也就是说我直接放到这里来呗。能不能看到单刚才也说过了,这个也可以写成什么,是不是div,你说不写div就写三个选行不行,一样的可以对吧。而它这里面分为三个部分。头部。
04:02
首页导航就是那个轮播。认了不,接着是那个附近商家的什么列表。有三个部分吗?大家看看123能没看懂。下面搞什么句?样式对吧,样式。来先切到我们当前这个应用样式来看一下,把这个收一下。好这个啊,要找到对应的位置。这一个啊,大家看到这里面,我们首先啊,其实就是找了一个什么,你不找刚才不有个这样的一个类名吗?找到个类名三不九,他找到他了嘛,啊为了大家能看到更好一点,我这里面实际上是写了一些注释。能看到吧,啊,那在这里面实际上我是不是复制这一个,大家多了图标复制这一个是不是就可以。
05:01
懂不啊,也就是说我现在大家看到搞过来以后,我在我这个应用里面,只需要把这个回退一下搞过来,看没看到,而且你来看一下整个结构啊,看一下整个结构。那一定要看一下什么,这不三个部分吗?头部那个导航,也就是轮播,是不是接着是这个什么商家的列表。不一定我这三个吗。看到了。嗯。没问题吧,没问题,那我这个部分这一块有个问题啊,这里面有引用了一些图片,这个图片大家看一下现在。看看我们的。啊,这个还要说啊,呃,不仅图片带来问题,还有一些,还有一些事情啊,这个地方我们会用到那个mixing,而我有没有引入了没有,所以说很多样式都起不了作用。
06:05
要干嘛,引路吧,点点斜杠,点点斜杠啊,Common下面的,呃,是Dallas下面的。Mix。还会有问题的,我们看一下,哎,这是我的吧,是我的吧,是我的,哎这里面安卓要报错对吧,因为这个现在现在主要是什么,图片引入的时候是有一个路径的问题。啊,我们现在引用图片路径有问题,大家看到哪个有问题,就大家通过这个你能看到这这里在找一张图片,看到了吗?我当前大家看到它先是回退,我要回退吗?我要找image,要回退吗?不需要我我不是当前路径吗?他看嘛,当前路线也image。能懂不?所以啊,大家先去在这个里面,这面有啊,我我这不是一个一个去找,我自己找一下这里面去找images,大家看看到了吗?就应该把这个两个点换成什么一个点,就是去掉一个点呗。
07:11
懂吗?啊,这是不都是。其实我们除了星星图片,是不是还有别的图片,还有一些图片啊在上面只是没有匹配而已,大家看到我再匹配一下,我能匹配到一些,嗯,来解释大家看,但是这个路径刚好对,能懂不刚好就对啊,所以大家建名字的时候,大家要注意,你要见好名字,到时候改就少一点。可以吧,啊没问题好啦,那也就是说现在我要去保证啊,我的这个东西啊能出来对吧。哎,我的要是等一下是不好了,那么看这个这种这个得用上是微才行,我还没用swe认了吧,Swe还没用上啊,整体现在就是这样的一个结构,这个是没问题的,对吧,这个头部是不是也显示了这个整体像那个样子,但是呢,没有轮波。
08:14
对不对,轮播等会我们得用上嘛。很多吧,嗯,好。没问题啊,那那也就是说我们的这个静态组件就基本上搞好了,等会我们再去用那个来做轮播啊,不着急后面是不是他们是吧,这后面的几个界面都比较简单,但是有一个小问题啊,来我们再猜呗,猜的话还是去进入我的这一个,先找的这个标签很简单,就是这个。对不对,这个懂不懂啊,CTRLC来,那也就是说现在我去找那个什么设计吧,放到这里来。看一下我的设计,我的设计有两个部分。
09:02
一个是这个头部还有一个什么,是不是一个搜索的表单呢?啊,一个搜索的表单啊,下一步干什么样式来样式的话要找到我的袋好。这不是色情吗?是吧,好,那设计的话呢,我是不是应该在这个。但是这里看一下,看一个什么问题,大家缺什么。缺什么,你看到这里面我只有只有没有的。看到吗?没有hand的,那没有hand的,没有hand的,我这个地方大家看我现在我现在这个搜索就是这这么丑,看到了吧?啊是不是不行了啊,那他它是在写在公共央室里面的,但是啊,我们最终的所有头部用的是一个组件。认了不,我们这个头部最终无论是这个搜索还是这一个外卖都用了同一个,其实呢,我现在可以这么做,大家看到啊,我们用同样的,我们刚才不做过那个m set吗?M set里面是不是写好了一套,它写好的是最完整的一套,为什么最完的大家看到它有左边的设计,有中间的标题,有右边的登录,看到吗?它是最完整的一套。
10:32
这个能不懂,其实对于我当前的这一个搜索来说,主要是要这个标题是不是,但是我们真正会抽取成一个组件,我们会用一个语法叫lo,知不知道对吧,占位符插槽对吧?好什么概念呢?也就是说我现在准备把这个,把这个整体这个样式全给他,给每一个。这里面这四个都有,到时候我们在抽取,进一步抽取的时候都给把它移除,它先暂时都用上,但是这个名字不太好,这个名字现在只是针对于我这一个主页的判的对不对,所以最好改一个名字,就叫什么hand的,那你改名的话,你这个地方啊,这个地方是不是也改个名字,这种懂不?那这样的话啊,我们就统一了。
11:22
就名字都同意了,那这个时候我把它一搜,把这个看下C给它复制到我当前的这个设计的设计的上面看到吧,里面的名字都是一致的,类名都是一致的。那么呢,后面没关系啊,后面这些东西都会删掉的,因为我会到处抽出去,我之所以现在都写这个,是想说明到时候我会他们都一样,所以我把它抽出去啊,先写着。好,那这个做好以后啊,大家再来看我们的这个能看到吧,那后面这个订单和这个个人中心其实都是么,那真是就一模一样了啊,没什么太大改变了,也就是说下一步我们去把订单很快啊,把这个搞过来看下C来放在我的订单的这个里面。
12:20
对吧,但是这个订单里面会显示一张图片的。就订单里面会显示张图片,听懂不?那这个图片呢,我需要干嘛去,是引入一张先啊大概呢,先有一个images,我这个word下面有images吗。没有,那就写images对不对啊,这个就没有必要写what,这本来就what,这image上有个P点偏,那点偏在哪呢?找一下图片,就直接在这里找吧。大家看比他吗?看吗。
13:07
放到page为放到里面,这个是page放它里面不是主要是主要是现在我就他就他用了,就他一个组件用,我就放在放在组件里面了。那那要公用我会放到放哪去了,我我会放到这个里面来,我放到框里面来,懂我意思吧,如果是多个组件公用,我就会放到这个里面,那如果如果是某一个组件特用,就他自己一个用,你放到外面那就不像话,因为我这个就代表一个组件嘛,啊假设我的这个文件这个P点偏NG,就他一个用对吧,就这个文件用。那你放在外面这就不太合适了,真的吧,啊,这样大家确认一下,是的好,样式也一样啊,去给它拷过来。一样,就是很简单,就把这个拷过来是吧,看下C来看成V拷过来,但是呢,缺什么呢,一样。
14:06
是不是缺点hand的,就他也hand了,那么呢,他也hand了,那很简单,还是一样去把我们的这个hand的他C拷贝到我当前的什么是不是这里来能不看懂,好,那下面继续啊,我就不看了啊,先先把这个搞完,下一个是个人中心,个人中心呢是这个。对吧,把它看成C拷过来,拷到个人中心的这个里面。好,接着去考它的样式啊,因为它这里面没有应该是没有图片啊,有图片再说好,下面这里样式也是一样啊,一个意式就是把整个这个吧,还是C给他拷过来,拷过来之后呢,什么还是得看对不对,还是看好这个地方,还有一个是角会用到会会用到那个mixing。
15:03
大家把那也整一下。也就是说这个里面会用到啊,大家看一下这里面用到一个fix。我在干嘛,还是一样,那个引入语法是不是一样,一模一样的。嗯,这里面我为了快手我就不去看它也不用了,我就直接就给它都放进来得了。可以了吧,好,我们现在去看一下,看看整个啊,这个是不是可以。这个就可。可以吧,这个可以了吗?OK吧,那也就是说现在啊,现在我的基本的导航的四个路由组件的静态组件啊,基本上就完成了,那下午的时间呢,我们主要的重点任务是去做它相关的一些东西。啊,抽组件啊,或者动态显示数据之类的,好,那我们就先做到这里。
我来说两句