一开始最主要需要编辑的就是index.wxml和index.js。把数据放在index.js里面，把标签放在index.wxml里面，还有一些简单的loop功能。 比如下面这个数据写在index.js里面。 Page({})是微信小程序的基本格式，不需要理他。需要提供数据的话，就写data:{}。这里我初始化了一个数组，数组的名字叫iconSize，然后我给了这个数组6个值，如果你还记得大学学的C程序基础的话，其实是一样的。　

　Page({ data: { iconSize: [20, 30, 40, 50, 60, 70] } })　

　有了上面的数据以后，我就可以在index.wxml直接使用iconSize做点事情了。

上面的第一个tag是，可以给他一个class，随便叫什么，然后晚一点可以用css渲染。第二个tag是，你就当他也是view就好了，这里可以简单的写一个循环函数了，这个wx:for是微信提供的，你就记住微信给的函数都是wx开头的就行了，这个有点像AngularJS，后面可以直接引用上面定义的数组iconSize，注意这里有两个{{。他的功能就是循环导入数组里面的每一个数字。然后在block里面有使用了一个tag叫，他的type我们可以使用success，就是过一下你会看到的对勾就是success了，然后定义这个对勾的大小，item是一个关键字，它就是调用iconSize里面定义的每一个数据，最终执行结果是这样的。 执行结果：

最后我在index.wxss里面调整了一下这些对勾在屏幕里显示的位置，就是类似css了。

.group {

　 position: relative;

　 top: 50%;

　 height: 50px;

　 margin-top: 100px;

　 margin-left: 30px;

　 display: flex;

}

这里留个小作业，你可以很简单的在屏幕里面再添加点什么。比如warning。