组件介绍
1、视图容器组件（view）
视图容器组件是wxml界面布局的基础组件，它和html的div功能类似，用于界面布局。
view 容器组件相关属性：
属性 类型 默认值 说明hover Booleanfalse 是否启用单击态hover-class String none 按下后显示的样式 hover-start-time Number50 按住后多久出现单击态 毫秒 hover-stay-time Number 400 手松开后单击态保留的时间 毫秒案例代码：
<view class='item' hover="true" hover-class='test' hover-start-time='60' hover-stay-time='4000'> <input type='text' name="loginName" placeholder='请设置4-20位用户名' placeholder-class='holder' bindblur='accountblur'></input> </view> .test{ background-color: red; }2、可滚动的视图区域（scroll-view）
可滚动的视图区域允许视图区域内容横向滚动或纵向滚动，类似于浏览器的滚动条。
scroll-viwe 容器相关属性
属性 类型 默认值 说明scroll-x Booleanfalse 允许横向滚动scroll-y Booleanfalse 允许纵向滚动upper-threshold Number50 距离顶部/左边多少像素时，触发scrolltoupper函数lower-threshold Number 50 距离底部/右边多少像素时，触发scrolltolower函数scroll-top Number 设置竖向滚动条的位置scroll-left Number 设置横向滚动条的位置scroll-into-view String 值为某子元素id，则滚动到该元素，元素顶部对齐到滚动区域顶部bindscrolltoupper EventHandle 滚动到顶部/左边事件bindscrolltolower EventHandle 滚动到底部/右边事件bindscroll EventHandle 滚动时触发该事件3、滑块视图容器（swiper）
滑块视图容器用来在指定区域内切换内容的显示，常用语海报轮播和页面内容切换效果
swiper相关属性：
属性 类型 默认值 说明indicator-dotsBooleanfalse 是否显示面板指示点autoplayBooleanfalse 是否自动切换currentNumber0 当前所在页面的indexintervalNumber5000 自动切换时间间隔durationNumber500 滑动动画时长circularBooleanfalse 是否采用衔接滑动bindchangeEventHandel curren改变时触发change事件示例代码：
<view class='img'> <swiper indicator-dots='{{indicatorDots}}' autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{banners}}" wx:for-index="index" wx:key="{{index}}"> <swiper-item> <image src='{{item}}' style='width:100%; height:230px;'></image> </swiper-item> </block> </swiper> </view> Page({ /** * 页面的初始数据 */ data: { banners: [ '../../images/banner.jpg', '../../images/banner1.jpg', '../../images/banner2.jpg', '../../images/banner3.jpg' ], indicatorDots: true, autoplay: true, interval: 5000, duration: 1000 } })4、图标组件（icon）
微信小程序提供了丰富的图标组件，应用于不同的场景。
icon属性
属性 类型 默认值 说明typeString icon类型有：succes、succes_no_circle、info、warn、waitiong、cancel、download、search、clearsizeNumber23icon的大小 单位像素colorColor icon的颜色5、文本组件（text）
文本组价支持转义字符“\”
6、进度条组件（progress）
进度条组件是一种提高用户体验度的组件
progress属性
属性 类型 默认值 说明percentFloat 百分比0~100show-infoBooleanfalse 在进度条右侧显示百分比stroke-widthNumber6 进度条线的宽度，单位pxcolorColor#09BB07 进度条的颜色activeBooleanfalse 进度条从左往右的动画7、表单组件（form）
button 按钮组件
属性 类型 默认值 说明sizeStringdefault 按钮大小：default，minitypeStringdefault 按钮样式类型，有效值 primary，default，warnplainBooleanfalse 按钮是否镂空，背景色透明disabledBooleanfalse 是否禁用form-typeString 按钮类型：submit，resethover-classStringbutton-hver 指定按钮按下去的样式类loadingBooleanfalse 名称是否带loading效果hover-start-timeNumber50 安装之后多少毫秒后出现单击态hover-stay-timeNumber400 手指松开后单击态保留多少毫秒checkbox 多项选择器、radio 单项选择器
属性 类型 默认值 说明valueString 选中的value值disabledBooleanfalse 是否禁用checkedBooleanfalse 是否选中当前项colorColor 多选框的颜色input 单行输入框
属性 类型 默认值 说明valueString 输入框的初始内容typeStringtext input类型：text，number，idcard，digitpasswordBooleanfalse 是否是密码类型placeholderString 输入框占位符placeholder-styleString 指定的占位符样式placeholder-classStringinput-palceholder
指定的占位符样式类disabledBooleanfalse 是否禁用maxlengthNumber140 最大输入长度，设置为-1时不限制长度cursor-spacingNumber0 指定光标与键盘的距离，单位pxauto-focusBooleanfalse 自动聚焦，拉起键盘（即将废弃，直接使用focus）foucsBooleanfalse 获取焦点bindinputEventHandleinput事件
bindfocusEventHandle focus事件bindblurEventHandle blur事件bindconfirmEventHandle 单击“完成”按钮时触发textarea 多行输入框
属性 类型 默认值 说明valueString 输入的内容placeholderString 输入框为空时的占位符placeholder-styleString 占位符样式placeholder-classStringinput-placeholder 占位符样式类disabledBooleanfalse 是否禁用maxlengthNumber140 输入最大长度，设置为-1时不限制长度cursor-spacingNumber0 指定光标与键盘的距离focusBooleanfalse 获取焦点auto-heightBooleanfalse 是否自动增高，设置auto-height时，style.height不生效fixedBooleanfalse 如果textarea在一个position:fixed的区域中时，需要指定该参数为truebindinechangeEventHandle 行数变化时调用该函数bindinputEventHandle input事件bindfocusEventHandle focus事件bindblueEventHandle blur事件bindconfirmEventHandle 单击“完成”按钮时触发该事件lable组件：只包含了一个for属性具体就不过多介绍该组件了。
上半部分组件就介绍到这里，以上组件内容做一个大概了解即可，做到在实践的过程中成长，多动手。接下来还会着重介绍一下滚动选择器（picker），滑动选择器（slider），开关选择器（switch），form表单的相关属性和一些地图、画布等组件的使用，为了美好的未来多投资自己才是最正确的选择的，告别懒惰！！！
转载于:https://www.cnblogs.com/powerMG/p/9251954.html
相关资源：JAVA上百实例源码以及开源项目