基础内容学习

在小程序中JSON扮演的是静态配置的角色。
JSON文件都被包裹在一个大括号中，通过 key：value 的方式记录数据。JSON的key必须被双引号包裹。JSON文件中不能使用注释。

进入小程序开发工具的项目中，会看到如下结构，有一个pages文件这个是用来存放所有的页面的，在每一个页面的文件夹下还有.js.json.wxml.wxss文件。

WXML文件

wxml文件相当于html文件，用来写页面结构。需要注意的是wxml对大小写敏感，class和Class代表不同东西，xmls要求所有标签必须闭合，不然会报错。

在wxml文件中可以引用js文件data中定义的变量，引用方式{{变量名}}，需要注意的是如果这个变量不存在或者被复制undefined，则不会在视图中显示

// wxml代码
<text>{{time}}</text>// js代码
Page({data: {time:(new Date()).toString()},
})

效果如下：

wxml中也可以把js中定义的变量当作属性值进行引用，代码如下：意思是把元素的类名定义为hello，在wxss中可以通过 .hello设置样式

// wxml代码：
<text class="{{test}}">{{time}}</text>// js代码
Page({data: {test:'hello'},
})// wxss代码
.hello{color:red;
}

和vue相同通过{{ }}引用不止可以引用变量，还可以在{{ }}中进行简单的逻辑运算，比如三元运算，算术运算，字符串拼接等
如果在{{ }}放的是一个数组，则会把数组中的内容渲染到视图中

// wxml代码
<text>{{ary}}</text>// js代码
Page({data: {ary:['hello','world','你好']},
})

效果如下：

在小程序中通过wx：if来判断是否需要渲染该元素
wx：elif和wx：else用来设置else元素

<view wx:if="{{test.length > 6}}">我要不要显示呢?</view>

循环绑定数据的方法，wx：for，数据的下标默认是index，当前项的变量名默认是item，可以通过wx:for-index和wx:for-item对item和index重新指定名字，重新指定名字后再使用变量就需要使用指定的新名字
通过wx：key指定唯一标识符

// wxml
<view wx:for="{{forContent}}"  wx:key='index'>{{item}}</view>// js
Page({data: {forContent:['内容1','内容2','内容3','内容4','内容5']},
})

效果如下：

// 重新指定名字的wxml代码
<view wx:for="{{forContent}}" wx:for-index="num" wx:for-item="name"  wx:key='num'>{{num}}:{{name}}</view>

效果如下：

wxml中可以通过template标签定义模板，还可以用name属性对这个模板进行命名，后面需要调用这个模板的时候，直接调用这个名字即可

// 定义的模板
<template name="first"><view>{{test}}</view>
</template>// 调用模板
<template is="first" data="{{test}}"></template> // data是传过去的变量

效果如下：

也可以定义多个模板，根据条件判断显示哪个

// 定义的模板
<template name="first"><view>first</view>
</template>
<template name="seconed"><view>seconed</view>
</template>// 调用模板
<block wx:for="{{[0,1,2,3,4,5,6,7]}}" wx:key='index'><template is="{{item % 2 == 0?'first':'seconed'}}"></template>
</block>

效果如下：