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