基本语法
基本语法如下：
<标签名 属性名1="属性值1" 属性名2="属性值2" ...> 内容/其他wxml</标签名>
几个特点：
1.严格闭合
2.属性名和绑定数据大小写敏感
3.数据绑定必须使用双大括号
4.属性名除特殊属性外，都使用key＝ "value"，value使用双引号包含
数据绑定
什么是数据绑定：WXML 通过 {{变量名}} 来绑定 WXML 文件和对应的 JavaScript 文件中的 data 对象属性。
数据绑定的作用：动态渲染页面。
浏览器的web开发中，javascript可以通过调用dom对象来更新页面，比如document对象获取对应id的节点然后增删改对应的节点。但是，通过小程序的架构可以了解到，小程序中没有dom对象，所以通过操作dom来动态渲染，而是通过数据绑定+setData()+内部机制来动态渲染。
数据绑定的使用场景：
1、单纯的数据绑定
2、属性绑定
3、算数运算
4、逻辑运算
注意两点：
1.变量区分大小写，也就是说time和Time是两个变量;
2.没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中；
3.属性需要使用双引号括起来；
举个栗子：
js文件：
// 定义一个本文件中的全局变量
var shouldRed = false;
Page({
data: {
// text:"这是一个页面"
color: "window-red",
msg: "hello world"
},
//文字点击函数
click: function () {
shouldRed = !shouldRed;
if(shouldRed) {
this.setData({color: "window-red" });
} else {
this.setData({color: "window" });
};
}
})
wxml文件：
<view>
//catchtap=catch+tap=不向下层传递的触摸时间
<text catchtap="click" class="{{color}}">{{msg}}</text>
// 变量绑定+逻辑运算
<text>{{'\nhello' + 'world'}}</text>
<text>{{'\nhello ' + (1+1)}}\n</text>
<text>{{1+1}} + {{2*2}} = 6</text>
</view>
wxss文件：
// 蓝色文字的样式
.window {
color: #4995fa
}
// 红色文字的样式
.window-red {
color: #fa4961
}
结果：
数据绑定
条件语法(if else)
WXML 中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：
<view wx:if="{{condition1}}">condition1为ture</view>
使用 wx:elif 和 wx:else 来添加一个 else 块：
<view wx:if="{{length == 5}}">length为5</view>
<view wx:elif="{{length == 3}}">length为3</view>
<view wx:else="{{length == 1}}">length为1</view>
如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性：
<block wx:if="{{condition2 == false}}">
<view>condition2为false</view>
<view>condition2为false</view>
</block>
js文件中：
Page({
data: {
condition1: true,
length: 3,
condition2: false,
}
})
结果：
条件语法
列表渲染(for循环)
可以使用for循环多次渲染一个组件，也就是创建多个组件。其中，默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。
举个例子：
js：
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}, {
message: '123'
}, {
message: '123'
}, {
message: '123'
},]
}
})
wxml：
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
结果：
列表渲染
使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
类似 block wx:if ，也可以将 wx:for 用在 <block/> 标签上，以渲染一个包含多节点的结构块。例如：
<block wx:for="{{['a', 'b', 'c']}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
结果：
block-for
列表渲染中key值的使用：
模板
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。使用 name 属性，作为模板的名字。template的定义如下：
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
使用template时，使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如下：
<template name="testTemplate">
<view>
<text>template测试\n</text>
<text>{{index}}:{{msg}}\n</text>
<text>time:{{time}}</text>
</view>
</template>
<view>
<template is="testTemplate" data="{{index,msg,time}}"></template>
</view>
js：
Page({
data: {
index: 0,
msg: 'this is a template',
time: '2016-06-18'
}
})
结果：
template
template的动态渲染：
<template name="single">
<view> single </view>
</template>
<template name="double">
<view> double </view>
</template>
<block wx:for="{{[1,2,3,4,5]}}">
<template is="{{item % 2 == 0 ? 'double' : 'single'}}"></template>
</block>
结果：
template动态渲染
引用
import：import 可以在该文件中使用目标文件定义的 template，但是import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性。
include：include 可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置
共同属性
所有wxml 标签都支持的属性称之为共同属性
共同属性
网友评论