欢迎光临,了解微信小程序开发,就上易用通!

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

发布:2018-02-03 14:43浏览: 来源:网络 作者:cola

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

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

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

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

 

 

[html] view plain copy
 
  1. <!--userinfo.wxml-->  
  2. <view class = "userInfo">  
  3.     <text>{{userName}}</text>  
  4.     <image src="avatarUrl" class = "avatar"></image>  
  5. </view>  
[html] view plain copy
 
  1. <!--userinfo.wxss-->  
  2. .userInfo {  
  3.     display: flex;  
  4.     flex-direction: column;  
  5. }  
  6. .userName {  
  7.     font-size: 20rpx;  
  8.     color: #000000;  
  9. }  
  10. .avatar {  
  11.     width: 30rpx;  
  12.     height: 30rpx;  
  13. }  

1)数据绑定

 

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

简单的数据绑定

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

数据作为内容显示

 

[html] view plain copy
 
  1. <view> {{ message }} </view>  
  2.   
  3.   
  4. Page({  
  5.   data: {  
  6.     message: 'Hello MINA!'  
  7.   }  
  8. })  


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

 

 

[html] view plain copy
 
  1. <





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。