微信小程序极简入门（九）视图层（.wxml）

WXML是一套标签语言&＃xff0c;结合基础组件、事件系统&＃xff0c;可以构建出页面的结构。

一 数据绑定

WXML中的动态数据均来自对应Page的data

数据绑定使用“MustCache”语法将变量包起来&＃xff0c;可以作用于&＃xff1a;

1.内容
index.wxml:

{
{}message}

index.js:

Page({ data: { message:"hello" }
})

2.组件属性、控制属性、关键字&＃xff08;都需要在引号之内&＃xff09;
比如&＃xff1a;
index.wxml:

{
condition}}">hello

index.js:

Page({ data: { condition: false }
})

上述代码调试不会显示hello

二 运算

包括算术运算、逻辑判断、字符串计算、数据路径计算等。
如&＃xff1a;
index.wxml:

{
a>5}}">{
{
a}}

index.js:

Page({ data:{ a:10 }
})

三 列表渲染

1. wx:for
   在组件上使用wx:for控制属性绑定一个数组&＃xff0c;即可使用数组中各项的数据重复渲染该组件&＃xff0c;我们推荐使用wx:for-index和wx:for-item指定数组当前下标的变量名和元素名&＃xff0c;因为一个页面很可能会用到多个wx:for&＃xff0c;尽量做到变量见名知意&＃xff1a;
   index.wxml:

{
array}}" wx:for-index&＃61;"indexName" wx:for-item&＃61;"itemName"> {
{
indexName}}:{
{
itemName.message}}

index.js:

Page({ data: { array:[{message:&＃39;foo&＃39;},{
message:&＃39;bar&＃39;}]
}
})

四 模版

WXML提供模版&＃xff0c;可以在模版中定义代码片段&＃xff0c;然后在不同的地方调用。

使用name属性&＃xff0c;作为模版的名字。然后在中定义代码片段&＃xff0c;如创建一个template.wxml页面&＃xff1a;

然后在index.wxml引用并传入相应的数据&＃xff1a;