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