我们学习任何一个新的事物,其实可以对比旧的事物,微信小程序开发其实和前端开发形式差不多,如果你是前端攻城狮你将会很容易理解,其实一个微信小程序就这么几个文件:
.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张图片立马显示出来了,是不是十分的快速?