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界面相关推荐

微信小程序快速开发上手
微信小程序快速开发上手介绍: 从实战开发角度,完整系统地介绍了小程序的开发环境.小程序的结构.小程序的组件与小程序的API,并提供了多个开发实例帮助读者快速掌握小程序的开发技能,并能自己动手开发出小 ...
微信小程序快速开发：视频指导版
<微信小程序快速开发:视频指导版>是2017年5月由人民邮电出版社出版的图书,作者是易伟.本书根据微信小程序的内容,全面系统地介绍了微信小程序的搭建和开发.本书主要内容有小程序注册.编程基 ...
四十六、微信小程序快速开发入门
@Author:Runsen 很久没有写博客,前端学习到这里真的不容易,那接下来Runsen继续学习微信小程序开发. 首先微信小程序官方开发文档(免费的).微信开发者工具(免费的).微信云开发(还是免 ...
注册登录页面代码用js判断是否填入信息_微信小程序快速开发：从注册账号到小程序上架
写在前面自从微信小程序功能发布后,我就一直关注着小程序的动向,然而限于学业繁忙,总是没有太多的时间去学习.大二逐渐学习了Vuejs,被其简洁的设计所吸引,后来看了看小程序的开发文档,发现这么的相似? ...
简单分享怎么开发自己的微信小程序_微信小程序快速制作步骤
小程序开发除了专业人士会自己开发之外,就是外包开发和模板搭建这两种方法. 外包小程序开发需要持续不断地与外包团队沟通,投入的精力也不少,总体价格不低,基本在万元左右, 最适合新手的还是小程序模板搭建啦 ...
视频教程-微信小程序快速入门视频课程-微信开发
微信小程序快速入门视频课程北京八维研修学院技术工程师,5年大型项目实战开发经验,3年授课经验. 孟宪杰 ¥168.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 AP ...
微信小程序云开发入门-快速获取手机号
一.前言很多时候,我们需要获取用户的手机号码,一般是由用户自己输入,然后我们需要保证手机号的准确性比较高的话,可能还需要搭配一个验证码的功能来确保一定的准确性.这样实现起来的开发成本以及用户体验感都 ...
微信小程序云开发快速入门手册-告别切图仔的时刻到了
文章很长,建议先收藏,有充分的时间再学习,没有小程序基础的,也阔以先收藏哦. 本文章会手把手带各位小伙伴入门微信小程序云开发,因为我还不是全栈工程师,所以不是特别清楚前后端分离模式下,后端工程师需 ...
微信小程序的开发界面设计
微信小程序的开发界面设计需要遵循微信官方的设计规范和标准,以确保小程序具有一致的外观和用户体验.以下是一些微信小程序开发界面设计的建议: 界面布局:微信小程序的界面布局应该简洁明了,易于使用.界面中应 ...
（第39册）《微信小程序游戏开发快速入门到实战》夏敏捷著
本书是微信小程序游戏开发的入门教程,通过大量案例介绍微信小程序游戏开发的基础知识和技巧.全书分三篇,基础篇对微信小程序的框架文件.微信小程序逻辑层和视图层.微信小程序组件进行详细介绍,包括JavaSc ...

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

3.微信小程序--快速开发UI界面相关推荐

最新文章

热门文章