微信小程序视图层详解（一）

我们学习任何一个新的事物，其实可以对比旧的事物，微信小程序开发其实和前端开发形式差不多，如果你是前端攻城狮你将会很容易理解，其实一个微信小程序就这么几个文件：

.wxml //模板文件，相当于html，只不过里面放的是微信给我们提供的组件.wxss //样式表，就是css样式文件，里面写的都是css.js  //逻辑代码，js文件.json //配置文件，配置窗口的颜色、标题、背景，格式都是相同的

这一部分主要给大家介绍wxml这个文件，这一个文件被称为：视图层，有点MVC的V的意思，又很像php里的smart，smart是把php里面的数据渲染出来，而这里的话是把数据都放在js里面，然后在wxml里面调用js里面的数据，最后显示在wxml里面，这样的话就非常的方便灵活，随便举个例子：比如我们要在wxml里面放100张图片，地址分别为：

image/1.jpg，image/2.jpg，image/3.jpg,……image/100.jpg;

这里有两种方式，一种是直接在wxml里面写100个图片组件：

<image src="image/1.jpg"></image><image src="image/2.jpg"></image><image src="image/3.jpg"></image> ……<image src="image/100.jpg"></image>

另一种方式就是用wxml的列表渲染，只需简单的几行代码，100个图片立马生成，我们只需在js里面的data里面声明一个变量：

//js文件page({    data:{        i:100    }})

然后在模板里面利用小程序给我们提供的列表渲染方式进行渲染：

<!--wxml文件--><block wx:for="{{i}}">      <image src="image/{{index}}.jpg" ></image></block>

上面这段小小的代码，100张图片立马显示出来了，是不是十分的快速？