微信小程序（WXML模板一）

1.根元素page
每一个页面都具备一个很元素：

全称：WXML全称是WeiXin Markup Language，是小程序框架设计的标签语言。
WXML文件后缀名是.wxml，语句在语法上同HTMl非常相似
标签闭合编译：
wxml要求标签必须是严格闭合的，没有闭合会导致编译错误。

标签写法:

解析结果：

WXML中的属性是大小写敏感：

WXML标签
（1）标签名不一致
HTML经常会用到的标签是div、p、span；
小程序的WXL用的标签是view、button、text等
WXML属性
（2）属性不一致
属性：WXML多出wx：if、wx：for等一些属性及表达式。
绑定数据案例：

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

添加按钮操作，控制隐藏

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

WXML基本标签
视图容器标签：
先介绍最基础的一个容器标签；
功能：基本视图容器，类似于页面开发时的

标签。
文本标签 ：
；
功能：基本文本信息，类似于 标签。
WXML语法—数据绑定
WXML 中的动态数据均来自对应 Page 的 data
（1）文本绑定

{{message}}

data初始化数据中：message：“初始化数据data”
渲染结果：初始化数据
（2）属性绑定（class、id、style等属性动态绑定）

初始化数据data

data初始化数据中viewIdValue：“demoId”,num:0
渲染结果：初始化数据data
（3）算木运算
WXML的文本插值可以进行算木运算文本内容{{}a+b}
data初始化数据中：a:2,b:6
渲染结果：文本内容8
（4）三目运算

{{2>3?"one"："two"}}

渲染结果：two
（5）字符串运算

data初始化数据name:"二蛋"
渲染结果：你好，二蛋
WXML语法—列表渲染

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

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

渲染结果：

列表渲染案例：
9*9乘法表

ata初始化数据

标签

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

wx:key属性
wx:for通常需要使用 wx:key 来指定列表中项目的唯一的标识符。
如果不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
wx:key属性

初始化数据data

每个switch按钮都被view嵌套者，如果不想用嵌套语法，可以在外层用block标签

添加操作按钮

添加操作按钮

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