00:00
好的,我们继续啊,那上节课呢,我们把这个推荐歌曲呢,其实已经整完了,那这节课呢,我们继续往下写啊,那下边这一块呢,叫排行榜,那排行榜的话大家看啊,还是头部跟内容区啊,所以呢,我们先去。一下它的结构啊。来,那这个推荐歌曲呢,我们整完了啊,整完了这呢,我给他补一个,那这个呢是他的头部区对吧,然后呢,我们把这个推荐歌曲呢先收起来。收起来以后呢,我们往下写,那接下来呢,我们要写的是这个排行榜区域啊view,那排行榜那就top list呗。好了,在这里面呢,他也应该有两部分,一部分是同步区域对吧,然后呢,还有一部分呢,那就是内容区啊,诶内容区。嗯,OK,那头部我们怎么写,我们先来看。首先细心的同学可能已经发现了,你会发现我这个推荐歌曲的头部啊,跟这个排行榜的头部结构一模一样。
01:07
那么不一样的是啥呢?不一样的是里面的文本。对吧,那针对于这种情况呢,啊,我们应该怎么做。对吧,因为它其实结构一模一样,那其实这个时候呢,我们可以将它抽取成一个组件。啊,抽取组件的目的呢,是为了复用对吧,那现在呢,我们,呃,比较幸运的是啊,小程序现在已经支持自定义组件了,像之前他刚出来的时候,它是不支持的。好,那这个时候呢,我们来到官网啊,在指南框架接口这一块呢,这儿有一个自定义组件。哎,自定义组件,这呢,你看啊,Component调用那component语句话也很明确,那就是组件的意思。对吧,那这也说了,创建自定义组件,然后呢,接收一个对象作为参数。啊,先要知道有这个东西啊,那在这里呢,呃,其实它有很多的东西啊,但是这里的事例呢,其实我们如果自己写的话,你并不是并不能很好的去定义这个组件。
02:09
那大家接下来呢,看我写啊,你现在呢,要知道在它的官网在哪找框架。框架接口,然后找这个自定义组件,那现在呢,来到咱们项目里边啊。在我们项目的根目录,我呢创建一个文件夹,在这儿呢,我就叫它啊,Components专门用于放置我们自定义组件的。然后在它的下面呢,我去整一个叫navy header,就导航的头部,因为接下来我们要抽取的这个内容,是不是就是相当于这个下边板块的区域呀。OK啊,那文件夹有了以后。大家看啊,我就不在这儿写了,我不在这儿写了,我来到我们的开发工具里面啊,因为它跟我那个mapto是同步的啊,所以大家看component下边有我刚才是把定义的一个。
03:03
文学家叫那位海德。那这个时候我们右键看见啊,我们之前呢,用过一个新建配置。这是新建页面对不对,那再往下看,这呢有一个新建component,就是新建组件的意思,来点击一下啊,那现在呢,我们需要输入一下这个navy哈,一回车。这个时候大家看这是不是有四个文件。对吧,有四个文件。啊,那因呃四个文件,首先你要能理解啊,我们说组件呢,它也是包含HTML呃,CSS和GS的一个代码片段,这是我们之前在里面的。那么现在啊,在小程序里面一样的啊,它既要有结构样式,还要有行为,包括它自己的配置。对吧,那。我之前也给大家说过啊,组件跟页面的关系是一个被包含的关系,也是我们的页面里面可以包含一个或者多个组件,对不对。
04:05
那现在我们用过两种了,一种是右键新建配件,一种是新建component,那么它俩就目前来看好像没有什么区别呀。对吧,都有这四个文件,首先啊,第一个区别是APP点杰森中。如果你是页面,那么你对应的路径呢,会自动的给你写入到这里。配置中,而我们刚才新建了个组件啊,它并不能代表一个完整的页面,所以大家看这里边并没有什么路径,对吧?这第一个区别,然后第二个区别,你看GS。哎,我们在页面里边,我们知道这个GS,这是配置调用语句话很明确,就是创建页面,那现在啊在。组件这你看啊,它是component调用,那就是创建一个组件呗。哎,没问题,就这两点不一样啊,好的,那现在呢,我们组件里面有四个文件啊,首先我们要对之前公共的区域呢,去抽取一下它的结构,那对应的代码操作呢,我就来到我的web storm里边了啊,打开我们的结构。
05:13
哎,现在这是空的,我们要把之前写好的推荐歌曲的头部咱们已经写好了,对不对。啊,那结构搭好了,我现在把它拿走,放到我们的组件里面,那除了抽取结构呢,我们还应该把它对应的样式是不是也拿走。推荐歌曲,我们从这开始一直到这儿,这不是跟headather相关的吗?哎,所以呢,我们把这个也拿走,然后呢,放到我们组件的对应的样式区域。丢到这呗,哎,只不过这里面啊,我们是不需要这个的,为什么呢?因为在当前的组件里面的最外面就handle,所以把recommend这个就删掉了,这个呢我们也给它删掉。OK,那这样的话呢,组件的结构跟样式我们是不抽取出来了,那现在啊,先不管别的,我们想着如何去复用这个组件是关键。
06:11
那这个时候呢,我们来到我们之前的index.machine啊,最终呢,我们是不是要在这儿使用一次,在这个区域要使用一次,是两个地方对吧。啊,那用之前我们还是啊回顾一下在view里面我们如何去使用组件。哎,首先第一步我们是不是得引入。引入以后呢,我们需要去干嘛,在GS里面是不是叫注册component选项里边,对不对,那第三步呢才是使用。使用的话呢,我们要注意啊,我们是以标签的形式使用啊,就是跟这些内置的组件是一样的。那在我们的小程序里面如何去用呢?那这个时候呢,我们需要用到我们页面对应的阶层,哎,这个咱之前是不是一直没用的呀。
07:03
语句话很明确啊,Use components就是使用组件的意思,那么在这个里边呢,我们也是要去注册组件啊,首先你的K呢,应该是你即将注册的组件名啊,比如说我就叫na哈顿啊,跟这个保持一致呢,是便于我们去查找。那么后边对应的呢,就是你组建的路径在这里呢,我们用这个,呃,用什么呀,用绝对路径好找一点啊,这儿呢,应该是跟路径下的components下面的哎,Navy headher下面的navy啊,Her。好的,再说一遍啊,那么前边是我们注册的组件名,也就是说接下来你需要用这个名字去使用对应的组件。那么当我们使用的时候呢,我们如何去找到我们的原文件,那后边就是对应的路径。OK啊,那来在我们这儿用一下啊,头部来我们先看一下能不能使用。
08:04
看一下头部,哎,依然还在,没问题,对不对啊,那这儿能用,那说明下边这是不是也能用呀,啊,迫不及待的啊,我就直接把这个。放到这儿用一把。来,那这个时候呢,来到模拟器大家看。你会发现我下面并没有。下面并没有。哎,那上边呢,用下面为什么不能用呢?哎这儿呢,是我当初啊,我自己写的时候啊,就发现这个啊,这算是个小坑吧,呃,后来呢,我发现,哎,我往上一滚动,你会发现这有个很长的滚动条,然后呢,它在哪?在下面最下面。那我就纳闷了,中间这个空白区域哪来的?啊,哪来的,这是一个小坑。那这个空白区域哪来的呢?你要是不知道啊,你一定得去调试对不对,首先啊,大家看啊,那我们写完recommend这儿没察觉出有什么不一样的,或者有什么怪异的,那这个时候呢,你看我来到上面这个推荐这个区域。
09:07
你看它的高度,哎,多少呢,来往这边拖一点四千多。4300。那说明。中间的空白区域是它导致的,那我们再看里边的头部,就这么一点没有问题,那只能说明scar view的问题。你看scar现在多高了?4235。对吧?那scar you为什么会这么高呢?啊,在这我得说一下啊,Scar you当初咱是不让它去用flex布局去横向排列了,但是吧,这哥们比较轴。你虽然让我里边的元素横向排列了,但是我计算高度的时候,仍然以当初纵向的排列为主。去计算,所以你能看到。这儿有这么长的工作条。那也就是说我们需要给这个scar一个指定的高度,否则的话,他自己去计算,那就太高了。
10:06
来,那这个时候呢,来到我们index里边啊,找到这个们,我们需要给他一个高度。哎,给他一个高度,那这个呢,经过精密的科学计算啊,应该是300。来,过来,我们再看。嗯,你看这个头部出来了。哎,可能有小伙伴纳闷啊,你这个科学计算怎么来呢?其实就是我自己,呃。去计算一下嘛,你比如这是200,那下面这呢,我给他留了一本啊,留了一本,因为现在咱这个页面呢,都是我呃一照着手机上的APP去画的啊,没有设计稿,那这样的话呢,我只能是尽可能的去跟官网保持一致。那么大家实际开发中呢,这多至于多高啊,它一定有指定的高度啊,这个不需要担心,好的,那我们一边写的同时呢,发现了一个小bug对不对,然后呢,去修复了一下它啊,那这一块呢,诶,我们已经实现了组件的复用了。
11:02
那现在是下边这个紧贴着两边啊,那我们同样的是不是需要给下边这个包裹器top呢?先给它来一个什么。来在这里啊,那这呢是排行榜对吧,它的样式先给它呢加一个20个RPS的啊内别句啊这个呢,跟上边的推荐歌曲呢。保持一致呗。那这样的话呢,好看一点啊,好看一点,然后呃,我们再说,那现在这儿的内容呢,它是写死的,那肯定不行。我们是不是要写成动态的,那大家看啊,我写好这个这两这两个里面的文本它并不一样。对吧,那如何写成动态的,我们一定要去看对应的GS,来,来到组件里面找到它的GS。那么在这里边大家看啊,这有这两个选项。一个叫properties,一个叫。来,那先看这个data塔,他说组件的初始化数据。
12:02
而这个呢,指的是组件的属性列表。啊,其实这个data呢,相当于是组建自身的数据。组件内部使用的,而这个组件的属性列表。那么这儿的数据呢,是由。什么呀,组件外部啊,传入的数据啊,传入数据这个呢,等同于我们啊,View中的什么呀啊pro,其实view中的prop就是properties的缩写呗。你想现在我们这儿的数据要写成动态的,那是不是就是由组件外部去,你谁想让我显示什么文本,你就传给我什么数据呀,所以我们应该在这儿去初始化。呀,在这儿初始化。啊,那包括下面这个methods,那这个呢,跟view里面那个一模一样,就放这种方法。方法好了,那接下来我们看一下这个properties如何去使用啊,来到官网。上边有这个属性啊,有这个属性。
13:00
往上翻。嗯,这不是proper吗?组件的对外属性。对吧,那具体怎么用呢,你可以往下啊,下边呢,有它详细的说明来。再往下在这儿呢。Practice里边设置的属性有这么四个字段,那type是规定你属性的类型啊,比如说我可以指定你必须传入什么类型。那么下面这呢,还有个option optional types,这个对应是个数组啊,首先它不是必须的,对不对?规定属性的类型,那么看到这儿呢,你会发现跟上边一样呀。哎,往后一看哦,它可以指定多个,所以这是数组。那也就是说,如果我们某一个传入的属性呢,有可能是多种数据类型,比如说有可能string,对吧?啊,有可能是number,那那我们就用下边这个,如果说啊,你很明确你传入的是单一数据类型,你就可以用上面的。
14:03
那Y,哎,属性的初始值。相当于是它的默认值。The observe。这个单词我们在的源码里面见过,对吧,监视的监视性,或者叫观察者。哎,观察者,那这个呢,是用于去监视我们属性值变化时的回调函数。来用来监视当前属性的,那其实它呢,等同于view u里边的什么呀,Watch。金翅呗。那看完这个呢,我们去写一下啊,那现在我们想想看啊,我们在当前的组件里边,哪些要写成动态的,就是这个title,包括这个文本。对不对,那这呢我就给他拿走啊,假设我让你传入的这个标题的角这个变量抬头。那下面这个呢,我就叫它na。那么对应的这两个变量,我们是不是应该在GS里面设置一下title来,那刚才我们说了啊,这个type应该是类string呗。
15:04
对吧,那你用的话,你就不用下面这个了。来,那接下来我们去写value啊,那因为现在呢,它是个单一数据类型,所以我们用type value就是默认值呗。给大家写一个,比如说我是默认值。可以吧啊,就这两个就够了,我们也不需要监视它啊,所以呢,再往下我们再来一个啊,那第二个叫navy啊,它对应的也是这样啊。给大家标识一下我是title的默认值,那这个呢,我是navy的默认值。好,那现在看着啊,我们在使用这个组件的时候,我故意没传啊,我故意都没传,那这个时候呢,我们先来看。你看它显示的是不就是默认值。哎,那这个时候呢,我们去传一下啊,注意对应的变量你不能瞎写,我们是有要求的,必须叫title跟navy。所以这啊,我们先写一个啊来,那这个title我们叫叫什么,我们看一下,我写好这个。
16:07
一个叫推荐歌曲啊,下边这个呢,叫为你精心推荐来写一下啊,那这个呢是推荐歌曲,然后对应的navy呢是叫啊为你。对吧,啊,精心推荐。啊,那接着呢,我们把下边那个也写完吗。那这个呢,我们也需要穿啊,那这儿呢,我们叫它叫啊排行榜呗。呃,那这个再往下。啊叫热哥风向标对了吧,来把这个换一换,啊热歌啊风向标。保存一下,我们再来看我们的效果。OK,那这个时候大家看这的数据是不是就是动态的了。没有问题。好的,那以上呢,就是我们自定义组件的内容。啊,自定义组件内容,这里面有一点大家要注意啊,首先我们如何去使用自定义组件呢?那就是需要在使用的。
17:06
这个页面对应的阶层中,你是不是要要去干嘛注册,哎,这第一点。那么第二点呢,我们组件复用的话,一定有一些数据是动态的啊,我们要考虑清楚啊,这些动态的数据是在我组件内部去声明啊,还是在proper声明有外部导入对不对,那这个呢,不同的场景写的地方不一样啊,不一样。来,那这节课呢,我们先讲到这里。
我来说两句