微信小程序开发图解案例教程课件 第4章 用微信小程序组件构建UI界面

第4章用微信小程序组件构建UI界面微信小程序框架里提供了很多UI组件，UI组件是指可以被调用的预定义的UI元素。这些UI组件就像我们小时候玩的积木可以用来搭建各种建筑一样，可以用来构建UI。UI组件的用法与积木的用法类似。每个组件都有不同的用处，比如视图容器组件用于包裹页面内容、基础内容组件用来呈现页面内容、表单组件用来丰富页面效果、导航组件用来链接页面、媒体组件用来播放视频等。可以调用这些组件来完成页面的布局和页面的渲染。本章导读Thechapter’sintroduction目录导航4.1视图容器组件4.3表单组件4.5媒体组件4.2基础内容组件4.4导航组件4.6沙场大练兵：表单登录注册微信小程序4.7小结4.1.1

view视图容器view视图容器是WXML界面布局的基础组件，它的使用和HTML里的DIV功能类似，主要用于界面的布局。view视图容器也有自己的属性，如下表所示。view的属性属性类型默认值说明hover-stop-propagationbooleanFalse指定是否阻止本节点的祖先节点出现点击态hover-classstringnone指定按下去的样式类。当hover-class="none"时，没有点击态效果hover-start-timenumber50按住后多久出现点击态。单位为mshover-stay-timenumber400手指松开后点击态保留的时间。单位为ms在WXML文件里使用view布局可渲染出界面内容，效果如右图所示。具体代码如下。4.1.1

view视图容器<viewclass="section"><viewclass="section__title">水平方向布局：</view><viewclass="flex-wrp"style="display:flex;flex-direction:row;"><viewclass="flex-itembc_green"style="width:100px;height:100px;background-color:green;color:#ffffff;text-align:center;line-height:100px;">1</view><viewclass="flex-itembc_red"style="width:100px;height:100px;background-color:red;color:#ffffff;text-align:center;line-height:100px;">2</view><viewclass="flex-itembc_blue"style="width:100px;height:100px;background-color:blue;color:#ffffff;text-align:center;line-height:100px;">3</view></view></view><viewclass="section"><viewclass="section__title">垂直方向布局：</view><viewclass="flex-wrp"style="display:flex;height:300px;flex-direction:column;"><viewclass="flex-itembc_green"style="width:100px;height:100px;background-color:green;color:#ffffff;text-align:center;line-height:100px;">1</view><viewclass="flex-itembc_red"style="width:100px;height:100px;background-color:red;color:#ffffff;text-align:center;line-height:100px;">2</view><viewclass="flex-itembc_blue"style="width:100px;height:100px;background-color:blue;color:#ffffff;text-align:center;line-height:100px;">3</view></view></view>4.1.2

scroll-view可滚动视图区域表4.2

scroll-view的属性属性类型默认值说明scroll-xbooleanfalse允许横向滚动scroll-ybooleanfalse允许纵向滚动upper-thresholdnumber50距顶部/左边多远时（单位为px），触发scrolltoupper事件lower-thresholdnumber50距底部/右边多远时（单位为px），触发scrolltolower事件scroll-topnumber

设置竖向滚动条位置scroll-leftnumber

设置横向滚动条位置scroll-into-viewstring

值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部scroll-into-view-offsetnumber0跳转到scroll-into-view目标节点时的额外偏移。skyline自3.1.0版本开始支持，webview自3.6.0版本开始支持scroll-with-animatioboolean

在设置滚动条位置时使用动画过渡enable-back-to-topbooleanfalseiOS系统点击顶部状态栏、安卓系统双击标题栏时，滚动条返回顶部。只支持竖向enable-flexbooleanfalse启用flexbox布局。开启后，如果当前节点声明了display：flex就会成为flexcontainer，并作用于其孩子节点scroll-anchoringbooleanfalse是否开启scrollanchoring特性，即控制滚动位置不随内容变化而抖动。仅在iOS系统下生效，安卓系统下可参考CSS的overflow-anchor属性4.1.2

