WXML 全称是 WeiXin Markup Language，是小程序框架设计的标签语言。
WXML 文件后缀名是 .wxml，语句在语法上同 HTML 非常相似

WXML 要求标签必须是严格闭合的，没有闭合将会导致编译错误。

WXML和 HTML 非常相似，WXML 由标签、属性等等构成。但是也有很多不一样的地方
下面来一一阐述一下：

1. 标签名不一致
   1. HTML 经常会用到的标签是 div, p, span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如弹窗等等。既然都需要这些组件，那干脆把这些常用组件包装起来，大大提高开发效率。
   2. 小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者包装好的，此外还提供了地图、视频、音频等等组件。
2. 属性不一致
   1. 属性：WXML多出wx:if、wx:for等一些属性及表达式
      在网页的一般开发流程中，通常会通过 JS 操作 DOM (对应 HTML 的描述产生的 树)，以引起界面的一些变化响应用户的行为。
   2. MVVM模式：用户点击某个按钮的时候，可以通过JS操作DOM。当项目越来越大的时候，代码会充斥着非常多的界面交互逻辑，这显然不是一个很好的开发模式，因此就有了 MVVM 开发模式（例如 React, Vue），提倡把渲染和逻辑分离。
   3. MVVM模式：简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。
   4. 小程序的框架也是用到了这个思路，例如数据绑定案例。
3. 数据data初始化：
   1. 页面需要显示动态数据必须要定义到data对应的变量中；
   2. 如果该数据在操作过程中发生变化，需要将新数据重新绑定到该变量中，语法为this.setData({属性名：属性值})
   3. 获取data数据语法为this.data.属性名

先介绍最基础的一个容器标签<view></view>
功能：基本视图容器，类似于页面开发时的<div></div>标签。

功能：基本文本信息，类似于<span></span>标签

数据绑定案例。

home.wxml

home.wxss

home.js

页面渲染结果

wx:if属性决定是否渲染，注意wx:if后值通过{{}}绑定

wxml代码

js代码

控制显示信息

页面效果

将status改为false

控制台效果
area不在控制台内消失

页面效果

添加按钮操作，控制显隐



在原来基础上新增按钮文本切换

通过Mustache 即双大括号{{}}语法把变量绑定到界面上，称为数据绑定。

仅仅通过数据绑定还不够完整描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

WXML 中的动态数据均来自对应 Page 的 data

渲染结果

data初始化数据

如果不想要标签多层嵌套，可以在外层使用<block>标签进行嵌套，block不会渲染读取出来

wx:for通常需要使用 wx:key 来指定列表中项目的唯一的标识符
接下来结合switch开关按钮，体会下wx:key的作用

初始化数据data

注意：小程序无法不支持数组push和unshift等语法。这里用concat达到数组开头添加元素的效果

点击添加按钮


点击添加按钮后发现，之前给开关1绑定的开属性被新开关取代，没有实时跟踪到自身，所以需要添加key，给每个元素添加身份识别。