目录
小程序中有很多组件，例如表单组件、媒体组件、导航组件等，组件及详细属性可以参考 官方文档，下面介绍几种常用的组件。
1、Text 组件
Text 组件用于显示文本，类似于 html 中的 span 标签，是行内元素，下面是 Text 组件的属性和基本使用。官方文档
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
| selectable | boolean | false | 否 | 文本是否可选 | 1.1.0 |
| space | string | nbsp：根据字体设置的空格大小（默认值） ensp：中文字符空格一半大小 emsp：中文字符空格大小 |
否 | 显示连续空格 | 1.4.0 |
| decode | boolean | false | 否 | 是否解码 | 1.4.0 |
<!--text组件的基本使用-->
<text>Hello world\n</text> <!--行内元素，不会独占一行，可以通过\n换行-->
<!--selectable属性：决定文本是否可被选中-->
<text selectable='true'>你好小程序\n</text> <!--文本默认是不可选中的，可以设置selectable属性使可被选中-->
<text selectable='true'>你好小程序\n</text> <!--一个属性如果设置在为true可以直接写属性，不想写属性值-->
<!--space属性：决定文本空格的大小-->
<text>Hello world\n</text> <!--显示：Hello world-->
<text space='nbsp'>Hello world\n</text> <!--显示：Hello world--> <!--nbsp是默认值-->
<text space='ensp'>Hello world\n</text> <!--显示：Hello world--> <!--ensp是半个中文字符大小-->
<text space='emsp'>Hello world\n</text> <!--显示：Hello world--> <!--emsp是一个中文字符大小-->
<!--decode属性：是否解码文本-->
<text>5 > 3</text> <!--显示：5 > 3-->
<text decode>5 > 3</text> <!--显示：5 > 3-->注意：（1）tip：decode可以解析的有 ；<；>；&；&apos；&ensp；&emsp；（2）tip：各个操作系统的空格标准并不一致。（3）tip：text 组件内只支持text嵌套。（4）tip：除了文本节点以外的其他节点都无法长按选中。（5）bug：基础库版本低于 2.1.0 时，text 组件内嵌的 text style 设置可能不会生效。
2、Button 组件
Button 按钮组件的属性比较多，下面简单说几个常用的属性及其组件的基本使用，具体的属性可以参考 官方文档。
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
| 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 |
| hover-class | sting | button-hover | 否 | 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果 |
1.1.0 |
| open-type | string | 官方文档 | 否 | 微信开放能力，比如：open-type='getUserInfo' 获取用户信息 | 1.1.0 |
| form-type | sting | 否 | 用于 fom 组件，点击分别会触发 fom 组件的 submit/reset 事件 | 1.1.0 |
<!--1.button 的基本使用-->
<button>按钮</button> <!--默认按钮很大，而且会独占一行，是块级 block 元素-->
<!--2.size属性：mini-->
<button size='mini'>按钮</button> <!--按钮变小，inline-block 元素，不会独占一行-->
<button size='mini'>按钮</button> <!--按钮变小，inline-block 元素，不会独占一行-->
<!--3.type属性：primary、default、warn-->
<button size='mini'type='primary'>按钮</button> <!--按钮显示绿色-->
<button size='mini'type='default'>按钮</button> <!--按钮显示白色-->
<button size='mini'type='warn'>按钮</button> <!--按钮显示红色-->
<!--4.plain：镂空效果-->
<button size='mini' plain>按钮</button> <!--按钮显示镂空样式-->
<!--5.disable：不可用-->
<button size='mini' disabled>按钮</button> <!--按钮变灰，不可点击-->
<!--6.loading：加载效果，值可以设置一个变量，比如当网络请求结束时让变量为true-->
<button size='mini' loading="isLoading">按钮</button> <!--按钮前显示加载小圆圈-->
<!--7.hover-class:鼠标点击按钮显示的样式-->
<button hover-class='pressed'>按钮</button> <!--可以到wxss中给pressed类名设置样式-->
<!--8.open-type:微信开发能力，将 open-type 改成 getUserlnfo，并且绑定 bindgetuserinfo 事件去获取用户信息-->
<button size='mini' open-type='getUserInfo' bindgetuserinfo='handleGetUserInfo'>获取授权</button>
3、View 组件
View 视图组件（块级元素独占一行，通常用作容器组件），相当于 html 中的 div，下面是 View 组件的属性和基本使用 官方文档
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| hover-class | string | none | 否 | 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 |
1.0.0 |
| hover-stop-propagation | boolean | false | 否 | 指定是否阻止本节点的祖先节点出现点击态 | 1.5.0 |
| hover-start-time | number | 50 | 否 | 按住后多久出现点击态，单位毫秒 | 1.0.0 |
| hover-stay-time | number | 400 | 否 | 手指松开后点击态保留时间，单位毫秒 | 1.0.0 |
<!--1.view的基本使用-->
<view class='box'>哈哈哈</view> <!--可以到wxss给类名设置样式，注意view是块级元素-->
<view><text>你是一只小二哈</text></view> <!--view中还可以嵌套使用text、button等组件-->
<!--2.hover-class：当用户点击按下组件时，显示样式-->
<view class='box1' hover-class='hover-view' hover-stay-time="{{0}}">box1</view>
<!--3.hover-stop-propagation：可以阻止本节点的祖先节点出现点击态-->
<view class='box2'>
<view class='boxl' hover-class='hover-view' hover-stop-propagation>box1</view>
</view>4、Image 组件
Image 组件用于显示图片，下面说几个常用的属性及其组件的基本使用，具体的属性可以参考 官方文档。
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| src | string | 否 | 图片资源地址 | 1.0.0 | |
| mode | string | scaleToFill | 否 | 图片裁剪、缩放的模式 | 1.0.0 |
| webp | boolean | false | 否 | 默认不解析 webP 格式，只支持网络资源 | 2.9.0 |
| lazy-load | boolean | false | 否 | 图片懒加载，在即将进入一定范围（上下三屏）时才开始加载 | 1.5.0 |
| show-menu-by-longpress | boolean | false | 否 | 开启长按图片显示识别小程序码菜单 | 2.7.0 |
| binderror | eventhandle | 否 | 当错误发生时触发，event.detail = {errMsg} | 1.0.0 | |
| bindload | eventhandle | 否 | 当图片载入完毕时触发，event.detail = {height, width} | 1.0.0 |
<!--1.image的基本使用-->
<image/> <!--单标签-->
<image></image> <!--双标签-->
<!--2.src:本地地址（相对路径/绝对路径）/远程地址-->
<image src='../../assets/home/picture.jpg'/> <!--相对路径-->
<image src='/assets/home/picture.jpg'/> <!--绝对路径：/ 代表根目录-->
<image src='https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg'/> <!--图片远程地址-->
<!--3.显示用户在相册中选择的图片-->
<button bindtap="handleChooseAlbum"></button> <!--wxml中的代码-->
<image src="{{imagePath}}"></image> <!--将用户选中的图片显示出来-->
Page({ <!--js中的代码-->
data:{
imagePath:'' <!--保存选中的照片的路径-->
},
handleChooseAlbum(){
wx.chooseImage({ <!--系统API，让用户在相册中选择图片（或者拍照）-->
success:(res) => ( <!--要保证下面的this可以指向data中的数据，必须使用箭头函数-->
console.log(res); <!--可以打印图片的路径及图片的大小等信息-->
const path = res.tempFilePaths[0]; <!--取出图片的路径-->
this.setData({ <!--设置imagePath，为了保证响应式，必须使用setData()方法-->
imagePath:path;
})
},
})
}
})
<!--4.bindload：监听图片加载完成-->
<image src="/assets/home/picture.jpg" bindload='handlemageLoad'/> <!--可以到js中写handlemageLoad()方法-->
<!--5.lazy-load：图片的懒加载->在即将进入一定范围（上下三屏）时才开始加载-->
<image wx:for="{{10}}" src="/assets/home/picture.jpg" bindload='handlemageLoad' lazy-load/>
<!--6.show-menu-by-longpress：长按图片出现识别小序码-->
<image show-menu-by-longpress src="/assets/home/picture.jpg"/>注意：（1）image 组件可以写成单标签，也可以修成双标签，因为它里面不需要包裹内容，单标签：（<imag/>），双标签：（<image></image>）（2）image 组件默认有自己的大小：320×248。（3）image 组件时一个行内块级元素（inline-block）
5、Input组件
Input 组件用于接收用户的输入信息，也是开发中非常常见的，下面是 Input 组件的一些属性和基本使用 官方文档 。
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| value | string | 是 | 输入框的初始内容 | 1.0.0 | |
| type | string | text | 否 | input 的类型 | 1.0.0 |
| password | boolean | false | 否 | 是否是密码类型 | 1.0.0 |
| placeholder | string | 是 | 输入框为空时占位符 | 1.0.0 | |
| bindinput | eventhandle | 是 | 键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。 | 1.0.0 | |
| bindfocus | eventhandle | 是 | 输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持 | 1.0.0 | |
| bindblur | eventhandle | 是 | 输入框失去焦点时触发，event.detail = {value: value} | 1.0.0 | |
| bindconfirm | eventhandle | 是 | 点击完成按钮时触发，event.detail = {value: value} | 1.0.0 | |
| 更多属性，请参考小程序的 Input 官方文档 | |||||
<!--1.input的基本使用-->
<input/> <!--注意：input框默认情况下是没有任何样式和边框的，需要手动wxss设置-->
<!--2.value，input中的默认值-->
<input value='你是一只小二哈'/>
<!--3.type：决定弹出键盘类型（文本输入键盘/数字/身份证）-->
<input type='number'/>
<!--4.password：暗文-->
<input password/>
<!--5.placeholder：占位文字-->
<input placeholder='请输入内容'/>
<!--6.input绑定事件-->
<input bindinput='handleInput' bindfccus='handleFocus' bindblur='handleBlur'/>
Page({ <!--js中的代码-->
data:{
},
bindinput(event){
console.log('input家取结向：',event);
},
handleFocus(event){
console.log('input家取结向：',event); <!--event中可以查看输入的信息值-->
},
handleBlur(event){
console.log('input失去然点：',event);
}
})6、scroll-view 组件
小程序中页面的滚动是自动的，scroll-view 组件是实现局部滚动，下面是 scroll-view 组件的一些属性和基本使用 官方文档 。
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| scroll-x | boolean | false | 否 | 允许横向滚动 | 1.0.0 |
| scroll-y | boolean | false | 否 | 允许纵向滚动 | 1.0.0 |
| upper-threshold | number/string | 50 | 否 | 距顶部/左边多远时，触发 scrolltoupper 事件 | 1.0.0 |
| lower-threshold | number/string | 50 | 否 | 距底部/右边多远时，触发 scrolltolower 事件 | 1.0.0 |
| scroll-top | number/string | 否 | 设置竖向滚动条位置 | 1.0.0 | |
| scroll-left | number/string | 否 | 设置横向滚动条位置 | 1.0.0 | |
| bindscrolltoupper | eventhandle | 否 | 滚动到顶部/左边时触发 | 1.0.0 | |
| bindscrolltolower | eventhandle | 否 | 滚动到底部/右边时触发 | 1.0.0 |
<!--1.水平滚动：scroll-x-->
<scroll-view class='container1' scroll-x> <!--设置view的inline-block之后，还要给父组件设 white-space：nowrap;-->
<view wx:for="{{10}}" class='item1'>{{item}}</view> <!--view是块元素，要水平显示需要设置样式为inline-block-->
</scroll-view>
<!--2.重直滚动：scroll-y-->
<scroll-view class='container2' scroll-y> <!--设置垂直滚动需要给父组件设置固定高度height样式-->
<view wx:for="{{10}}" class='item2'>{{item}}</view>
</scroll-view>
<!--3.其他补充-->
<scroll-view class='container2' scroll-y bindscroll="handleScroll">
<view wx:for="{{10}}" class='item2'>{{item}}</view>
</scroll-view>
Page({ <!--js中的代码-->
handleScroll(){
console.log('正在滚动”,event); <!--可以通过打印的对象.detail看滚动的距离-->
}
})7、组件的共同属性
所有 wxml 标签（组件）都支持的属性称之为共同属性，有如下共同属性：
| 属性名 | 类型 | 描述 | 注解 |
| id | String | 组件的唯一标识 | 整个页面唯一 |
| class | String | 组件的样式类 | 在对应的 wxss 中定义的样式类 |
| style | String | 组件的内联样式 | 可以动态设置的内联样式 |
| hidden | Boolean | 组件是否显示 | 所有组件默认显示 |
| data-* | Any | 自定义属性 | 组件上触发的事件时，会发送给事件处理函数 |
| bind*/catch* | EventHandler | 组件的事件 |
