微信小程序（WXML模板文件一）

页面根元素
每一个页面都具备一个根元素：page 。
允许在wxss文件中对page根元素进行样式设置。
例：


简介：
WXML 全称是 WeiXin Markup Language，是小程序框架设计的标签语言。

WXML标签
WXML 文件后缀名是 .wxml，语句在语法上同 HTML 非常相似。
标签闭合编译：
WXML 要求标签必须是严格闭合的，没有闭合将会导致编译错误。




标签写法：
单标签和双标签：

WXML中的选择器是大小写敏感：



标签名不一致
HTML 经常会用到的标签是 div, p, span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如弹窗等等。既然都需要这些组件，那干脆把这些常用组件包装起来，大大提高开发效率。
小程序的 WXML 用的标签是 view, button, text ,map等等，这些标签就是小程序给开发者包装好的，此外还提供了地图、视频、音频等等组件。

属性不一致
属性：WXML多出wx:if、wx:for等一些属性及表达式。
MVVM模式：用户点击某个按钮的时候，可以通过JS操作DOM。当项目越来越大的时候，代码会充斥着非常多的界面交互逻辑，这显然不是一个很好的开发模式，因此就有了 MVVM 开发模式（例如 React, Vue），提倡把渲染和逻辑分离。
MVVM模式：简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。
小程序的框架也是用到了这个思路，例如数据绑定案例。
数据data初始化：
①页面需要显示动态数据必须要定义到data对应的变量中；
②如果该数据在操作过程中发生变化，需要将新数据重新绑定到该变量中，语法为this.setData({属性名：属性值})
③获取data数据语法为this.data.属性名

WXML基本标签
视图容器标签：view
功能：基本视图容器，类似于页面开发时的div标签。
文本标签text
功能：基本文本信息，类似于页面开发时的span标签。
属性不一致
数据绑定案例：



数据驱动案例
wx:if属性决定是否渲染，注意wx:if后值通过{{}}绑定


拓展
添加按钮操作，控制显隐


WXML属性
数据绑定：
通过Mustache 即双大括号{{}}语法把变量绑定到界面上，称为数据绑定。
属性：
仅仅通过数据绑定还不够完整描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。
属性绑定（class、id、style等属性动态绑定）


渲染结果：

算术运算符


渲染结果：

三目运算符

渲染结果为：

列表渲染
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认：数组的当前项的下标默认为 index，当前项默认为 item

案例：


渲染结果为：

指定变量名：
wx:for-item 可以指定数组当前元素的变量名
wx:for-index 可以指定数组当前下标的变量名

渲染结果为：

列表渲染案例：
九九乘法表：




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


wx:key属性
wx:for通常需要使用 wx:key 来指定列表中项目的唯一的标识符。
案例：



添加操作按钮：


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