00:00
好的,我们继续啊,那我们分装完功能函数啊,并且呢,我们也嗯去使用它啊,也成功拿到数据了,那这节课呢,我们去操作一下这个数据啊,然后把它显示到我们的页面上好了,那大家还记不记得之前我们说过啊,就小程序页面上的数据呢,它是会我们哎,就逻辑层,就数据层里面的data要那现在呢,我们的data中呢,并没有数据啊,所以呢,我呢先去给它初始化一个。啊,比方叫叫什么呀,叫banner吧,叫banner list啊,它对应的应该是个数组啊,那这个呢,应该是我们的哎,龙波图数据。啊,是这样的,那为什么说它是一个数组呢?大家看啊,我们最终拿到的它就是一个数组,而我们要用的龙波图的数据啊,是里边每一个对象的image URL这个属性。好的,那现在呢,初始化的数据有了,当我们拿到了数据以后呢,我们我把这个换一下吧,不叫这个了啊,叫banner吧,或者叫banner list data。
01:03
那么接下来呢,我们要去呃,修改一下这个出具对吧,This set data,那这个呢,我们也说过啊,这呢应该是banner list啊,对应的是这个banner list里面的什么呀。就是刚才啊,我们看到的这个好的,那现在呢,来到我们的开发工具啊,我们看一下。哎,大家看这个banner里面是不是有了,有了以后啊,那现在是数组,我们来到我们的结构里面来,咱们把这些啊先全部关掉吧。来到我们的结构,首先呢,把下面的收起来啊,我们玩这个轮波图,那现在呢,其实留一个就够了。留一个就够了,那这呢,是不是应该循环便利生成多个,哎,龙波图呀。好,那这个时候呢,我们又要考虑在小程序里边如何循环便利。我们我们来到这个小程序的官网啊。
02:03
在框架这一块呢,其中有一个叫列表渲染,哎,那这儿呢,要用到的语法呢,叫微信for。那大家看下边微信号后边呢,跟的是要变利的目标数组,那么要注意啊,因为它是变量,所以呢,外边使用的是双大括号。而这个数组呢,已经呢,在你看配置也是页面的data塔中的初始化了,这不这个数组吗?数组初始化了以后,注意,嗯,它里边的每一项呢,是什么是对象,对象里面呢,有一个呃属性呢叫message,那这个时候大家看啊,它在使用的时候。直接就是呃,下标index,还有是item.message说白了,个体直接叫item,下边叫index。那么到这里呢,可能有的同学有疑问,哎,你比如说啊,我们在V,在V里面,我们用到的是V杠号。
03:00
对吧,那个时候呢,我们需要指定我们的个体名,或者说要指定我们的下标名,而在这里啊,在小程序这里呢,你会发现我们他这并没有指定就能直接用。哎,把这个关掉啊,就能直接用,那怎么做到的呢?哎,这个时候大家看这一句话,看这一句话说默认数组的当前项的下标变量名默认为index,而个体名变量名默认为item。说白了,小程序在设计的时候呢啊,已经把我们开发人员平时的一些习惯呢,也设计进去了,为的就是简化我们的开发个体默认叫item,下调默认叫index OK,那就是这个,那看完这以后呢,我们可以用一下啊,首先这里呢,应该是微信for,我们要便利的呢,是刚才我们拿到的啊banner list对不对,那么里边这个你要注意啊,我们要取值。
04:02
去什么样?来看数据。我们应该要拿的是每一个对象里面的image URL这个属性啊,所以呢,这应该是I点它。Item就是对象对吧,好,那这个时候呢,我们再来看啊再来看。刷新一下。那现在这不出来啊,是因为什么呢?大家看啊,我们现在发请求来来到GS,我这是不是用了type v2呀,而刚才我们在浏览器这测接口呢,用的是没有参数对不对,那没有参数的话呢,你要注意啊,我们来到接口文档,我们说了默认为零,就是PC端数据注意啊,它不同的参数拿到的数据里边的字段不一样啊,所以呢,这里我们还是把这个换成什么type等于二。再看。哎,那这一版呢,你会发现里边的这个字段不一样的,应该是pic,就picture的缩写啊,这儿呢,大家也要注意啊,也要注意好的,那接下来我们把这个换成picture是不是就好了,来,那我们再看我们的效果,这个时候大家看就好了。
05:14
没有问题,OK,那现在啊,我们循环便利这个语法已经说完了,那这个时候呢,我们来到控制台大家看一下。这呢,有一个黄颜色的警告啊,说no you can provide at tr,微信k for,什么for a,微信for to improve performance。那么翻译过来的意思呢,是现在你可以提供一个属性呢,叫微信片,用于谁呀?呃,用于这个微信phone啊给他用,那为的是什么呢?为的是提高我们的性能。哎,提高我们的性能,也就是说我需要有个微信K,那么它还应该对应的是一个唯一值,叫UN q value,哎,就是唯一值,这一点呢,跟我们的view和rest里面特别像。
06:06
特别像。哎,那大家还记不记得我们和RA里面我们通常放什么呀,那个K。放ID对不对?哎,为什么大家不说放下标呢?放下边有问题对吧,有什么样的问题你得能说清楚。哎,你等着说清楚啊,画图的话我在这画吧,啊假设啊。那么它当初设置K呢,是为了呃提高性能,提高什么性能呢?你比如说假设我有个数组,里面的元素是12345。啊,他们的ID假如说分别为12345啊,那最终。如果说我用ID的话,那对应的ID12345对不对,假如这五个元素好。那这是这个,那假设啊,我们用下标作为K会有什么问题,那我们对应的K值应该这样的啊,元素分别为12345下,那用下标作为K,那是01234对不对,因为下标从零开始嘛。
07:10
好,那。这是它的K假设啊,我数组里边,我突然往一往二跟三的中间吧,我插了一个元素。啊,我差了元素对吧,假设呢为六啊,或者这样吧,我给大家用这个举例子啊,假设这的元素是abcd。啊,这是四个元素,那么对应的假设啊,我用下标作为K的话,那么对应的K值应该是0123对不对?好,那这个时候呃,如果说我在B和C的中间插入元素为E来,那后边那就是abecd对不对,这这五个元素,好的,那接下来我们再循环变力的话,对应的下标对应的K值是不是应该是01234呀。这点应该能懂。
08:01
对吧,那我们要设置K,为的是拿如果数据变了,我们拿这个K对应的新元素跟旧元素去对比有没有变化,如果没有变化,我是不是就不需要重新计算了,那这个时候你看A跟A对比没有变,那不需要计算,B跟B比,B跟这个B对比。也没有变,对不对,但是E因为它的K为二,我是不是拿这个K为二跟原先K为二的值去比,这肯定变了。因为数据变了嘛。那是不是需要重新计算呀,那后边的是不是都得重新计算。可是你想想,其实我们现在呢,只需要计算E的是不是就够了,因为C的数据根本没有变过,D的也没有变。这就是用下标作为K的问题。那我们换句话说啊,如果说我用ID有什么好处呢?Abcd如果用ID啊,我就举个例子,假设ID为1234。
09:04
哎,固定的,那么后期我在中间插入元素,那就是ABECD5个对不对,但是啊,它的下边还是一二,注意啊,它还是三,它还是四对不对,因为ID通常来说是跟数据绑定的,而E的ID假设是五啊假设是五,那这样的话,KV1的对比没变,KV2的没变,三的是不是也没变,四个也没变,我只需要从计算出啊计算这个E的就OK了。这什么就实现这个,呃,倒第一步算法就是最小化页面重绘啊,我们计算的少了,你的性能肯定就高了。那在说这个key的作用的时候啊,同时我就帮大家去把我们用key作为index,有什么问题啊,去帮他回顾了一下,OK,那现在啊,来到我们的项目里边。这个时候呢,我们需要去给他设置一个微信啊K,对吧,需要跟一个唯一值。
10:05
那这的唯一值怎么跟呢?我们还需要看一下小程序的官网,我们往下翻啊往下翻。这有这么一段话,哎,说微星K,注意啊,微星K的值以两种形式提供。一种是字符串,一种是保留关键字,叫星号race,我们先来看第一种,他说这个字符串呢,代表放循环中IR的某个属性。首先你要能理解这个HM是谁,是不是就是便利数组中的每一项,而这个property呢,应该是这个每一项里面的一个什么属性,那并且呢,要求这个属性呢,应该是列表中唯一的字符串或者数字。且不能动态改变。注意它必须是字符串或者数字,因为只有他俩才能表现出唯一性,你说用对象或者用引用数据类型吧。
11:08
是不是区分不开呀,所以啊这呢必须是字符串或者数字,哎,那这是这一种,那还有一种呢,是保留关键字信号race啊,那这个要求更严格啊,他说这个呢,必须代表的是H本身,那也就是意味着你便利数组出来的H本身就应该是什么字符串或者数字。那这个其实在我们企业级的项目开发几乎用不上,因为啥呢?你想我们企业级的数据呢,奥瑞里面绝大多数是数组,要不然啊,绝大多数是对象,要不然是数组,你不可能企业级的数据拿到一个数组里面是1234吧。对吧,所以这种场景使用有限啊,那我们就重点先去理解上面这一种。可能啊,我这儿带着大家读完这个啊,有的小伙伴不清楚啊,我们看一个例子。这儿呢,有一个微信号,注意它在遍历这个数组。
12:04
这个数组里面的每一项是什么?是对象,而对象里边大家看有两个属性,一个是ID,注意它对应的值是什么?是number,那么还有一个呢,是UNQ,它对应的是个。字符串unit two这个单词就是唯一的意思在这里呢,想表达啊,我这个字符串是一个唯一的串。这是因为它是唯一的啊,所以这个时候大家看微信K后边直接跟。因为你Q这个属性,注意啊,它是这个对象里面的某一个属性。而且这有两个注意点,第一个这个变量不需要写双大括号。第二点,这个变量不需要像V一样通过对象点属性。去写。而是直接写这个属性,那这一点呢,跟view不一样啊,如果说熟悉view的小伙伴在这里要把这个观念转变过来。
13:01
OK,那其实看到这儿呢,我们只需要找一下我们这个对象里面有没有唯一的属性就拉倒了,在这里往下翻啊,大家找一下啊。呃,有一个属性呢,叫banner ID。龙波图的ID嘛,那后边对应的一定是个唯一的字串,那这个不就是我们想要的吗?所以啊,这个时候呢,我们可以直接给咱的微信K去写一个它就OK。哎,写一个它就OK,那这个时候呢,打开我们模拟器,你看啊,那个警告就没有了。哎,那就是这个啊,在这里呢,一定要注意你的微型T的用法。好的,那这节课呢,我们主要是讲了一下啊,小程序页面语法中的列表渲染,那么用到的语法呢,是微信号还要注意啊,这个P的作用是什么,我们不能学的稀里糊涂的。对吧,哎,我为什么不能用index,会有什么问题,而且呢,要注意在小程序里面这个K到底如何去找,如何去写。
14:07
找的话呢,你要找的是对象中,也是这个数组中每一个个体就是对象呗,对象中的属性,这个属性必须是一个唯一的字符串,或者说是number。好的,那么这节课呢,我们先讲到这里。
我来说两句