Android开发者学习小程序之旅《二》视图层WXML

发布者: lslinux | 发布时间: 2017-11-14 05:00| 查看数: 5393| 评论数: 1|帖子模式

作者：Garment1991，来自原文地址

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

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

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

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

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

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

1）数据绑定

WXML中的动态数据均来自对应的Page的data。

简单的数据绑定

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

数据作为内容显示

[html] view plaincopy
<view> {{ message }} </view>  
  
  
Page({  
  data: {  
    message: 'Hello MINA!'  
  }  
})  

数据作为组件的属性的一部分（需要在双引号之内）

[html] view plaincopy
<view id="item-{{id}}"> </view>  
  
  
Page({  
  data: {  
    id: 0  
  }  
})  

2）列表渲染

当我们需要展示一系列相似的数据时，就需要用到列表渲染。

wx:for

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

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

[html] view plaincopy
<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 可以指定数组当前下标的变量名：

[html] view plaincopy
<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/>标签上，以渲染一个包含多节点的结构块。例如：

[html] view plaincopy
<block wx:for="{{[1, 2, 3]}}">  
  <view> {{index}}: </view>  
  <view> {{item}} </view>  
</block>  

显示结果为：

3）事件

什么是事件：

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

事件的使用方式

*在组件中绑定一个事件处理函数。

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

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

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

[javascript] view plaincopy
Page({  
  tapName: function(event) {  
    console.log(event)  
  }  
})  

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

[javascript] view plaincopy
{  
"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  
}]  
}  

小程序视图, 小程序开发者

收藏0

Android开发者学习小程序之旅《二》视图层WXML

最新评论

浏览过的版块

轻源码让程序更轻更快