---------支持作者请转发本文-----------
李宁老师已经在「极客起源」 微信公众号推出《微信小程序开发实战》系列文章，包括了小程序开发的所有核心技术，读者可以在公众号中输入138271，通过历史文章查看。
-----------正文-----------
button组件是最常用的表达组件，用于响应点击动作。该组件有如下几个属性。
size：String类型，默认值是default，除了default，还可以设置为 mini
type：String类型，默认值是default，设置按钮的样式类型，可设置的值包括 primary, default, warn
plain：Boolean类型，默认值是false，设置按钮是否镂空，背景色透明
disabled：Boolean类型，默认值是false，设置按钮是否禁用
loading：Boolean类型，默认值是false，设置按钮标题前是否带显示loading 图标
form-type ：String类型，没有默认值，可以设置的值包括submit和 reset，用于 form组件，点击分别会触发 submit/reset 事件，该属性会在介绍form组件时详细讲解
hover-class：String类型，默认值是button-hover， 指定按钮按下去的样式名称。当 hover-class="none" 时，没有点击态效果
button-hover 的设置为
{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
下面的布局代码详细描述了上述大多数属性的用法（除了form-type外）。在这段布局文件中，放置了6个button组件，其中前三个演示了3种按钮类型：default、primary和warn。并通过defaultSize、loading、plain和disabled变量分别对size、loading、plain和disabled属性进行控制。第一个按钮点击响应了default方法，用来设置按钮的size属性（在default和mini之间切换）。
点击后三个按钮分别响应setDisabled、setPlain和setLoading方法，分别设置前三个按钮的disabled、plain和loading属性。第4个按钮设置了hover-class属性，用来指定按钮按下时的样式名称。
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="default"> default</button><button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" > primary</button><button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}"> warn</button><!-- 通过hover样式改变了第4个按钮按下的效果 --><button hover-class="hover" bindtap="setDisabled">点击设置以上按钮disabled属性</button><button bindtap="setPlain">点击设置以上按钮plain属性</button><button bindtap="setLoading">点击设置以上按钮loading属性</button>
其中hover样式的代码如下：
.hover{ background-color: #F00; opacity: 0.3; font-size: 30px;}
布局的效果如图1所示。
图1 按钮演示效果
当点击default按钮后，会设置size属性值为mini，效果如图2所示。
图2 按钮size设为mini的效果
图3是将前3个按钮禁用的效果。
图3 将按钮禁用的效果
图4是将按钮设为镂空的效果。
图4 将按钮设为镂空的效果
图5是在按钮标题文本前加loading动画的效果。
图5 按钮标题文本前加loading动画的效果
下面是完整的JavaScript实现代码。
var pageObject = { 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 }) } , default:function(e) { this.setData( { defaultSize:this.data['defaultSize']=='default' ? 'mini' : 'default' } ) }} Page(pageObject)
往期回顾：
微信小程序开发实战（1）：容器组件
微信小程序开发实战（2）：添加广告轮询图
微信小程序开发实战（3）：条件渲染
微信小程序开发实战（4）：列表渲染
微信小程序开发实战（5）：组件复用利器-模板
微信小程序开发实战（6）：基础组件（text、icon和progress）
对本文感兴趣，可以加李宁老师微信公众号（unitymarvel）：
关注 极客起源 公众号，获得更多免费技术视频和文章。