WX-视图层

框架的视图层由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}}">Hiddenview>

(2)算数运算

<view>{{a + b}} + {{c}} + dview>

(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}}">Trueview>

也可以使用wx:elif和wx:else来添加一个else块.

<view wx:if="{{length > 5}}">1view>
<view wx:elif = "{{length > 2}}"2view>
<view wx:else>3view>

五.引用
WXML提供两种文件引用方式

1.import
import可以再该文件中使用目标文件定义的template.
例如:

<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"/>