3.微信小程序--快速开发UI界面

组件是试图容层的基本组成单元，自带一些基本功能以及微信风格的样式。
其实，微信小程序的组件就是开发框架对HTML5元素的封装。通过使用组件就可以引用HTML5的相关元素了。
如：view组件，与HTML中的div类似。

pags/index/index.wxml文件内容

< !--index.wxml-->< view class="container"> 
 < view  bindtap="bindViewTap" class="userinfo"> 
    < image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover">< /image>  
      < text class="userinfo-nickname">{{userInfo.nickName}}< /text>
        < /view>  < view class="usermotto">  
          < text class="user-motto">{{motto}}< /text>
            < /view>
            < /view>

运行结果如图
在这里插入图片描述

view全不替换为div结果仍是如此。

但要注意，微信小程序框架并不是完全兼容HTML标签，
这里的div渴替换为view组件只是个特例，
在实际开发中不建议用div，应使用微信小程序框架提供的组件较好。
因开发者工具还不能像eclipse等提供所见即所得的UI设计能力，
现在是能通过在wxml文件中输入组件标签的方式来使用组件。、

标记语言规范，每个组件都是一对标签组成的，开始和结束标签，标签可用属性修饰，开始和结束之间渴放置内容，内容又是一个组件，即标签可以嵌套。

<标签名 属性=" 属性值 ">内容.....</标签名>
组件的标签名、属性名都是小写字母。
<view class="container">
<text class="userinfo-nickname">{{userInfo.nickName}}</text> 
 </view>

@组件的通用属性
1.id属性id属性为字符串类型(String),与HTML中的id属性类似，
在同一页面中的id属性必须保持唯一，不能重复。
由于微信小程序开发框架提供了动态数据绑定技术，
程序小程序不再使用id来获取DOM对象。
因此，id属性已经很少使用了。

2.class属性class属性为字符串类型(String)，与HTML相同，
通过class属性来设置组件的样式类。
该属性的值为样式类的名称，盖严实类的CSS样式定义在对应的WXSS文件中。
如果与动态数据绑定结合，组件的calss也将具有动态换的能力。

3.style属性style属性为字符串类型(String),与HTML相同，
通过style属性可设置的内联样式。
style属性值中可以设置CSS的各种属性。如果与动态数据绑定结合，
组件的style也将具有动态换的能力。

4.hidden属性hidden属性是一个逻辑值(Boolean),用来决定该组件是否显示。
默认值false，即不隐藏。

5.data-*属性data-*属性是任何类型，与HTML5得data-*相同，可用来为组件设置任意的自定义属性值。
当组件上绑定的事件触发时，这些自定义的属性将作为参数发送给事件处理函数，
在事件处理函数中可通过传入参数对对象的currentTarget.dataset方式来获取自定义属性的值。
如 : 下两个自定义属性data-test和data-spark，并定义了触按事件处理函数bindCustomTap:

< view class="usermotto" bindtap="bindCustomTap" data-test="test1" 
data-spark="spark">< /view>

事件处理函数bindCustomTap的定义：

bindCustomTap:function(e){
console.log(e);
}

事件触发时传入参数e，在参数e的属性对象currentTarget.dataset中具有2个属性spark和test，
这两个属性对应的view组件的2个自定义属性data-spark和data-test。
在事件处理程序中可以按一下方式引用这两个属性

e.currentTarget.datset.spark
e.currentTarget.datset.test

6.bind*/catch*属性这两个是用来组件定义事件的。
如上view组件定义触按事件使用的bindtap。
其中bind和catch的区别是，bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡向上冒泡。冒泡参考相关文档。。。

最后本人初次学习，有什么问题和建议，请给位大佬多多指教。

3.微信小程序--快速开发UI界面

猜你喜欢