scroll-view可滚动视图区域续表属性类型默认值说明enable-passivebooleanfalse是否开启passive特性，开启后能优化一定的滚动性能refresher-enabledbooleanfalse开启自定义下拉刷新refresher-thresholdnumber45设置自定义下拉刷新阈值refresher-default-stylestringblack设置自定义下拉刷新默认样式，支持设置为black、white、none。none表示不使用默认样式refresher-backgroundstring#FFF设置自定义下拉刷新区域背景颜色refresher-triggeredbooleanfalse设置当前下拉刷新状态，true表示下拉刷新已经被触发，false表示下拉刷新未被触发enhancedbooleanfalse是否开启scroll-view增强特性，开启后可通过ScrollViewContext操作scroll-viewbouncesbooleantrue是否开启iOS中的scroll-view边界弹性控制（同时开启enhanced属性后生效）show-scrollbarbooleantrue是否开启滚动条显隐控制（同时开启enhanced属性后生效）paging-enabledbooleanfalse是否开启分页滑动效果（同时开启enhanced属性后生效）4.1.2

scroll-view可滚动视图区域续表属性类型默认值说明fast-decelerationbooleanfalse是否滑动减速速率控制，仅在iOS中生效（同时开启enhanced属性后生效）bindscrolltouppereventhandle

滚动到顶部/左边会触发scrolltoupper事件bindscrolltolowereventhandle

滚动到底部/右边会触发scrolltolower事件bindscrolleventhandle

滚动时触发。event.detail={scrollLeft,scrollTop,scrollHeight,scrollWidth,deltaX,deltaY}bindrefresherpullingeventhandle

自定义下拉刷新控件被下拉bindrefresherrefresheventhandle

自定义下拉刷新控件被触发bindrefresherrestoreeventhandle

自定义下拉刷新控件被复位bindrefresheraborteventhandle

自定义下拉刷新控件被中止binddragstarteventhandle滑动开始事件（同时开启enhanced属性后生效）。detail{scrollTop,scrollLeft}binddraggingeventhandle滑动事件（同时开启enhanced属性后生效）。detail{scrollTop,scrollLeft}binddragendeventhandle滑动结束事件（同时开启enhanced属性后生效）。detail{scrollTop,scrollLeft,velocity}4.1.2

scroll-view可滚动视图区域1.纵向滚动<viewclass="section"><viewclass="section__title">scroll-view纵向滚动</view><scroll-viewscroll-y="true"style="height:200px;"bindscroll-toupper="upper"bindscrolltolower="lower"bindscroll="scroll"

scroll-into-view="{{toView}}"scroll-top="{{scrollTop}}"><viewid="green"style="width:100%;height:100px;background-color:green;"></view><viewid="red"style="width:100%;height:100px;background-color:red;"></view><viewid="yellow"style="width:100%;height:100px;background-color:yellow;"></view><viewid="blue"style="width:100%;height:100px;background-color:blue;"></view></scroll-view><viewclass="btn-area"><buttontype="default"style="margin:10px;"bindtap="tap">clickmetoscrollintoview</button><buttontype="default"style="margin:10px;"bindtap="tapMove">clickmetoscroll</button></view></view>（1）在WXML文件里使用scroll-view进行布局，设置纵向滚动scroll-y="true"，绑定bindscrolltoupper、bindscroll-tolower、bindscroll、scroll-into-view、scroll-top事件。具体代码如下4.1.2

scroll-view可滚动视图区域varorder=['red','yellow','blue','green','red']Page({data:{toView:'red',scrollTop:100},upper:function(e){console.log(e)},lower:function(e){console.log(e)},scroll:function(e){console.log(e)},tap:function(e){for(vari=0;i<order.length;++i){if(order[i]===this.data.toView){this.setData({toView:order[i+1]})break}}},tapMove:function(e){this.setData({scrollTop:this.data.scrollTop+10})}})（2）在JavaScript里设置颜色的数组，绑定toView和scrollTop数据值，提供bindscrolltoupper、bindscrolltolower、bindscroll、scroll-into-view和scroll-top事件函数。具体代码如下。纵向滚动4.1.2

scroll-view可滚动视图区域2.横向滚动<viewclass="section"><viewclass="section__title">新闻频道横向滚动</view><scroll-viewscroll-x="true"style="width:100%;"><viewstyle="display:flex;flex-direction:row"><viewstyle="margin-right:10px;">推荐</view><viewstyle="margin-right:10px;">视频</view><viewstyle="margin-right:10px;">热点</view><viewstyle="margin-right:10px;">本地</view><viewstyle="margin-right:10px;">社会</view><viewstyle="margin-right:10px;">娱乐</view><viewstyle="margin-right:10px;">科技</view><viewstyle="margin-right:10px;">汽车</view><viewstyle="margin-right:10px;">体育</view><viewstyle="margin-right:10px;">财经</view>可以采用scroll-view来实现这些新闻频道的横向滚动。在WXML文件里使用scroll-view进行布局，设置横向滚动scroll-x="true"。具体代码如下4.1.2

