⼩程序（三）：选座系统（主要内容：列表渲染的应⽤）⽣活⽆趣且不易，⼀起点乐⼦吧。欢迎评论，和⽂章⽆关的内容也没关系。
从这篇开始，做个简单的选座系统，也就是在界⾯上画出座位布局，在点击后根据座位情况进⾏选座或者离坐这么个东西。
其实写这篇⽂章的⽬的很简单，其⼀是因为学校的需要，学习的这点东西虽不算精，但毕竟付出了⼼⾎，离别之际，留点东西，没什么，⾄少证明我来过（笑）。其次，这块的内容在写代码阶段，卡的最久，消耗的精⼒也最多，这也算是种总结吧（致敬）。再然就是在查询资料的时候，查询结果不尽⼈意，所以我把我的东西发出来，希望对您有帮助。
我来捋⼀下整个选座系统的思路，因为涉及到的内容不⼀样，所以这个选座系统我会分块来写。⽽且，如果⽂章太长了，⼤家也都懒得费时间去看。（羞愧脸~）
⾸先，画出座位布局，然后绑定点击事件，最后动态⽣成布局。
期间的⼀些思路我会详谈，因为在我看来，能写出来本⾝就是缘分，运⽓好罢了，在来回的试探中⽪。
话不多说，（已经不少了）进⼊正题，这篇⽂章我们先来看看怎样将界⾯“画”出来。
怎样画？
我们知道在开发者⽂档中，给了我们许多的画图api
然鹅，对我们来说，没必要这么复杂，布局上⿇烦不说，后⾯的⼀些绑定功能，更是让⼈头⼤了。
所以放弃绘图功能。
那我们⼲脆就⽤个标签，⼀个标签是⼀个座位。⽤哪个标签？<view>？貌似可以，我们就⽤⼀排排的view放在界⾯上，然后设置下它的⼤⼩，再设置下背景颜⾊，不就可以了吗。view可以，当我准备下结论的时候。我在开发者⽂档的组件⾥发现了这个东西。
没错icon，说道这⾥，我顺便捎带提⼀下开发者⽂档的⼊⼝：
⼀、在开发者⼯具的菜单栏⾥的开发者⼯具的⼦菜单栏⾥
⼆、浏览器搜索“⼩程序 api”，到这样⼀条搜索结果：
三、点下边（汗）：
我们再说回到icon，他有很多格式：
也就是说，它本⾝的属性就能满⾜我们的要求（我们只需要⼏种不同的颜⾊区分座位状态）。
⼀排排将icon显⽰在我们的页⾯当做座位就可以了，怎样实现呢？
⼀、⼿写。
没问题，世界上最恐怖的⽅法，莽。电大毕业自我鉴定
我在wxml页⾯⼿动输⼊⼏⼗个⼏百个icon，但是这种做法有危险，⼀来⼿疼，⼆来，界⾯是死的，每
当我布局变化之后，界⾯就要重新写，那这个界⾯就没有存在的必要了，我也就不需要写这篇⽂章了。
（先⼿动写⼏个，然后ctrl a -- ctrl c -- ctrl v -- ctrl a -- 。 好⽅法！⼿动⼤拇哥，这种叫做有⽂化的莽夫，但是上⾯的问题解决不了，界⾯还是死的。）
在我来说第⼆种⽅法前，我们需要先了解些预备知识，列表渲染。
⼊⼝：框架--视图层--列表渲染（开发者⽂档路径）
wx:for
在组件上使⽤ wx:for 控制属性绑定⼀个数组，即可使⽤数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
<view wx:for="{{array}}">
{{index}}: {{ssage}}
</view>
Page({
data: {
吭多音字组词array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
使⽤ wx:for-item 可以指定数组当前元素的变量名，
使⽤ wx:for-index 可以指定数组当前下标的变量名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{ssage}}
</view>
wx:for 也可以嵌套，下边是⼀个九九乘法表
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
<view wx:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</view>
安徽茶叶
</view>
个人自传入党</view>四川建筑职业技术学院录取分数线
我只是复制了部分内容，全部内容请⼤家到⽂档查看。有编程基础的同学，我认为就是页⾯的for循环，这样理解好理解⼀些。
所以我们要做的就是，让icon的color属性绑定⼀个数组，然后⼀个个“画”出来。
js⾥⾯编个数组：
界⾯我们这样写：
<icon wx:for="{{color}}" type='success'></icon>
让我们编译看看结果：
nice，通过这样⼀个简单的实例，⼤家应该就能够理解到wx：for怎么去⽤了。但是这个怎么换⾏呢，当前只有当页⾯⼀⾏排满的时候会⾃动换⾏，我怎么去⾃定义设置呢？对呀，循环数组只能.....⼆维数组不就好了？
先循环外围数组，不就成了⾏，再循环⾥⾯的就好啦。
我们来测试下：
修改color
界⾯这样写：
朴誉恩
<view wx:for="{{color}}">
<icon wx:for="{{item}}" type='success'></icon>
</view>
这⾥简单解释下，view循环外围数组，默认item指⽰数组的内容，这个在⽂档中有，所以item其实就是⼆维数组⾥⾯的两个⼀维数组，之后就和我们的上⼀步相同，让icon绑定这个⼀维数组，然后输出。我们来看结果：（解释的好像不清，但好想也不能解释的再清楚了，我觉得主要的理解在item。仔细看看开发者⽂档，把item的具体含义搞清~~【注：不要急于求成，⼀定要去看】）
奈斯！奈斯！可以⼀波！（笑）⼀波不了，接下来我们要解决颜⾊的问题。⽐如选了座的我们让他成
为红⾊，没选的是绿⾊，怎么实现呢？
icon标签有个color属性，可以设置icon的颜⾊，⼤家也看到了，我们设置的数组叫color，但其实数据是瞎编的，因为没啥⽤，这时候，我们就要在数组内放⼊颜⾊信息，然后当循环的时候，让icon的color属性等于数组内的值就好了（也就是color属性绑定颜⾊数组，⽽不是像我们前⾯的例⼦，⽤icon或者view），我们来看实现：
js：
界⾯这样写：
<view wx:for="{{color}}">
<icon wx:for="{{item}}" wx:for-item="in" color='{{in}}' type='success'></icon>
</view>
这⾥需要再解释下，icon绑定的item是color的内容，其实就是两个⼀维数组['green', 'red', 'green']和['green', 'green', 'green']，然后我们icon的color属性需要的是⼀维数组⾥⾯的数据元素。也就是icon的item，即color数组的item的item。
wx：for-item是起个别名，之后我们就可以通过别名来引⽤，item是默认的，但是⼆维数组我们有内外两层，为了避免混淆我们给内层的起个别名。这⾥很重要，稍微有些复杂，⼤家要⾃⾏理解下，会影响到后⾯的内容。我们来看下结果：
蛮酷的，不是吗。因为⼀波不了，所以也就先到这⾥了。还有些其他的内容，⽐如选座，查看座位信息，离座什么的。⽽且，其实现在的界⾯还是死的，我需要去⼿动修改color数组，如果我从后台传来⼀张座位表，他能⾃动⽣成color数组吗？他还能画出来吗？哦，抱歉，可以，这是另⼀个问题。你可以获得座位的同时，获取布局信息，⽐如说六⾏⼋列，在前端的js⾥⾯你就可以写个函数，根据你的座位表和这个6 8来重新⽣成color数组。因为页⾯是根据color数组画的，所以，当数组改变的时候，页⾯也会相应的改变。
这就是原理了，我会在后⾯的⽂章中详细的说到。如果有⼼急的同学，可以先⾃⾏测试。
希望这篇⽂章可以帮助到你。
（这⾥给⼤家个忠告，csdn上写博客的时候，不要⽤输⼊法往⾥⾯打表情，之后的东西都会没的。这就是为什么这篇⽂章发了三遍的原因，⼿疼，哭）
后记：
⽂章重审，括号内的内容是添加的，最后⼀段除外。