微信小程序的学习（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
}]
}