scroll-view可滚动视图区域2.横向滚动<viewstyle="margin-right:10px;">军事</view><viewstyle="margin-right:10px;">国际</view><viewstyle="margin-right:10px;">时尚</view><viewstyle="margin-right:10px;">游戏</view><viewstyle="margin-right:10px;">美文</view></view></scroll-view></view>注意：（1）scroll-into-view的优先级高于scroll-top的优先级。（2）在scroll-view中滚动时会阻止页面回弹，因此在scroll-view中滚动无法触发onPull-DownRefresh。（3）若要使用下拉刷新，请使用页面的滚动，而不是scroll-view，以便通过点击顶部状态栏回到页面顶部。4.1.3

swiper滑块视图容器swiper属性属性类型默认值说明indicator-dotsbooleanfalse是否显示面板指示点indicator-colorcolorrgba(0,0,0,.3)指示点颜色indicator-active-colorcolor#000000当前选中的指示点颜色autoplaybooleanfalse是否自动切换currentnumber0当前所在页面的indexintervalnumber5000自动切换时间间隔durationnumber500滑动动画时长circularbooleanfalse是否采用衔接滑动verticalbooleanfalse滑动方向是否为纵向previous-marginstring"0px"前边距，可用于露出前一项的一小部分，有px和rpx两种单位next-marginstring"0px"后边距，可用于露出后一项的一小部分，有px和rpx两种单位4.1.3

swiper滑块视图容器续表属性类型默认值说明next-marginstring"0px"后边距，可用于露出后一项的一小部分，有px和rpx两种单位snap-to-edgebooleanfalse当<swiper-item>的个数大于等于2，关闭circular并且开启previous-margin或next-margin的时候，可以指定这个边距（露出的前边距/后边距）是否应用到第一个、最后一个元素display-multiple-itemsnumber1同时显示的滑块数量skip-hidden-item-layoutbooleanfalse是否跳过未显示的滑块布局。设为True可优化复杂情况下的滑动性能，但会丢失隐藏状态的滑块的布局信息easing-functionstringdefault指定swiper切换缓动动画类型。Default为默认缓动函数、linear为线性动画、easeInCubic为缓入动画、easeOutCubic为缓出动画、easeInOutCubic为缓入缓出动画bindchangeeventhandle

current改变时会触发change事件。event.detail={current:current}bindtransitioneventhandle

swiper-item的位置发生改变时会触发transition事件。event.detail={dx:dx,dy:dy}bindanimationfinisheventhandle

动画结束时会触发animationfinish事件。event.detail={dx:dx,dy:dy}4.1.3

swiper滑块视图容器1.海报轮播效果海报轮播效果常用来展示商品图片信息或者广告信息，是网站、App或者小程序的常用布局方式之一，如图所示。海报轮播效果1海报轮播效果24.1.3

swiper滑块视图容器<viewclass="haibao"><swiperindicator-dots="{{indicatorDots}}"autoplay="{{autoplay}}"interval="{{interval}}"duration="{{duration}}"><blockwx:for="{{imgUrls}}"><swiper-item><imagesrc="{{item}}"class="silde-image"style="width:100%"></image></swiper-item></block></swiper></view>（1）在WXML文件里，采用swiper滑块视图容器组件进行海报轮播区域的布局。具体代码如下（2）在JS文件里，设置海报轮播的图片，设置是否自动播放、轮播的时长等数据，通过数据绑定的方式渲染到页面上。具体代码如下Page({data:{indicatorDots:true,autoplay:true,interval:5000,duration:1000,imgUrls:["/images/swiper-1.jpg","/images/swiper-2.jpg","/images/swiper-3.jpg"]}})4.1.3

swiper滑块视图容器2.页签切换效果swiper滑块视图容器除了可以用来实现海报轮播效果，还可以实现页签切换效果。页签切换效果常用于多种方式的登录或者多种类别的切换，如图所示。签切换效果4.1.3

