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

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

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

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

[html] view plain copy

<!--userinfo.wxml-->  

<view class = "userInfo">  

    <text>{{userName}}</text>  

    <image src="avatarUrl" class = "avatar"></image>  

</view>  

[html] view plain copy

<!--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 plain copy

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

Page({  

  data: {  

    message: 'Hello MINA!'  

  }  

})  

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

[html] view plain copy

标签： gtltview组件