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>
view ui框架
< 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.st
6.bind*/catch*属性这两个是⽤来组件定义事件的。
如上view组件定义触按事件使⽤的bindtap。
其中bind和catch的区别是，bind事件绑定不会阻⽌冒泡事件向上冒泡，catch事件绑定可以阻⽌冒泡向上冒泡。冒泡参考相关⽂档。。。最后本⼈初次学习 ，有什么问题和建议，请给位⼤佬多多指教。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。