swiper滑块视图容器<viewclass="content"><viewclass="loginTitle"><viewclass="{{currentTab==0?'select':'default'}}"data-current="0"bindtap="switchNav">账号密码登录</view><viewclass="{{currentTab==1?'select':'default'}}"data-current="1"bindtap="switchNav">手机快捷登录</view></view><viewclass="hr"></view><swipercurrent="{{currentTab}}"style="height:{{winHeight}}px"><swiper-item><viewstyle="margin-top:10px;border:1pxsolid#cccccc;width:99%;height:200px;">我是用来进行账号密码登录的区域</view></swiper-item><swiper-item><viewstyle="margin-top:10px;border:1pxsolid#cccccc;width:99%;height:200px;">

我是用来进行手机快捷登录的区域

</view></swiper-item></swiper></view>（1）进入WXML文件，进行账号密码登录和手机快捷登录的界面布局设计。具体代码如下4.1.3

swiper滑块视图容器.loginTitle{display:flex;flex-direction:row;width:100%;}.select{font-size:12px;color:red;width:50%;text-align:center;height:45px;line-height:45px;border-bottom:5rpxsolidred;}（2）进入WXSS文件，给页面文件添加样式。具体代码如下.default{font-size:12px;margin:0auto;padding:15px;}.hr{border:1pxsolid#cccccc;opacity:0.2;}4.1.3

swiper滑块视图容器Page({data:{currentTab:0,winWidth:0,winHeight:0},onLoad:function(options){varpage=this;wx.getSystemInfo({success:function(res){console.log(res);page.setData({winWidth:res.windowWidth});page.setData({winHeight:res.windowHeight});}})},switchNav:function(e){varpage=this;if(this.data.currentTab==e.target.dataset.current){returnfalse;}else{page.setData({currentTab:e.target.dataset.current});}}})（3）进入JS文件，提供窗口的宽度、高度、当前面板的索引值，并提供页签切换函数。具体代码如下这样就可以实现在两种登录状态之间自由切换的效果了。页签切换时，页签的标题呈现选中的状态，同时对应的内容也跟着进行切换。4.1.4

movable-view可移动视图容器movable-view的属性属性类型默认值说明directionstringnonemovable-view的移动方向。属性值有all、vertical、horizontal、noneinertiabooleanFalsemovable-view是否带有惯性out-of-boundsbooleanFalse超过可移动区域后，movable-view是否还可以移动xnumber/string

定义x轴方向的偏移。如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画ynumber/string

定义y轴方向的偏移。如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画dampingnumber20阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快frictionnumber2摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值disabledbooleanFalse是否禁用scalebooleanFalse是否支持双指缩放，默认缩放手势生效区域是在movable-view内4.1.4

movable-view可移动视图容器续表属性类型默认值说明scale-minnumber0.5定义缩放倍数最小值scale-maxnumber10定义缩放倍数最大值scale-valuenumber1定义缩放倍数，取值范围为0.5～10animationbooleanTrue是否使用动画bindchangeeventhandle

拖动过程中触发的事件，event.detail={x:x,y:y,source:source}。其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）bindscaleeventhandle

缩放过程中触发的事件。event.detail={scale:scale}htouchmoveeventhandle

初次手指触摸后移动为横向时触发。如果catch此事件，则意味着touchmove事件（手指触摸后移动事件）也被catchvtouchmoveeventhandle

初次手指触摸后移动为纵向触发。如果catch此事件，则意味着touchmove事件（手指触摸后移动事件）也被catch4.1.4

movable-view可移动视图容器下面我们使用movable-view可移动视图容器组件来进行滑动演示，黄色区域代表可以移动的区域，红色方块代表可以移动的组件，如图所示。（1）在WXML文件里使用movable-area和movable-view视图容器组件进行布局。具体代码如下<viewclass="section"><movable-areastyle="height:200px;width:100%;background:yellow;"><movable-viewstyle="height:50px;width:50px;background:red;"x="{{x}}"y="{{y}}"direction="all"></movable-view></movable-area></view>4.1.4

movable-view可移动视图容器（2）在JS文件里，编写移动函数、缩放函数，通过数据绑定的方式将内容渲染到页面上。具体代码如下。Page({data:{x:0,y:0},tap:function(e){this.setData({x:30,y:30});},onChange:function(e){console.log(e.detail)},onScale:function(e){console.log(e.detail)}})4.1.5container页面容器

如果在微信小程序页面内进行复杂的页面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），进行返回操作会直接离开当前页面，不符合关闭当前弹出组件的预期，这时可以使用container页面容器。其具体属性如表所示。属性类型默认值说明showbooleanfalse是否显示（弹窗或子页面）容器组件durationnumber300动画时长，单位为msz-indexnumber100z-index层级overlaybooleantrue是否显示遮罩层positionstringbottom弹出位置，可选值为top、bottom、right和centerroundbooleanfalse是否显示圆角close-on-slide-downbooleanfalse是否在下滑一段距离后关闭overlay-stylestring

自定义遮罩层样式custom-stylestring

自定义弹出层样式bind:beforeentereventhandle

进入前触发bind:entereventhandle

进入中触发bind:afterentereventhandle

进入后触发bind:beforeleaveeventhandle

离开前触发bind:afterleaveeventhandle

离开后触发bind:clickoverlayeventhandle

点击遮罩层时触发4.1.5container页面容器下面我们使用container组件实现在页面内弹出半屏弹窗，如图所示。当前页面弹出半屏弹窗4.1.5container页面容器（1）在WXML文件里使用container组件进行布局。具体代码如下。<viewclass="container"><viewclass="box"><buttonclass="btn"bindtap="popup"data-position="right">右侧弹出</button><buttonclass="btn"bindtap="popup"data-position="bottom">底部弹出</button></view></view><containershow="{{show}}"round="{{round}}"overlay="{{overlay}}"duration="{{duration}}"position="{{position}}"close-on-slide-down="{{false}}"bindbeforeenter="onBeforeEnter"bindenter="onEnter"bindafterenter="onAfterEnter"bindbeforeleave="onBeforeLeave"bindleave="onLeave"bindafterleave="onAfterLeave"bindclickoverlay="onClickOverlay"custom-style="{{customStyle}}"overlay-style="{{overlayStyle}}"><viewclass="detail"><buttontype="primary"bindtap="exit">退出</button></view></container>4.1.5container页面容器（2）在WXSS文件里添加样式。具体代码如下：page{background-color:green;color:#323232;width:100%;height:100%;}.box{margin:012px;}.btn{display:block;width:100%;margin:10px0;background-color:#fff;}.detail{width:100%;height:100%;min-height:300px;display:flex;align-items:center;justify-content:center;}4.1.5container页面容器（3）在JS文件里编写视频播放、暂停函数，并初始化视频播放组件。具体代码如下。Page({data:{show:false,duration:300,position:'right',round:false,overlay:true,customStyle:'',overlayStyle:''},popup(e){constposition=e.currentTarget.dataset.positionletcustomStyle=''if(position=='bottom'){customStyle='height:50%;'}letduration=this.data.durationthis.setData({position,show:true,customStyle,duration})},exit(){this.setData({show:false})}})目录导航4.1视图容器组件4.2基础内容组件4.3表单组件4.5媒体组件4.4导航组件4.6沙场大练兵：表单登录注册微信小程序4.7小结4.2.1

icon组件

微信小程序提供了丰富的icon组件，这些组件可应用于不同的场景。根据图标的类型（type）进行分类，可分为成功、警告、提示、取消和下载等图标，如图所示。icon图标组件有3个属性：icon图标属性属性类型默认值说明typestring

图标的类型，有效值有：success、success_no_circle、info、warn、waiting、cancel、download、search、clearsizenumber23图标的大小，单位默认为px，支持传入单位（rpx/px/rem等）colorcolor

icon的颜色，同CSS的color4.2.1icon组件1.用icon组件绘制不同尺寸的图标效果如下左图所示。<viewclass="group"><icontype="success"size="20"/><icontype="success"size="50"/><icontype="success"size="60"/><icontype="success"size="80"/><icontype="success"size="100"/></view>2.用icon组件绘制不同类型的图标效果如下右图所示。<viewclass="group"><icontype="success"size="45"/><icontype="info"size="45"/><icontype="warn"size="45"/><icontype="waiting"size="45"/><icontype="safe_success"size="45"/><icontype="success_circle"size="45"/><icontype="success_no_circle"size="45"/><icontype="waiting_circle"size="45"/><icontype="circle"size="45"/><icontype="download"size="45"/><icontype="info_circle"size="45"/><icontype="cancel"size="45"/><icontype="search"size="45"/><icontype="clear"size="45"/></view>不同尺寸的图标效果不同类型的图标效果4.2.1icon组件3.用icon组件绘制不同颜色的图标用icon组件绘制不同颜色的图标，具体代码如下。<viewclass="group"><icontype="success"size="45"color="red"/><icontype="success"size="45"color="orange"/><icontype="success"size="45"color="yellow"/><icontype="success"size="45"color="green"/><icontype="success"size="45"color="rgb(0,255,255)"/><icontype="success"size="45"color="blue"/><icontype="success"size="45"color="purple"/></view>不同颜色的图标效果到此，不同尺寸、类型和颜色的图标的绘制介绍完毕。开发者可以根据自己的需求，利用icon组件设计自己的图标。4.2.2text组件text的属性text文本组件支持转义符“\”，比如换行\n、空格\t。<text/>组件内只支持<text/>嵌套，除了文本节点以外的其他节点都无法长按选中。text文本的属性如表所示。属性类型默认值说明user-selectbooleanfalse文本是否可选，该属性会使文本节点显示inline-block内联对象spacestring

显示连续空格，ensp表示中文字符空格一半大小，emsp表示中文字符空格大小，nbsp表示根据字体设置的空格大小decodebooleanfalse是否解码下面我们来看看转义符的使用。具体代码如下<viewclass="btn-area"><viewclass="body-view"><text>我爱北京\t我爱中国</text><text>我爱北京\n我爱中国</text></view></view>4.2.3

progress进度条表3.7

progress进度条属性progress进度条组件是一种提高用户体验度的组件。就像视频播放一样，用户可以通过进度条看到完整视频的长度、当前播放的进度，这样用户能合理地安排自己的时间，提高体验度。微信小程序提供了progress进度条组件，它的属性如表所示。属性类型默认值说明percentnumber

百分比（取值范围0～100）show-infobooleanfalse在进度条右侧显示百分比border-radiusnumber/string0圆角大小font-sizenumber/string16右侧百分比的字体大小stroke-widthnumber6进度条线的宽度，单位为pxcolorstring#09BB07进度条颜色activeColorstring#09BB07已选择的进度条的颜色backgroundColorstring#EBEBEB未选择的进度条的颜色activebooleanfalse进度条从左往右的动画active-modestringbackwardsBackwards：动画从头播放Forwards：动画从上次结束点接着播放durationnumber30进度增加1%所需时间，单位为msbindactiveendeventhandle

动画完成事件4.2.3

progress进度条示例代码如下<progresspercent="20"show-info/><progresspercent="40"stroke-width="12"/><progresspercent="60"color="pink"/><progresspercent="80"active/>进度条效果如下图所示。4.2.4

rich-text组件rich-text富文本属性通过rich-text富文本组件可以在WXML页面文件中显示一些富文本内容，比如显示HTML的一些元素内容。具体属性如表所示。属性类型默认值说明nodesarray/string[]节点列表/HTMLspacestring

显示连续空格，ensp为中文字符空格一半大小、emsp为中文字符空格大小、nbsp为根据字体设置的空格大小user-selectbooleanfalse文本是否可选，该属性会使节点显示为block块级元素1.元素节点：type=node（见下表）元素节点属性类型默认值说明nameString标签名，支持部分受信任的HTML节点attrsOIbject支持部分受信任的属性。支持class和style属性，不支持id属性。遵循Pascal命名法childrenArray子节点列表结构和nodes的一致4.2.4

rich-text组件rich-text的nodes属性默认值为[]，值类型为数组或者HTML字符串，不推荐使用string类型，因为性能会有所下降，推荐使用数组。如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。受信任的HTML节点如下所示。a、abbr、address、article、aside、b、bdi、bdo、dir、big、blockquote、br、caption、center、cite、code、col、colgroup、dd、del、div、dl、dt、em、fieldset、font、footer、h1、h2、h3、h4、h5、h6、header、hr、i、img、ins、label、legend、li、mark、nav、ol、p、pre、q、rt、ruby、s、section、small、span、strong、sub、sup、table、tbody、td、tfoot、th、thead、tr、tt、u、ul示例代码如下<!--以下代码中<h10>我爱你中国</h10>将会删除，h10不受信任--><rich-textnodes="<h10>我爱你中国</h10><h1>我爱你北京</h1>"></rich-text><rich-textnodes="{{nodes}}"bindtap="tap"></rich-text>Page({data:{nodes:[{name:'div',4.2.4

rich-text组件attrs:{class:'div_class',style:'line-height:60px;color:red;'},children:[{type:'text',text:'Hello World!'}]}]},tap(){console.log('tap')}})2.文本节点：type=text（见下表）属性类型默认值说明textString文本，支持entities实体示例代码如下。<rich-textnodes="<h1>我爱你中国</h1>"></rich-text>目录导航4.1视图容器组件4.3表单组件4.2基础内容组件4.5媒体组件4.4导航组件4.6沙场大练兵：表单登录注册微信小程序4.7小结4.3.1button按钮button按钮组件提供了3种类型按钮：基本类型按钮、默认类型按钮和警告类型按钮。同时提供了两种大小的按钮：默认和mini。如右图所示。button按钮组件有很多属性，每个属性有不同的作用，如下表所示。属性类型默认值说明sizestringdefault按钮的大小，有效值为default、minitypestringdefault按钮的样式类型，有效值为基本类型primary、默认类型default、警告类型warnplainbooleanfalse按钮是否镂空，背景色透明disabledbooleanfalse是否禁用loadingbooleanfalse名称前是否带loading图标form-typestring

有效值为submit、reset。用于<form/>组件。点击分别会触发submit/reset事件button按钮属性4.3.1button按钮属性类型默认值说明open-type string否微信开放能力，如下所示。Contact：打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从bindcontact回调中获得具体信息Share：触发用户转发GetPhoneNumber：获取用户手机号。可以从bindgetphonenumber回调中获取到用户信息GetUserInfo：获取用户信息。可以从bindgetuserinfo回调中获取到用户信息launchApp：打开App。可以通过app-parameter属性设定向App传的参数openSetting：打开授权设置页feedback：打开“意见反馈”页面。用户可提交反馈内容并上传日志；开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取反馈内容hover-classstringbutton-hover指定按钮按下去的样式类。当hover-class="none"时，没有点击态效果hover-stop-propagationbooleanfalse指定是否阻止本节点的祖先节点出现点击态hover-start-timenumber20按住后多久出现点击态，单位为ms续表4.3.1button按钮属性类型默认值说明hover-stay-timenumber70手指松开后点击态保留的时间，单位为mslangstringen指定返回用户信息的语言，zh_CN为简体中文、zh_TW为繁体中文、en为英文session-fromstring

会话来源，open-type="contact"时有效send-message-titlestring当前标题会话内消息卡片标题，open-type="contact"时有效send-message-pathstring当前分享路径会话内消息卡片点击跳转小程序路径，open-type="contact"时有效send-message-imgstring截图会话内消息卡片图片，open-type="contact"时有效app-parameterstring

打开App时，向App传递的参数，open-type=launchApp时有效show-message-card booleanfalse是否显示会话内消息卡片。设置此参数为True，用户进入客服会话会在右下角显示“可能要发送的小程序”提示，用户点击后可以快速发送小程序消息。open-type="contact"时有效bindgetuserinfoeventhandle

用户点击该按钮时，会返回获取到的用户信息。回调的detail数据与wx.getUserInfo返回的一致。open-type="getUserInfo"时有效续表4.3.1button按钮属性类型默认值说明bindcontacteventhandle

客服消息回调，open-type="contact"时有效bindgetphonenumbereventhandle

获取用户手机号回调，open-type=getPhonenumber时有效binderroreventhandle

当使用开放能力发生错误时的回调，open-type=launchApp时有效bindopensettingeventhandle

在打开授权设置页后的回调，open-type=openSetting时有效bindlaunchappeventhandle

打开App成功的回调，open-type=launchApp时有效bindchooseavatareventhandle获取用户头像回调，open-type=chooseAvatar时有效续表表单布局具体代码如下：<buttontype="default"size="{{defaultSize}}"loading="{{loading}}"plain="{{plain}}"disabled="{{disabled}}"bindtap="default">default</button><buttontype="primary"size="{{primarySize}}"loading="{{loading}}"plain="{{plain}}"disabled="{{disabled}}"

bindtap="primary">primary</button><buttontype="warn"size="{{warnSize}}"loading="{{loading}}"plain="{{plain}}"disabled="{{disabled}}"bindtap="warn">warn</button><buttonbindtap="setDisabled">点击设置以上按钮disabled属性</button><buttonbindtap="setPlain">点击设置以上按钮plain属性</button><buttonbindtap="setLoading">点击设置以上按钮loading属性</button>4.3.1button按钮业务逻辑处理示例代码如下vartypes=['default','primary','warn']Page({data:{defaultSize:'default',primarySize:'default',warnSize:'default',disabled:false,plain:false,loading:false},setDisabled:function(e){this.setData({disabled:!this.data.disabled})},setPlain:function(e){this.setData({plain:!this.data.plain})},setLoading:function(e){this.setData({loading:!this.data.loading})}})按钮效果如图4.17所示。4.3.2checkbox组件checkbox（多项选择器），也就是我们常说的复选框，它用来进行多项选择。它的属性如下表所示。checkbox属性属性类型默认值说明valuestring

<checkbox/>标识，选中时触发<checkbox-group/>的change事件，并携带<checkbox/>的valuedisabledbooleanfalse是否禁用checkedbooleanfalse当前是否选中。可用来设置默认选中colorcolor

复选框的颜色，同CSS的colorcheckbox-group是用来容纳多个checkbox的容器，它有一个绑定事件bindchange。<checkbox-group/>中的选中项发生改变时触发change事件，可以通过event.detail={value:[选中的checkbox的value的数组]}获取事件的详细信息。4.3.2checkbox组件下面我们来演示一下checkbox多项选择器的使用，以及如何获取选中的value值。（1）在WXML文件里使用checkbox进行界面布局。具体代码如下<checkbox-groupbindchange="checkboxChange"><checkboxvalue="USA"/>美国

<checkboxvalue="CHN"checked="true"/>中国

<checkboxvalue="BRA"/>巴西

<checkboxvalue="JPN"/>日本

<checkboxvalue="ENG"disabled/>英国</checkbox-group>（2）在JS文件里，添加checkboxChange事件函数，获取复选框选中的值，将其输出。具体代码如下Page({checkboxChange:function(e){console.log(e.detail.value)}})复选框效果及其value如图所示。4.3.3radio组件radio是与checkbox“对立”的一个组件，也就是人们常说的单选按钮，用户每次只能选中一个选项，各选项间存在互斥关系。它的属性如下表所示。radio的属性属性类型默认值说明valuestring

<radio/>标识。当该<radio/>选中时，<radio-group/>的change事件会携带<radio/>的valuedisabledbooleanfalse是否禁用checkedbooleanfalse当前是否选中。可用来设置默认选中colorcolor

radio的颜色，同CSS的color<radio-group>是用来容纳多个radio的容器，它有一个绑定事件bindchange。<radio-group>中的选中项发生变化时触发bindchange事件，event.detail={value:选中的radio的value}获取事件的详细信息。4.3.3radio组件下面我们来演示一下radio的使用。（1）在WXML文件里使用radio进行界面布局。具体代码如下<radio-groupclass="radio-group"bindchange="radioChange"><radiovalue="USA"/>美国

<radiovalue="CHN"checked/>中国

<radiovalue="BRA"disabled/>巴西

<radiovalue="JPN"/>日本

<radiovalue="ENG"/>英国</radio-group>（2）在JS文件里，添加radioChange事件函数，获取单项选中的值，将其打印出来。具体代码如下Page({radioChange:function(e){

console.log('radio发生change事件，携带value值为：',e.detail.value)}})单选按钮效果及其value如图所示。4.3.4input组件input组件用来输入单行文本内容，它的属性如下表所示。表4.14

input属性属性类型默认值说明valuestring

输入框的初始内容typestringtextinput的类型，有效值为：text（文本输入键盘）、number（数字输入键盘）、idcard（身份证输入键盘）、digit（带小数点的数字键盘）passwordbooleanfalse是否是密码类型placeholderstring

输入框为空时的占位符placeholder-stylestring

指定placeholder的样式placeholder-classstringinput-placeholder指定placeholder的样式类disabledbooleanfalse是否禁用maxlengthnumber140最大输入长度，设置为-1的时候不限制最大长度cursor-spacingnumber0指定光标与键盘的距离。取input距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离auto-focusbooleanfalse自动聚焦，拉起键盘（即将废弃，请直接使用focus）focusbooleanfalse获取焦点4.3.4input组件续表属性类型默认值说明confirm-typestringdone设置键盘右下角按钮的文字，仅在type='text'时生效。Send指右下角按钮为“发送”、search指右下角按钮为“搜索”、next指右下角按钮为“下一个”、go指右下角按钮为“前往”、done指右下角按钮为“完成”confirm-holdbooleanfalse点击键盘右下角按钮时是否保持键盘不收起cursornumber

指定focus时的光标位置selection-startnumber-1光标起始位置，自动聚集时有效，需与selection-end搭配使用selection-endnumber-1光标结束位置，自动聚集时有效，需与selection-start搭配使用adjust-positionbooleantrue键盘弹起时，是否自动上推页面hold-keyboardbooleanfalsefocus时，点击页面