小程序开发三--使用组件构建界面

从小程序的文件架构来讲，wxml 定义了页面结构，wxss文件定义了样式

界面结构wxmL比较容易理解，主要是由八大类基础组件构成：

一、视图容器(View Container)：		二、基础内容(Basic Content)
组件名	说明	组件名	说明
view	视图容器	icon	图标
scroll-view	可滚动视图容器	text	文字
swiper	可滑动的视图容器	progress	进度条
三、表单组件(Form)		四、操作反馈组件(Interaction)
组件名	说明	组件名	说明
button	按钮	action-sheet	上拉菜单
form	表单	modal	模态弹窗
input	输入框	progress	进度条
checkbox	多项选择器	toast	短通知
radio	单项选择器	五、导航(Navigation)
picker	列表选择器	组件名	说明
slider	滑动选择器	navigator	应用内跳转
switch	开关选择器
label	标签
六、多媒体(Media)		七、地图(Map)
组件名	说明	组件名	说明
audio	音频	map	地图
image	图片
video	视频
八、画布(Canvas)
组件名	说明
canvas	画布

关于这八大类的属性和具体用法可参考以下参考文献链接：

微信小程序 基础组件_w3cschool

视图容器 | 微信开放文档

小程序教程中的”组件“部分有说明和示例代码，非常易于参考。

以button组件使用为例：

button | 微信开放文档

先看属性说明：

button

基础库 1.0.0 开始支持，低版本需做兼容处理。

按钮。

属性	类型	默认值	必填	说明	最低版本
size	string	default	否	按钮的大小	1.0.0
type	string	default	否	按钮的样式类型	1.0.0
plain	boolean	false	否	按钮是否镂空，背景色透明	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
loading	boolean	false	否	名称前是否带 loading 图标	1.0.0
form-type	string		否	用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件	1.0.0
open-type	string		否	微信开放能力	1.1.0
hover-class	string	button-hover	否	指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果	1.0.0
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态	1.5.0
hover-start-time	number	20	否	按住后多久出现点击态，单位毫秒	1.0.0
hover-stay-time	number	70	否	手指松开后点击态保留时间，单位毫秒	1.0.0
lang	string	en	否	指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。	1.3.0
session-from	string		否	会话来源，open-type="contact"时有效	1.4.0
send-message-title	string	当前标题	否	会话内消息卡片标题，open-type="contact"时有效	1.5.0
send-message-path	string	当前分享路径	否	会话内消息卡片点击跳转小程序路径，open-type="contact"时有效	1.5.0
send-message-img	string	截图	否	会话内消息卡片图片，open-type="contact"时有效	1.5.0
app-parameter	string		否	打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效	1.9.5
show-message-card	boolean	false	否	是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效	1.5.0
bindgetuserinfo	eventhandle		否	用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效	1.3.0
bindcontact	eventhandle		否	客服消息回调，open-type="contact"时有效	1.5.0
bindgetphonenumber	eventhandle		否	获取用户手机号回调，open-type=getPhoneNumber时有效	1.2.0
binderror	eventhandle		否	当使用开放能力时，发生错误的回调，open-type=launchApp时有效	1.9.5
bindopensetting	eventhandle		否	在打开授权设置页后回调，open-type=openSetting时有效	2.0.7
bindlaunchapp	eventhandle		否	打开 APP 成功的回调，open-type=launchApp时有效	2.4.4

再打开示例代码仔细阅读和体会