框架的视图层由WXML与WXSS编写,由组件进行展示.
将逻辑层的数据反映成视图,同时将视图层的事件发送给逻辑层.WXML用来描述页面结构,WXSS用于描述页面样式.组件是视图的基本组成单元.
一.数据绑定
1.简单绑定
数据绑定使用Mustache语法(双大括号)将变量包起来,可作用于:
(1)内容
<view>{{message}}</view>
Page({
data: {
messag: "Hello MINA"
}
})
(2)组件属性(需要在双引号内)
<view id = "item-{{id}}"></view>
Page({
data:{
id:0;
}
})
(3)控制属性(需要在双引号内)
<view wx:if = "{{condition}}"></view>
(4)关键字(需要在双引号内)
<view wx:if = "{{condition}}"></view>
2.运算
可以在{{}}内进行简单的运算
(1)三元运算
<view hidden = "{{flag? true : false}}">Hidden</view>
(2)算数运算
<view>{{a + b}} + {{c}} + d</view>
(3)逻辑判断
<view wx:if = "{{length > s}}"></view>
(4)字符串运算
<view>{{"hello" + name}}</view>
3.组合
(1)也可以在Mustache内直接组合,构成新的对象或者数组
<view wx:for = "{{[zero,1,2,3,4]}}">{{item}}</view>
Page({
data: {
zero: 0
}
})
最终合成[0,1,2,3,4];
(2)对象
<template is = "object" data="{{for:a, bar: b}}"></template>
Page({
data:{
a:1,
b:2
}
})
最终合成的对象是{for:1 , bar:2}
也可以用扩展运算符…来将一个对象展开:
<template is = "objectCombine" data="{{...obj1, ...obj2,e:5}}"
Page({
data:{
obj1:{
a:1,
b:2
},
obj2:{
c:3,
d:4
}
}
})
最终合成对象是{a:1, b:2, c:3, d:4,e:5}
如果对象值的key和value相同,也可以间接表达:
<template is = "objectCombine" data = "{{foo, bar}}"></tempate>
data:{
foo: 'my-foo',
bar: 'my-bar'
}
注意:上述方式可以随意组合,但是如果存在变量名相同的情况,后面的会覆盖前面.如:
<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
Page({
data: {
obj1: {
a: 1,
b: 2
},
obj2: {
b: 3,
c: 4
},
a: 5
}
})
二.条件渲染
1.wx:if
在框架中,我们用wx:if=”{{condition}}”来判断是否应该渲染该代码块.
<view wx:if="{{condition}}">True</view>
也可以使用wx:elif和wx:else来添加一个else块.
<view wx:if="{{length > 5}}">1</view>
<view wx:elif = "{{length > 2}}"2</view>
<view wx:else>3</view>
五.引用
WXML提供两种文件引用方式
1.import
import可以再该文件中使用目标文件定义的template.
例如:
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
import的作用域
import有作用域的概念,即只会import目标文件中定义的template,而不会import目标文件import的template.
2.include
include可以将目标文件除了template的整个代码引入,相当于拷贝到了include位置.
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>