霍常亮淘宝客app开发系列视频课程第8节：初识微信小程序列表渲染原创

哈喽，大家好，我是霍长亮，这节课我们要跟大家分享的是关于微信小程序里面的列表渲染。好的，那么我们首先要明白啊，列表渲染一题渲染呢，它就是展现在页面之中啊，就是这样的一个主作用啊，通常呢，对于数组啊，对象啊用的比较多一些，咱们在实际操作之中，咱们举个简单的例子啊，你比如说我们在这个页面，我要想写一下咱们，嗯，打打个比方，咱们。工资啊，有四个人，然后四个人的年龄把他们都输出出来，那怎么写。比如说啊PE。之后比如说是21。几个吧。

二。23。24啊，然后我们预览一下，编一下。好，这个时候。咱们这个位置。上节课把那逗号删了，增加上。好，这个时候我们看到二，诶哦没有换行是吧，为什么没有换行。啊，我们之前讲过，因为T呢，它这是一行啊行内标签，所以说呢，我们要是以。换行为最终目的，那么我们这个时候就不能用text啊，可以换成对吧。二一。232324。22，好，我们再来定义一下。

对吧，这个时候就是我们要展示的这几个数啊，就是咱们这个年龄，这是第一种方式，它呢相对来说呢，适合什么，就是你就是这一回啊，就叫这一回啊，而且写死的轻易不会改变。对不对，那么如果说你要经常改变，或者说你想把它以一个数组的形式进行调用啊，那么我们就需要先创建一个数组，这是第一种形式，第二种形式就是以数组的形式进行调用啊，咱们在这个GS里面整一个数组啊，这个。年龄数组。没打错吧？那演年乐应灵师数字无图啊，年龄不足。好，我们现在这肯定是有问题的，因为下面有这种呃，横竖线的肯定是格式还不对的，那么这个变这个数组我们应该用什么来展示。

对吧，你记住了数组呢，十之八九都是中国号，你包括说在咱们易语言里面，数所也是中国号啊。然后我们在里面可以写上值啊。比如说二一。25。35。19啊，我再写一个，那这样的话格式对不对，显然还是不对的，你看它这里还有一个横线呢，那么中间我们用什么符号，是冒号，是用等号还是用括号，还是用什么符号。咱们照葫芦画瓢啊，对不对，你上面。想的写的是什么？冒号对不对，那么我们在这儿也是冒号，而且注意是看的。对吧，然后为什么还会有这个横线，还会有这个曲线，咱们上一个错误怎么办呢？就少了一个逗号对不对，所以说在这咱们也得加一个逗号，那这个时候是不是在这里目前看来就没有问题了，那么咱们这个数组有了，可是我在这里要调用这个数组，用什么样的格式能够正确调用这个数组呢？

想一想。我们找到这里对吧，咱们随便复制一个。比如说。这个二二。那么我们想要加循环，咱们在上节课讲判断的时候，它就出现了一个循环。那么我们再复习一下。这里呢，在微信小程序里面要写微信对吧，然后这个时候。下面的if就是我们上节课讲的，叫判断，对吧？上面这个for就是我们现在要用的，叫做循环。那么在这，那我直接。怎么样，我直接写上，咱们刚才写的这个判断叫做哪去了？

这个名字是。啊，年龄数组，那我们直接写成年龄数组行不行，咱们试一下。年龄数组，然后我们来编译。他出现了。但是。它出现了怎么样，出现了多个。二。对不对？那显然不是我们想要的效果。对吧，那我们为了避免干扰啊，你把上面这些没用的，咱们暂时给他。代码这样写行不行？咱不通，那我们把它暂时删掉。然后再编一下。对吧。这些出来了，但是呢没有实现，我们想要展示的是数组，对不对，那我们想要展示数组怎么走？

在这。等于在这。改成。好，我们再来试一下。诶，你会发现它变了，不是刚才所展示那些数了，对吧，但是显示这些字母，那么这些字母是什么。啊，横着看你看不好，咱们按照藏头诗的角度来看，把它。竖着读出来呢，1AN年勒零失物数字不足。对不对，所以说呢，按照这个格式的写法，就等于说把这个。

