微信小程序的学习（3）-视图层WXML

框架的视图层由WXML与WXSS编写。

其中WXML（WeiXin Markup language）用来描述页面的结构，其实就是页面中的组件的结构，其文件是.wxml；WXSS（WeiXin Style Sheet）用于描述页面的样式，其实就是每个组件的样式、属性的设置，其文件是.wxss。

 比如说一个显示用户头像和名字的界面。

其页面结构就是一个Text组件，和一个Image组件；其页面格式就是说两个组件放置的具体位置，还有组件的大小，文字的大小，颜色等等。

<!--userinfo.wxml-->
<view class = "userInfo">
<text>{{userName}}</text>
<image src="avatarUrl" class = "avatar"></image>
</view>

<!--userinfo.wxss-->
.userInfo {
display: flex;
flex-direction: column;
}
.userName {
font-size: 20rpx;
color: #000000;
}
.avatar {
width: 30rpx;
height: 30rpx;
}

1）数据绑定
WXML中的动态数据均来自对应的Page的data。

简单的数据绑定

数据绑定使用Mustache语法（双大括号）将变量包起来。

数据作为内容显示

<view> {{ message }} </view>

Page({
data: {
message: 'Hello MINA!'
}
})
数据作为组件的属性的一部分（需要在双引号之内）
<view id="item-{{id}}"> </view>

Page({
data: {
id: 0
}
})
2）列表渲染
 当我们需要展示一系列相似的数据时，就需要用到列表渲染。

wx:for

在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前的下标变量名默认为index，数组当前项的变量名默认为item。

<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})其显示结果是：0：foo  1：bar
使用wx:for-item 可以指定数组当前元素的变量名，

使用wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>

block wx:for
类似block wx : if ，也可以将wx：for用在<block/>标签上，以渲染一个包含多节点的结构块。例如：

<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>显示结果为：
0

1

1

2

2

3

3）事件

什么是事件：

事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件的条件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如id，data，touches。
事件的使用方式

*在组件中绑定一个事件处理函数。
如bindtap，当用户点击该组件的时候，会在该对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

*在相应的Page定义中写上相应的事件处理函数，参数是event。

Page({
tapName: function(event) {
console.log(event)
}
})

*可以看到log出来的信息大致如下：

{
"type":"tap",
"timeStamp":895,
"target": {
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},
"currentTarget": {
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},
"detail": {
"x":53,
"y":14
},
"touches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}],
"changedTouches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}]
}