数据绑定
<!-- index.wxml -->
<view >
<text >hello,</text>
<text data-title="{{title}}">{{name}}</text>
<view >{{"welcome " + name}}</view>
</view>
// index.js
Page({
data:{
name:"Nicholas",
title:"名字"
}
})
条件渲染
wx:if="{{}}"
|wx:else
<!-- index.wxml -->
<view >
<view wx:if="{{num>50}}">{{num}}大于50</view>
<view wx:else>{{num}}小于等于50</view>
</view>
// index.js
Page({
data:{
num:Math.floor(Math.random()*100+1)
}
})
wx:if="{{}}"
|wx:elif="{{}}"
|wx:else
<!-- index.wxml -->
<view >
<view wx:if="{{num<20}}">{{num}}小于20</view>
<view wx:elif="{{num>20 && num<80}}">{{num}}大于20且小于80</view>
<view wx:else>{{num}}大于等于80</view>
</view>
// index.js
Page({
data:{
num:Math.floor(Math.random()*100+1)
}
})
- 多个元素用
<block>
包裹
<!-- index.wxml -->
<block wx:if="{{num>10}}">
<view >num是{{num}}</view>
<view >num大于10为真</view>
</block>
// index.js
Page({
data:{
num:Math.floor(Math.random()*100)
}
})
列表渲染
index
|item
<!-- index.wxml -->
<view wx:for="{{todos}}">
{{index}}-{{item.title}}
</view>
// index.js
Page({
data:{
todos:[
{title:"吃饭"},
{title:"睡觉"},
{title:"打豆豆"}
]
}
})
其中,数组下标默认是index
,数组项默认是item
。
- 自定义变量名,
idx
|todoItem
<view wx:for="{{todos}}" wx:for-index="idx" wx:for-item="todoItem">
{{idx}}-{{todoItem.title}}
</view>
wx:for-index="idx"
,index
指定为idx
;wx:for-item="todoItem"
,item
指定为todoItem
。
wx:key="title"
数组中的元素是对象,wx:key
的值是对象的一个属性,且该属性值是字符串或数值。
<!-- index.wxml -->
<switch wx:for="{{todos}}" wx:key="title" >{{item.title}}</switch>
<button bindtap="addTodoItem">Add</button>
// index.js
Page({
data:{
todos:[
{title:"吃饭"},
{title:"睡觉"},
{title:"打豆豆"}
]
},
addTodoItem:function(){
const newTodoItem = {
title:"需求开发"
};
this.data.todos = [newTodoItem].concat(this.data.todos);
this.setData({
todos:this.data.todos
})
}
})
wx:key
用来唯一标识列表中的每项,和React里key的性质差不多。
当需要在列表最前面添加新项时,小程序只会创建新项,列表中的已有项则不会经历重建过程,只会重新排序。
wx:key="*this"
数组中的元素是字符串或数值,this
代表了元素自身。
<!-- index.wxml -->
<switch wx:for="{{words}}" wx:for-item="word" wx:key="*this" >{{word}}</switch>
<button bindtap="AddWord">Add</button>
// index.js
Page({
data:{
words:["foo","bar"]
},
AddWord:function(){
this.data.words = ["hello"].concat(this.data.words);
this.setData({
words:this.data.words
})
}
})
模板
- 定义模板
<template name="">
,name
属性唯一标识该模板
<!-- item.wxml -->
<template name="item">
<view>from:{{from}}</view>
<view >msg:{{msg}}</view>
</template>
- 导入模板
<import src="" />
- 使用模板
<template is="" data="">
,is
属性决定渲染哪个模板,data
是传入模板的数据
<!-- index.wxml -->
<import src="./item.wxml" />
<template is="item" data="{{...item}}"></template>
// index.js
Page({
data:{
item:{
from:"Nicholas",
msg:"Nice to meet you"
}
}
})
wxml文件引用
<import src=""/>
import
是有作用域的。
<!-- a.wxml -->
<template name="A">
<view>This is A template</view>
</template>
<!-- b.wxml -->
<import src="./a.wxml"/>
<template name="B">
<text>This is B template</text>
</template>
<!-- index.wxml -->
<import src="./b.wxml" />
<template is="A"></template>
<template is="B"></template>
index.wxml
引入b.wxml
,b.wxml
引入a.wxml
,简单描述成:index->b->a
,但index.wxml
中无法使用a.wxml
中定义的模板。
<include src="">
include
可以引入目标文件中除了<template>
、<wxs>
的所有代码。
<!-- a.wxml -->
<template name="A">
<view>This is A template</view>
</template>
<view>view from A</view>
<!-- b.wxml -->
<import src="./a.wxml"/>
<template name="B">
<text>This is B template</text>
</template>
<view>view from B</view>
<!-- index.wxml -->
<include src="./a.wxml"/>
<include src="./b.wxml"/>
<!-- header.wxml -->
<view>this is header</view>
<!-- footer.wxml -->
<view>this is footer</view>
<!-- index.wxml -->
<include src="./header.wxml"/>
<view>this is content</view>
<include src="./footer.wxml"/>
共同属性
id
|style
|class
<!-- index.wxml -->
<view>
<text id="title" class="title" style="color:red">world</text>
</view>
hidden
<!-- index.wxml -->
<view>
<text hidden="{{isHidden}}">hello,</text>
<text id="title" class="title" style="color:red">world</text>
</view>
/* index.wxss */
#title{
font-family:simsun;
}
.title{
font-size:14px;
}
// index.js
Page({
data:{
isHidden:false
}
})
data-title
|bindtap
<!-- index.wxml -->
<view>
<text data-title="helloworld" bindtap="handleClick">hello,world</text>
</view>
// index.js
Page({
handleClick:function(e){
console.log(e);
console.log(e.target.dataset["title"])
}
})