# 微信小程序--组件 目录结构 [toc] --- ## 组件导读 <table> <tr> <td>分组</td> <td>组件名</td> <td>描述</td> </tr> <tr> <td rowspan="8">视图容器</td> <td>movable-view</td> <td>可移动的视图容器，在页面中可以拖拽滑动</td> </tr> <tr> <td>movable-area</td> <td>movable-view的可移动区域</td> </tr> <tr> <td>cover-image</td> <td>覆盖在原生组件之上的图片视图</td> </tr> <tr> <td>cover-view</td> <td>覆盖在原生组件之上的文本视图</td> </tr> <tr> <td>scroll-view</td> <td>可滚动视图区域</td> </tr> <tr> <td>swiper</td> <td>滑块视图容器</td> </tr> <tr> <td>swiper-item</td> <td>仅可放置在swiper组件中，宽高自动设置为100%</td> </tr> <tr> <td>view</td> <td>视图容器</td> </tr> <tr> <td rowspan="4">基础容器</td> <td>icon</td> <td>图标</td> </tr> <tr> <td>progress</td> <td>进度条</td> </tr> <tr> <td>rich-text</td> <td>富文本</td> </tr> <tr> <td>text</td> <td>文本</td> </tr> <tr> <td rowspan="15">表单组件</td> <td>button</td> <td>按钮</td> </tr> <tr> <td>checkbox-group</td> <td>多选框组</td> </tr> <tr> <td>checkbox</td> <td>多选框</td> </tr> <tr> <td>editor</td> <td>富文本编辑器，可以对图片、文字进行编辑</td> </tr> <tr> <td>form</td> <td>表单</td> </tr> <tr> <td>input</td> <td>输入框</td> </tr> <tr> <td>label</td> <td>用来改进表单组件的可用性</td> </tr> <tr> <td>picker</td> <td>从底部弹起的滚动选择器</td> </tr> <tr> <td>picker-view</td> <td>嵌入页面的滚动选择器</td> </tr> <tr> <td>picker-view-column</td> <td>滚动选择器子项。仅可放置于picker-view中</td> </tr> <tr> <td>radio-group</td> <td>单项选择器</td> </tr> <tr> <td>radio</td> <td>单选选择</td> </tr> <tr> <td>slider</td> <td>滑动选择器</td> </tr> <tr> <td>switch</td> <td>开关选择器</td> </tr> <tr> <td>textarea</td> <td>多行输入框</td> </tr> <tr> <td rowspan="2">导航</td> <td>navigator</td> <td>页面链接</td> </tr> <tr> <td>functional-page-navigator</td> <td>仅在插件中有效，用于跳转到插件功能页</td> </tr> <tr> <td rowspan="6">媒体组件</td> <td>image</td> <td>图片</td> </tr> <tr> <td>audio</td> <td>音频</td> </tr> <tr> <td>video</td> <td>视频</td> </tr> <tr> <td>camera</td> <td>系统相机</td> </tr> <tr> <td>live-player</td> <td>实时音视频播放</td> </tr> <tr> <td>live-pusher</td> <td>实时音视频录制</td> </tr> <tr> <td>地图</td> <td>map</td> <td>地图</td> </tr> <tr> <td>画布</td> <td>canvas</td> <td>画布</td> </tr> <tr> <td rowspan="4">开放能力</td> <td>ad</td> <td>Banner 广告</td> </tr> <tr> <td>official-account</td> <td>公众号关注组件</td> </tr> <tr> <td>open-data</td> <td>用于展示微信开放的数据</td> </tr> <tr> <td>web-view</td> <td>承载网页的容器</td> </tr> </table> --- ## 微信小程序--组件 > 组件写在 `wxml` 文件中 --- ### 一、视图容器 #### 1、`view` 视图容器 * 可以把view 当成html里的div标签 **属性**|**类型**|**必填**|**描述** ---|---|---|--- hover-class|string|否|指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 hover-stop-propagation|boolean|否|指定是否阻止本节点的祖先节点出现点击态 hover-start-time|number|否|按住后多久出现点击态，单位毫秒 hover-stay-time|number|否|手指松开后点击态保留时间，单位毫秒 > wxml示例： ```html <view hover-class="a">我是欧阳克</view> <view hover-class="a">我是欧阳锋 <view hover-class="a" hover-stop-propagation>我是欧阳克</view> </view> <view hover-class="a" hover-stop-propagation hover-start-time="1000" hover-stay-time="5000">我是欧阳克</view> ``` > wxss示例： ```php .a{ color:red; } ``` --- ### 二、基础内容 #### 1、 `icon` 图标 **属性**|**类型**|**必填**|**描述** ---|---|---|--- type|boolean|是|icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear size|boolean|否|icon的大小 color|number|否|icon的颜色，同css的color ```html <icon type="success" /> <icon type="success_no_circle" /> <icon type="info" /> <icon type="warn" /> <icon type="waiting" /> <icon type="cancel" /> <icon type="download" /> <icon type="search" /> <icon type="clear" /> <icon type="success" size="100rpx"/> <icon type="success" color="orange"/> ``` #### 2、 `progress` 进度条 **属性**|**类型**|**必填**|**描述** ---|---|---|--- percent|number|否|百分比0~100 show-info|boolean|否|在进度条右侧显示百分比 border-radius|number/string|否|圆角大小 font-size|number/string|否|右侧百分比字体大小 stroke-width|number/string|否|进度条线的宽度 color|string|否|进度条颜色（请使用activeColor） activeColor|string|否|已选择的进度条的颜色 backgroundColor|string|否|未选择的进度条的颜色 active|boolean|否|进度条从左往右的动画 active-mode|string|否|backwards: 动画从头播；forwards：动画从上次结束点接着播 bindactiveend|eventhandle|否|动画完成事件 ```html <progress percent="5" /> <progress percent="10" show-info /> <progress percent="15" show-info border-radius="10" /> <progress percent="20" show-info border-radius="10" font-size="60rpx;" /> <progress percent="25" show-info border-radius="10" font-size="60rpx;" stroke-width="20" /> <progress percent="30" color="red" /> <progress percent="35" activeColor="pink" /> <progress percent="40" activeColor="pink" backgroundColor="green" /> <progress percent="45" activeColor="pink" backgroundColor="green" /> <progress percent="50" active /> <progress percent="55" active active-mode="backwards" /> <progress percent="60" active active-mode="backwards" bindactiveend="a"/> ``` #### 3、`text` 文本 **属性**|**类型**|**默认值**|**必填**|**描述** ---|---|---|---|--- selectable|boolean|false|否|文本是否可选 space|string||否|显示连续空格 decode|boolean|false|否|是否解码 > space 的合法值 **属性**|**描述** ---|--- ensp|中文字符空格一半大小 emsp|中文字符空格大小 nbsp|根据字体设置的空格大小 ```html <text>欧阳克，是金庸武侠小说《射雕英雄传》里的人物，面目俊雅，英气逼人。生性好色，拥有众多姬妾，受完颜洪烈聘请来盗取《武穆遗书》，曾受到江南七怪、洪七公等正派的攻击。后来在荒岛因要杀害洪七公而被黄蓉使计引开用大岩石压断双腿 ，后因在牛家村曲家酒馆调戏穆念慈，被杨康发现愤怒之下用铁枪头所杀。</text> <text selectable="true" space="nbsp" decode="true">欧阳克，是金庸武侠小说《射雕英雄传》里的人物， 面目俊雅，英气逼人。生性好色，拥有众多姬妾，受完颜洪烈聘请来盗取《武穆遗书》， 曾受到江南七怪、洪七公等正派的攻击。后来在荒岛因要杀害洪七公而被黄蓉使计引开用大岩石压断双腿 ，后因在牛家村曲家酒馆调戏穆念慈，被杨康发现愤怒之下用铁枪头所杀。</text> ``` --- ### 三、表单组件 #### 1、`button` 按钮 **属性**|**类型**|**必填**|**描述** ---|---|---|--- size|string|否|按钮的大小 type|string|否|按钮的样式类型 plain|boolean|否|按钮是否镂空，背景色透明 disabled|boolean|否|是否禁用 loading|boolean|否|名称前是否带 loading 图标 > size 的合法值 **属性**|**描述** ---|--- default|默认大小 mini|小尺寸 > type 的合法值 **属性**|**描述** ---|--- default|白色 primary|绿色 warn|红色 ```html <button size="default">默认尺寸</button> <button size="mini">小尺寸</button> <button type="default">默认白色</button> <button type="warn">红色</button> <button type="primary">绿色</button> <button type="primary" plain="true">镂空按钮</button> <button type="primary" disabled="true">禁用按钮</button> <button type="primary" loading="true">带等待图标</button> ``` #### 2、`checkbox-group` 多选框组 > 多项选择器，内部由多个checkbox组成，示例和checkbox写在一起 #### 3、`checkbox` 多选框 **属性**|**类型**|**必填**|**描述** ---|---|---|--- value|string|否|选择框的值 disabled|boolean|否|是否禁用 checked|boolean|否|当前是否选中，可用来设置默认选中 color|string|否|checkbox的颜色，同css的color ```html <checkbox-group> <checkbox value="1" checked />欧阳克 <checkbox value="2" color="red" />黄蓉 <checkbox value="3" disabled />郭靖 </checkbox-group> ``` #### 4、`input` 输入框 **属性**|**类型**|**必填**|**描述** ---|---|---|--- value|string|是|输入框的初始内容 type|string|否|input 的类型 password|boolean|否|是否是密码类型 placeholder|string|是|输入框为空时占位符 placeholder-style|string|是|指定 placeholder 的样式 placeholder-class|string|否|指定 placeholder 的样式类 disabled|string|否|是否禁用 maxlength|number|否|最大输入长度，设置为 -1 的时候不限制最大长度 confirm-type|string|否|设置键盘右下角按钮的文字，仅在type='text'时生效 > type 的合法值 **属性**|**描述** ---|--- text|文本输入键盘 number|数字输入键盘 idcard|身份证输入键盘 digit|带小数点的数字键盘 > confirm-type 的合法值 **属性**|**描述** ---|--- send|右下角按钮为“发送” search|右下角按钮为“搜索” next|右下角按钮为“下一个” go|右下角按钮为“前往” done|右下角按钮为“完成” ```html // 在手机上，输入框只能弹出对应的输入法 <input value="这是一个输入框"/> <input value="这是一个数字输入框" type="number"/> <input value="这是一个身份证输入框" type="idcard"/> <input value="这是一个带小数的数字输入框" type="digit"/> <input value="这是一个带小数的数字输入框" password="true"/> <input placeholder="这是一个带提示的输入框" placeholder-style="color:red"/> <input value="这是一个禁用的输入框" disabled/> <input value="这是一个只能输入10个字的输入框" maxlength="10"/> <input value="这是一个搜索输入框" confirm-type="search"/> ``` #### 5、`picker` 从底部弹起的滚动选择器 **属性**|**类型**|**必填**|**描述** ---|---|---|--- mode|string|否|选择器类型 disabled|boolean|否|是否禁用 > mode 的合法值 **属性**|**描述** ---|--- selector|普通选择器 multiSelector|多列选择器 time|时间选择器 date|日期选择器 region|省市区选择器 ##### selector 普通选择器 **属性**|**类型**|**描述** ---|---|--- range|string|mode 为 selector 或 multiSelector 时，range 有效 range-key|boolean|选择器显示内容 value|boolean|表示选择了 range 中的第几个（下标从 0 开始） ```html <picker value="1" range="{{['欧阳克','黄蓉','郭靖']}}"> <view>请选择：</view> </picker> ``` ##### multiSelector 多列选择器 ```html <picker mode="multiSelector" value="1" range="{{[['欧阳克','黄蓉','郭靖'],['帅','美','傻'],['一级武功','二级武功','残废']]}}"> <view>请选择：</view> </picker> ``` ##### time 时间选择器 **属性**|**类型**|**描述** ---|---|--- value|string|表示选中的时间，格式为"hh:mm" start|string|表示有效时间范围的开始，字符串格式为"hh:mm" end|string|表示有效时间范围的结束，字符串格式为"hh:mm" ```html <picker mode="time" value="10" start="10:00" end="15:00"> <view>请选择：</view> </picker> ``` ##### date 日期选择器 **属性**|**类型**|**描述** ---|---|--- value|string|表示选中的日期，格式为"YYYY-MM-DD" start|string|表示有效日期范围的开始，字符串格式为"YYYY-MM-DD" end|string|表示有效日期范围的结束，字符串格式为"YYYY-MM-DD" fields|string|有效值 year,month,day 表示选择器的粒度 ```html <picker mode="date" value="10" start="2018-10-10" end="2019-10-10" fields="day"> <view>请选择：</view> </picker> ``` ##### region 省市区选择器 **属性**|**类型**|**描述** ---|---|--- value|array|表示选中的省市区，默认选中每一列的第一个值 ```html <picker mode="region" value="{{['广东省', '广州市', '海珠区']}}"> <view>请选择：</view> </picker> ``` --- #### 6、`picker-view` 嵌入页面的滚动选择器 **属性**|**类型**|**必填**|**描述** ---|---|---|--- value|Array|否|选择器类型 indicator-style|string|否|设置选择器中间选中框的样式 indicator-class|string|否|设置选择器中间选中框的类名 ```html <picker-view value="{{[1,1,1]}}" indicator-style="height: 50px;" style="width: 100%; height: 300px;"> <picker-view-column> <view style="line-height: 50px">欧阳克</view> <view style="line-height: 50px">黄蓉</view> <view style="line-height: 50px">郭靖</view> <view style="line-height: 50px">杨康</view> </picker-view-column> <picker-view-column> <view style="line-height: 50px">帅</view> <view style="line-height: 50px">美</view> <view style="line-height: 50px">傻</view> <view style="line-height: 50px">丑</view> </picker-view-column> <picker-view-column> <view style="line-height: 50px">1</view> <view style="line-height: 50px">2</view> <view style="line-height: 50px">3</view> <view style="line-height: 50px">4</view> </picker-view-column> </picker-view> ``` #### 7、`radio-group` 单项选择器组 > 单项选择器组，内部由多个radio组成。示例和radio写在一起 #### 8、`radio` 单项选择器 **属性**|**类型**|**必填**|**描述** ---|---|---|--- value|string|否|选择器的值 checked|boolean|否|当前是否选中 disabled|boolean|否|是否禁用 color|string|否|radio的颜色，同css的color ```html <radio-group> <radio value="1" checked="true" />欧阳克 <radio value="2" color="red" />黄蓉 <radio value="3" />郭靖 <radio value="4" />杨康 </radio-group> ``` #### 9、`slider` 滑动选择器 **属性**|**类型**|**必填**|**描述** ---|---|---|--- min|number|否|最小值 max|number|否|最大值 step|number|否|步长，取值必须大于 0，并且可被(max - min)整除 disabled|boolean|否|是否禁用 value|number|否|当前取值 activeColor|color|否|已选择的颜色 backgroundColor|color|否|背景条的颜色 block-size|number|否|滑块的大小，取值范围为 12 - 28 block-color|color|否|滑块的颜色 show-value|boolean|否|是否显示当前 value ```html <slider min="10" max="30" show-value="true" /> <slider step="10" show-value="true" /> <slider step="10" disabled="true" show-value="true" /> <slider step="10" value="30" show-value="true" /> <slider step="10" activeColor="red" show-value="true" /> <slider step="10" activeColor="red" backgroundColor="green" show-value="true" /> <slider step="10" block-size="20" show-value="true" /> <slider step="10" block-size="12" block-color="blue" show-value="true" /> <slider step="10" block-size="14" show-value="true" /> ``` #### 10、`switch` 开关选择器 **属性**|**类型**|**必填**|**描述** ---|---|---|--- checked|boolean|否|是否选中 disabled|boolean|否|是否禁用 type|string|否|样式，有效值：switch, checkbox color|string|否|switch 的颜色，同 css 的 color ```html <switch checked />欧阳克 <switch disabled />黄蓉 <switch type="checkbox" />郭靖 <switch color="red" />杨康 ``` #### 11、`textarea` 多行输入框 **属性**|**类型**|**必填**|**描述** ---|---|---|--- value|string|否|输入框的内容 placeholder|string|否|输入框为空时占位符 placeholder-style|string|否|指定 placeholder 的样式，目前仅支持color,font-size和font-weight placeholder-class|string|否|指定 placeholder 的样式类 disabled|boolean|否|是否禁用 maxlength|number|否|最大输入长度，设置为 -1 的时候不限制最大长度 auto-height|boolean|否|是否自动增高，设置auto-height时，style.height不生效 ```html <textarea value="这是一个输入框" /> <textarea placeholder="红色字体" placeholder-style="color:red" /> <textarea disabled placeholder="禁用的输入框" /> <textarea maxlength="3" placeholder="只能输入3个字" /> <textarea auto-height="true" placeholder="自动增高的输入框" /> ``` --- ### 四、媒体组件 #### 1、`image` 图片 **属性**|**类型**|**必填**|**描述** ---|---|---|--- src|string|否|图片资源地址 mode|string|否|图片裁剪、缩放的模式 lazy-load|boolean|否|图片懒加载，在即将进入一定范围（上下三屏）时才开始加载 show-menu-by-longpress|boolean|否|开启长按图片显示识别小程序码菜单 > mode 的合法值 **属性**|**描述** ---|--- scaleToFill|缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 aspectFit|缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来 aspectFill|缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取 widthFix|缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 top|裁剪模式，不缩放图片，只显示图片的顶部区域 bottom|裁剪模式，不缩放图片，只显示图片的底部区域 center|裁剪模式，不缩放图片，只显示图片的中间区域 left|裁剪模式，不缩放图片，只显示图片的左边区域 right|裁剪模式，不缩放图片，只显示图片的右边区域 top left|裁剪模式，不缩放图片，只显示图片的左上边区域 top right|裁剪模式，不缩放图片，只显示图片的右上边区域 bottom left|裁剪模式，不缩放图片，只显示图片的左下边区域 bottom right|裁剪模式，不缩放图片，只显示图片的右下边区域 ```html <image style="width: 200px; height: 200px;" mode="scaleToFill" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image> <image style="width: 200px; height: 200px;" mode="aspectFit" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image> <image style="width: 200px; height: 200px;" mode="aspectFill" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image> <image style="width: 200px; height: 200px;" mode="widthFix" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image> <image style="width: 200px; height: 200px;" mode="top" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image> <image style="width: 200px; height: 200px;" mode="bottom" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image> <image style="width: 200px; height: 200px;" mode="center" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image> <image style="width: 200px; height: 200px;" mode="left" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image> <image style="width: 200px; height: 200px;" mode="right" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image> <image style="width: 200px; height: 200px;" mode="top left" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image> <image style="width: 200px; height: 200px;" mode="top right" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image> <image style="width: 200px; height: 200px;" mode="bottom left" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image> <image style="width: 200px; height: 200px;" mode="bottom right" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image> ``` --- ### 五、导航 #### 1、`navigator` 页面链接 **属性**|**类型**|**必填**|**描述** ---|---|---|--- url|string|否|当前小程序内的跳转链接 open-type|string|否|跳转方式 delta|number|否|当 open-type 为 'navigateBack' 时有效，表示回退的层数，最多10层 hover-class|string|否|指定点击时的样式类，当hover-class="none"时，没有点击态效果 hover-stop-propagation|boolean|否|指定是否阻止本节点的祖先节点出现点击态 hover-start-time|number|否|按住后多久出现点击态，单位毫秒 hover-stay-time|number|否|手指松开后点击态保留时间，单位毫秒 > open-type 合法值 **属性**|**描述** ---|--- navigate|保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面 redirect|关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面 switchTab|跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 reLaunch|关闭所有页面，打开到应用内的某个页面 navigateBack|关闭当前页面，返回上一页面或多级页面 ```html <navigator url="2?title=navigate" hover-class="a" hover-stop-propagation="true" hover-start-time="5000" hover-stay-time="5000">跳转到新页面</navigator> <navigator url="3" open-type="redirect">跳转到新页面</navigator> <navigator url="1" open-type="switchTab">跳转到新页面</navigator> <navigator url="4" open-type="reLaunch">跳转到新页面</navigator> <navigator open-type="navigateBack" navigateBack="10">跳转到新页面</navigator> ```