当成一个字符串给它输出出来了。明白吗？没有把它当成变量，要怎么样才能把它当成变量呢？也给它加上一个。两个单号。好，我们现在再来编一下。对吧，这次就出来了，21 25，三十五十九，也就是我们在这里所定义的。哪去了对吧，二十一二十五三十五十九，那这样呢，就是一个简单的关于渲染啊，就是把一个数组给它渲出来。好，那说到这里呢，还有一个问题啊，那可能有人说，诶这个。这是什么玩意儿？那我之前也没整过他这是哪来的呀，我告诉你啊，它们通常就是和前面的这个for循环连着用的啊，我们来看一下幻灯片。那么这个呢，V叉呢，这就是PC里面的一个特点啊，它呢，这个是用来循环数组，后面这个例子呢，就是数组名啊，用来定义一个循环过程中每一个元素变量的。

然后我们可以去看一下下面的这个网址啊，我就不带着大家挨个读了，那这个呢，是我们一个参考资料啊，大家直接剖析一下，直接自己打开网页自己看就好了啊，你只要知道这就相当于是一个数组啊，暂时呢先死记硬背啊，后期你用的多了，你也就知道是怎么回事了。另外呢，说到的item，那么还有一个默认值也是比较重要的啊。就是在这里，在这个数组里面对吧，你想啊，咱们正常理解它有几个数，这几个数是什么。对吧，那么这个item就是指的是当前变量的默认值，而这个第几个数这个几。啊，也就相当于是ingx，那么通常ingx是代表着当前下标的默认值，而这个em是指的当前变量的默认值，你对比着我们这个。

数组来说对吧，你比如说1234，那么它是第三个啊，那in差就相当于是这个。下标。而35就相当于是。It。的话，一个是第几个，一个是第几个所对应的值啊，就是这个意思，嗯。以后你用的时间长了，你就明白了。所以说我们在这里啊，其实呢，也有不同的写法，对不对，那么我们现在把它。屏蔽掉。在小程序里面，不能是不能是这样屏蔽呃。我重新再下面加一行吧。这样。我们如果说在这里。

想用它啊，说我这样更好理解行不行也行，但是的话你在这就得再加个别的东西了。W。不是了，就得是。好，我们现在保存啊，就是编译一下。你看。上面和下面是一样的，所以说我们如果说对于你上面这个item你还不理解，那你就按照下面这个写法写，这样的话就好理解了吧。

对吧，咱们都用年龄速度，年龄速度年龄速度啊，只不过说在这加了一个it啊，那么把它写在里面，这个上下是一样的，这两种方式是一样的啊，那么结合我们刚刚所讲的，这里还有一个index，那么我们就想把index也输出一下啊，该如何实现？很简单嘛，那么我们在这，比如说咱们加一个。里面。啊，这个时候呢，我们就看到了。对吧。后面的0123对应的就是它啊，也就是说像这种咱们就可以诶，我里边没有给他进行一个像一元这种对吧，我没有给他做这种变量的命名，变量生成，但是你也可以直接调用啊，这就是一种简化的一种写法，一种方式，而且呢，还有一个细节啊，一个注意事项就是在你。

写E语言的时候。它是从一开始，数组是从一开始，而你在写APP，微信小程序里面，这里是从零开始啊，我们来对比的看一下，你比如说。咱们。就拿这三个字吧，过程量分格文本，分割文本。

这样的话啊，这个是已经有一个数组，然后我们。在这里调试输出。我们直接写个零。看到了吗？他这里就会提醒数组成员必须从一开始。对吧。从一开始，然后啊，咱们进行一下。这个空的把它删掉。出现的是一对不对。但是我们在这个。

微信小程序里面我们看到了爱人地摊呢，就是从零开始，所以说这是一个区别。好的，那么我们现在呢，已经讲完了，包括啊一些快捷方式，还有数组，还有啊这种渲染，然后我们来看一下还有什么。应该没了啊，那么我们现在呢，所讲的这些呢，都是关于一些基础知识啊，因为我们后面。会有很多实战性的东西，你比如说我写一些代码，我跟你说for是什么你不知道，跟你说if什么你也不知道啊，跟你说class什么，你还是不知道啊，其实呢，咱们用大概两节的课的时间，对于微信小程序做了一个基础的介绍。

然后咱们在后面还会有非常详尽的啊一个扩充，这也是为什么咱们为什么幻灯片为什么标题都写到初识呢？就是刚开始接触，刚开始认识，那后面还会有更加细致的介绍啊，毕竟咱们得做出一个完整的程序，现在还是指的是理论值对吧？好的啊，感谢大家关注，我是霍长亮，拜拜。