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

（1）页面根元素
根元素page
每一个页面都具备一个根元素：<page></page>
页面根元素可以在控制台的WXML选项卡中看到
允许在wxss文件中对page根元素进行样式设置

（2）WXML简介
1）WXML 全称是 WeiXin Markup Language，是小程序框架设计的标签语言。
2）WXML 充当的就是类似 HTML 的角色。—（但是也有不同，下）
3）标签闭合编译----WXML 要求标签必须是严格闭合的，没有闭合将会导致编译错误。

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

WXML和 HTML不同地方：
①标签名不一致
HTML 经常会用到的标签是 div, p, span；WXML 用的标签是 view, button, text ,map等
②属性不一致
WXML多出wx:if、wx:for等一些属性及表达式（MVVM模式）

数据data初始化
①页面需要显示动态数据必须要定义到data对应的变量中；
②如果该数据在操作过程中发生变化，需要将新数据重新绑定到该变量中，语法为this.setData({属性名：属性值})
③获取data数据语法为this.data.属性名

（3）WXML基本标签
视图容器标签view-----功能：基本视图容器，类似于页面开发时的div标签。
文本标签text-----功能：基本文本信息，类似于span标签。

（4）WXML属性
①属性不一致
②数据驱动案例-----wx:if属性决定是否渲染，注意wx:if后值通过{{}}绑定。


数据驱动案例：



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

（5）WXML语法—列表渲染
默认：
数组的当前项的下标默认为 index，当前项默认为 item
指定变量名：
wx:for-item 可以指定数组当前元素的变量名
wx:for-index 可以指定数组当前下标的变量名
案例1：


案例2：九九乘法表


渲染结果：

wx:key属性
wx:for通常需要使用 wx:key 来指定列表中项目的唯一的标识符------name，id
体验：

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

（6）WXML语法—条件渲染

1）wx:if在框架中，使用 wx:if="" 来判断是否需要渲染该代码块


wx:if数据：可以用 wx:elif 和 wx:else 实现多路分支

2）hidden隐藏元素



注意局限性：hidden元素对块状布局才生效，对行内元素也生效，但不推荐使用。
**

wx:if vs hidden

**
①wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
②wx:if是惰性的，切换开销大，但初始化开销小。
③hidden组件始终会被渲染，只是简单的控制wxss显示与隐藏。
④一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

（7）WXML语法—模板
WXML提供模板template，可以在模板中定义代码片段，然后在不同的地方调用（公共内容）
步骤：
①：定义模板并命名

②：在其他页面通过import或者include引入

③：使用 is 属性，声明模板，然后传入data


④最终渲染结果

★★拓展★★
block标签：如果不想要标签多层嵌套，可以在外层使用

但为什呢不用include引入呢？？？
import和include区别
（1）import
import 可以文件中使用目标文件定义的 template，正如之前案例所示。
（2）include
include可以将整个代码引入，相当于是拷贝到 include 位置

（8）WXML语法—共同属性

（9）WXML语法—自定义属性------data-
data-tag="{{info}}"
如何获取自定义属性值------event.currentTarget.dataset.***

单击：bindtap
事件绑定：

☀☀☀☀☀
数据的定义：data选项里—键值对
数据操作：this.setData({})
数据获取：this.data.属性名