微信小程序好看的ui界面-3.微信小程序--快速开发UI界面-小程序ui-即速应用

微信小程序好看的ui界面-3.微信小程序--快速开发UI界面-小程序ui

浏览量：1540 时间：2020-03-20 来源：Jason_LH1024

1.组件是试图容层的基本组成单元，自带一些基本功能以及微信风格的样式。其实，微信小程序的组件就是开发框架对HTML5元素的封装。通过使用组件就可以引用HTML5的相关元素了。如：view组件，与HTML中的div类似。
2.pags/index/index.wxml文件内容
!--index.wxml--viewclass="container"viewbindtap="bindViewTap"class="userinfo"imageclass="userinfo-avatar"src="{{userInfo.avatarUrl}}"background-size="cover"/imagetextclass="userinfo-nickname"{{userInfo.nickName}}/text/viewviewclass="usermotto"textclass="user-motto"{{motto}}/text/view/view
3.运行结果如图
4.view全不替换为div结果仍是如此。
5.但要注意，微信小程序框架并不是完全兼容HTML标签，这里的div渴替换为view组件只是个特例，在实际开发中不建议用div，应使用微信小程序框架提供的组件较好。因开发者工具还不能像eclipse等提供所见即所得的UI设计能力，现在是能通过在wxml文件中输入组件标签的方式来使用组件。、
6.标记语言规范，每个组件都是一对标签组成的，开始和结束标签，标签可用属性修饰，开始和结束之间渴放置内容，内容又是一个组件，即标签可以嵌套。
标签名属性="属性值"内容...../标签名组件的标签名、属性名都是小写字母。viewclass="container"textclass="userinfo-nickname"{{userInfo.nickName}}/text/view
7.@组件的通用属性1.id属性id属性为字符串类型(String),与HTML中的id属性类似，在同一页面中的id属性必须保持唯一，不能重复。由于微信小程序开发框架提供了动态数据绑定技术，程序小程序不再使用id来获取DOM对象。因此，id属性已经很少使用了。
8.2.class属性class属性为字符串类型(String)，与HTML相同，通过class属性来设置组件的样式类。该属性的值为样式类的名称，盖严实类的CSS样式定义在对应的WXSS文件中。如果与动态数据绑定结合，组件的calss也将具有动态换的能力。
9.3.style属性style属性为字符串类型(String),与HTML相同，通过style属性可设置的内联样式。style属性值中可以设置CSS的各种属性。如果与动态数据绑定结合，组件的style也将具有动态换的能力。
10.4.hidden属性hidden属性是一个逻辑值(Boolean),用来决定该组件是否显示。默认值false，即不隐藏。
11.5.data-*属性data-*属性是任何类型，与HTML5得data-*相同，可用来为组件设置任意的自定义属性值。当组件上绑定的事件触发时，这些自定义的属性将作为参数发送给事件处理函数，在事件处理函数中可通过传入参数对对象的currentTarget.dataset方式来获取自定义属性的值。如:下两个自定义属性data-test和data-spark，并定义了触按事件处理函数bindCustomTap:
viewclass="usermotto"bindtap="bindCustomTap"data-test="test1"data-spark="spark"/view
12.事件处理函数bindCustomTap的定义：
bindCustomTap:function(e){console.log(e);}
13.事件触发时传入参数e，在参数e的属性对象currentTarget.dataset中具有2个属性spark和test，这两个属性对应的view组件的2个自定义属性data-spark和data-test。在事件处理程序中可以按一下方式引用这两个属性
e.currentTarget.datset.sparke.currentTarget.datset.test
14.6.bind*/catch*属性这两个是用来组件定义事件的。如上view组件定义触按事件使用的bindtap。其中bind和catch的区别是，bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡向上冒泡。冒泡参考相关文档。。。
15.最后本人初次学习，有什么问题和建议，请给位大佬多多指教。