WXML的语法
概述
WXML(WeiXin Markup Language)是一种标签语言,可以全面类比html。在小程序内起到了和html一样的作用。结合基础组件,事件系统可以构成页面的结构。
- 数据绑定
- 列表渲染
- 条件渲染
- 模板
- 引用
数据绑定
简单绑定
基础用法
双大括号{{}}的语法,对应的数据来自Page()中的data.
<view>{{name}}</view>
<view id="view-{{id}}"></view>
<view wx:if="{{bool}}"></view>
<view checked="{{true}}"></view>
Page({
data:{
name:'zhang',
id:0,
bool:false
}
})
给组件的属性做简单绑定的时候,需要在双引号之内写。
控制属性,也要在双引号之内写。
布尔值关键字也要写在双引号之内。分别代表真值和假值。不能使用checked="false"。
运算
可以在{{}}内进行简单的运算。
<view id="{{bool?a:b}}">
<view>{{a+b-c}}</view>
<view wx:if="{{b}}>2"></view>
<view>{{"hello"+b}}</view>
<view>{{obj.key arr[0]}}</view>
Page({
data:{
a:2,
b:3,
c:1,
obj:{
key:'hello'
},
arr:[1,2]
}
})
分别可以进行三目运算,简单的加减,条件判断,字符串拼接运算,数据的路径运算。
组合
也可以在{{}}内部直接进行组合,构成新的对象或者数组。
<view wx:for="{{zero,1,2,3,4}}">{{item}}</view>
<view data="{{foo:a,bar:b}}"></view>
Page({
data:{{
zero:0,
a:2,
b:3
}}
})
最终会分别生成数组和对象。
也可以用...扩展运算符对一个对象展开
<view data="{{...obj1,obj2,e:5}}"></view>
Page({
data:{
obj1:{
a:1,
b:2
},
obj2:{
c:1,
d:3
}
}
})
但是如果有相同的变量名,后面的变量名会覆盖前面的。
如果{{}}和引号之间用空格,解析的时候也会解析成字符串。
列表渲染
wx:for
渲染列表使用wx:for在属性上绑定一个数组,然后就可以把数组中的每一项渲染出来。
<view wx:for={{index}}:{item}></view>
Page({
data:{
arr:[1,2,3,4]
}
})
item是value,index是key。同时,wx:for也可以嵌套。
<view wx:for={{[1,2,3,4,5,6,7,8,9]}} wx:for-item={{i}}>
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for=item={{j}}>
{{i}}*{{j}} = {{i*j}}
</view>
</view>
用wx:for-item表示数组当前元素的value
用wx:for-index表示数组当前元素的key
block wx:for
可以把wx:for作用到<block>标签上,来渲染一个包含多个节点的结构块。
<block wx:for={{['a','aa','aaa']}}>
<view>{{index}}</view>
<view>{{item}}</view>
</block>
wx:key
大概是唯一标识之类的功能。
条件渲染
wx:if
使用wx:if="{{condition}}"来判断是否根据逻辑进行条件渲染。
<view wx:if="{{condition}}">show</view>
<view wx:if="{{!condition}}">hide</view>
Page({
data:{
condition:true
}
})
block wx:if
和block wx:for一样,这个可以作用在<block>标签之上,用于一个结构块是否展示。
<block wx:if="{{bool}}">
<view>{{hello}}</view>
<view>world</view>
</block>
Page({
data:{
bool:true,
hello:hello
}
})
wx:if 和hidden
两者都可以让组件隐藏不显示,但是还是有所不同。
wx:if是惰性的,当它为false的时候并不会执行渲染,当为true的时候才会执行渲染。但是hidden就算是不显示也会执行渲染。
所以说,wx:if有更多的切换效率,较少的初始化渲染效率
hidden正好相反,有更多的初始化效率,更低的切换效率。
模板
WXML提供了模板功能,可以在模板中定义代码片段,在不同地方引用。
<template name="msg">
<view>hello world</view>
<view>hahaha</view>
</template>
<template is="msg"></template>
用is关键字引用,用name属性声明。
同时,is关键字还支持{{}}的一切语法。比如三目运算来决定具体使用哪一个模板。
模板的作用域
需要指出的是,模板还有自己的作用域,只能使用data传入的数据,以及模板定义文件中定义的<wxs />模块。
<template name="tem1">
<view>{{arr[0]}}</view>
</template>
<template is="tem1" data="{{arr}}">
</template>
引用
小程序提供两种引用方式。可以在一个WXML中引入另外一个WXML文件,分别是import和include。
import
可以在文件中使用目标文件中定义的
<template>。
// item.wxml
<template name="item">
<view>{{text}}</view>
</template>
// newItem.wxml
<import src="item.wxml" />
<template is="item" data="{{text}}">
</template>
import也有作用域的概念,只会是目标文件中的<template>,直属import,而不会是目标文件的目标文件。
include
整体拷贝,有点类似velocity中的#include。
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>
总结
一句话总结就是,这就是vue嘛。。。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。