目录
1、WXML 的基本格式
WXML 类似于 HTML 代码，它的基本格式有：（1）可以写成单标签，也可以写成双标签、（2）必须有严格的闭合：没有闭合会导致编译错误、（3）大小写敏感：class 和 Class 是不同的属性。
<!--wxml的格式-->
<image/> <!--可以成单标签，但是一定要注意有 /-->
<input/> <!--可以成单标签，但是一定要注意有 /-->
<view></view> <!--必须有严格的闭合：没有闭合会导致编译错误-->
<view Class=""class=""></view> <!--class 和 Class 是不同的属性-->2、Mustache {{ }}语法
开发中，界面上展示的数据并不是写死的，而是会根据服务器返回的数据，或者用户的操作来进行改变。如果使用原生 JS 或者 jQuery 的话，我们需要通过操作 DOM 来进行界面的更新，小程序和 Vue/React 一样，提供了插值语法：Mustache 语法。
<!--home.wxml文件中的代码：-->
<view>{{message}}</view>
<view>{{firstname}} {{lastname}}</view> <!--两个变量之间加空格，还有下面这种方法-->
<view>{{firstname + ' ' + lastname}}</view> <!--可在一个mustache语法中实现两个变量之间加空格-->
<view>{{age >= 18 ? '成午人' : '未成年人'}}</view> <!--mustache中可以使用三目运算符-->
<view>当前时间为：{{nowTime}}</view> <!--nowTime变量通过setInterval()方法实现时间实时刷新-->
<button size='mini' bindtap='handleSwitchColor'>切换颜色</button>
<view class='box {{isActive ? "active" : ""}}'>小冬瓜</view> <!--mustache中可以动态绑定class-->
<!--home.js文件中的代码：-->
Page({
data:{
message:你好,
firstname:er,
lastname:ha,
age:18,
nowTime:new Date().toLocaleString(),
isActive:false
},
onLoad(){ <!--onLoad() 生命周期-->
setInterval(()=>{ <!--保证时间的实时刷新：setInterval()-->
this.setData({
nowTime: gew Date(). tolocalestring()
})
},1000)
},
handleSwitchColor(){
this.setData({
isActive:!this.data.isActived
})
}
})3、逻辑判断一 wx:if-wx:elif-wx:else
某些时候我们需要根据条件来决定一些内容是否渲染：当条件为 true 时，view 组件会渲染出来，当条件为 false 时，view 组件不会渲染出来。
<!--home.wxml文件中的代码：-->
<view wx:if="{{true/false/isShow}}">小胖头</view> <!--1.直接传入true/false-->
<button size='mini' bindtap='handleSwitchShow'>切换显示</button> <!--2.控制是否渲染-->
<view wx:if="{{isShow}}">哈哈哈</view>
<view wx:if="{{score>=90}}">优秀</view> <!--3.多个条件判断-->
<view wx:elif="{{score >= 88}}">良好</view>
<view wx:elif="{{score >= 60}}">及格</view>
<view wx:else>不及格/view>
<!--home.js文件中的代码：-->
Page({
data:{
isShow:false,
score:98
},
handleSwitchShow(){
this.setData({
isShow：!this.data.isShow
})
}
})4、逻辑判断二 hidden 属性
hidden 属性：hidden 是所有的组件都默认拥有的属性，当 hidden 属性为 true 时，组件会被隐藏，当 hidden 属性为 false 时，组件会显示出来。
<!--hidden属性-->
<view hidden='{{true}}'>我是hidden属性控制的内容</view>
<!--wx:if和hidden在隐藏组件时有什么区别-->
<view hidden='{{true}}'>我是通过hidden控制的内容</view>
<view wx:if='{{false]}'>我是通过wx:if控制的内容</view>hidden 属性和 wx:if 的区别：hidden：将一个组件隐藏起来时，该组件依然是存在（display:none），wx:if：将一个组件隐藏起来时，该组件根本不存在（压根没有创建）。在开发中的选择：如果显示和隐藏切换的频繁非常高，选择使用 hidden 属性，如果显示和隐藏切换的频繁非常低，那么选择 wx:if。
5、列表渲染 - wx:for && block标签
5.1 列表渲染-wx:for基础
在实际开发中，服务器经常返回各种列表数据，我们不可能一一从列表中取出数据进行展示，这时就需要通过 for 循环的方式，遍历所有的数据，一次性进行展示。在小程序组件中，我们可以使用 wx:for 来遍历一个数组（字符串-数字），默认情况下，遍历后在 wxml 中可以使用一个变量 index，保存的是当前遍历数据的下标值，数组中对应某项的数据，使用变量名 item 获取。
<!--遍历数据-->
<view wx:for="{{['abc','cba','nba']}}">{{index}}.{{item}}</view> <!--遍历一个数组-->
<view wx:for="abcd">{{index}}.{{item}}</view> <!--遍历一个字符串-->
<view wx:for="{{5}}">{{index}}.{{item}}</view> <!--遍历一个数字-->5.2 block标签的意义
某些情况下，我们需要使用 wxif 或 wx:for 时，可能需要包裹一组组件标签，从而对这一组组件标签进行整体的操作，这个时候怎么办呢？一种方法是：使用一个 view 组件包裹，令一种方式是：使用 block 标签包裹。
<view wx:if="{{isshow}}"><!--view 组件包裹--> <view wx:for="{{movies}}"><!--block 标签包裹-->
<button>按钮</button> <view>电影序号:{{index}}</view>
<view>阿呵呵</view> <view>电影名称:{{item}}</view>
<text>我是内容</text> </view>
</view>
<block wx:if="{{isshow}}"> <block wx:for="{{movies}}">
<button>按钮</button> <view>电影序号:{{index}}</view>
<view>阿呵呵</view> <view>电影名称:{{item}}</view>
<text>我是内容</text> </block>
</block><block/> 标签并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。使用 block 有两个好处：（1）将需要进行遍历或者判断的内容进行包裹。（2）将遍历和判断的属性放在block便签中，不影响普通属性的阅读，提高代码的可读性。
5.3 列表渲染-item/index名称
默认情况下，item-index 的名字是固定的，但是某些情况下，我们可能想使用其他名称，或者当出现多层遍历时，名字会重复，这个时候，我们可以指定 item 和 index 的名称：
<!--item、index起名字-->
<view wx:for="{{movies}}"wx:for-item="movie"wx:for-index="i">{{movie}}{{i}}</view>
<block wx:for="{{nums}}"wx; for-item="inner_nums"> <!--nums是二维数组-->
<block wx; for="{{inmer_nums}}">
<view>{{item}}</view>
</block>
</block>5.4 列表渲染-key作用
在使用 wx:for 时，会报一个警告：控制台会提示可以添加一个 wx：key 来提高性能。为什么需要这个key属性呢？这个其实和小程序内部也使用了虚拟 DOM 有关系（和 Vue、React 相似）。当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点，我们希望可以在 B 和 C 之间加一个 F，Diff 算法 默认执行起来是这样的：把 C 更新成 F，D 更新成 C，E 更新成 D，最后再插入 E，是不是很没有效率？
所以我们需要使用 key 来给每个节点做一个唯一标识， Diff算法 就可以正确的识别此节点，找到正确的位置区插入新的节点。综上所述，key 的作用主要是为了高效的更新虚拟 DOM。
<view class='container'>
<view wx:for="{{letters}}"wx:for="{{item/index}}">{{item}}</view>
</view>
5、模板用法
5.1 template 模板
WXML 提供模板（template），可以在模板中定义代码片段，在不同的地方调用（是一种 wxml 代码的复用机制），使用 name 属性，作为模板的名字，然后在 <template/> 内定义代码片段。
<template name="contentItem"> <!--模板中包裹的内容，在没有被使用前，是不会进行任何的染的-->
<button size='mini'>{{btnText}}</button>
<view>{{content]]</view>
</template>
<template is="contentItem" data="{{btnText:'按钮',content:'sa二哈'}}"/> <!--也可以是双标签-->
<template is="contentItem" data="{{btnText:'警告',content:'sa金毛'}}"/> <!--也可以是双标签-->5.2 wxml 的引入
小程序 wxml 中提供了两种引入文件的方式：import 和 include。import 主要是导入 template，但是在 wxml 中不能递归引入（也就是 A 引入了 B 的 template，不会引入 B 中引入 C 的 template）。include 主要是将公共的 wxml 中的组件抽取到一个文件中，可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置，但是可以递归导入。
<!--wxml/template.wxml文件中的代码-->
<template name="contentItem">
<button size='mini'>{{btnText}}</button>
<view>{{content]]</view>
</template>
<!--home.wxml中的代码-->
<import src="/wxml/template.wxml"/> <!--绝对路径和相对路径都可以-->
<template is="contentItem" data="{{btnText:'按钮',content:'sa二哈'}}"/> <!--也可以是双标签-->
<template is="contentItem" data="{{btnText:'警告',content:'sa金毛'}}"/> <!--也可以是双标签-->