>[success] # button -- 按钮 1. **微信组件的[button](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)** 和 **h5的button** 不同作为块级元素出现独占一行 2. 当设置 `size `属性时候才作为行内块元素 | 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 | | --- | --- | --- | --- | --- | --- | | size | string | default | 否 | 按钮的大小 | [1.0.0](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | type | string | default | 否 | 按钮的样式类型 | [1.0.0](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | plain | boolean | false | 否 | 按钮是否镂空，背景色透明 | [1.0.0](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | disabled | boolean | false | 否 | 是否禁用 | [1.0.0](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | loading | boolean | false | 否 | 名称前是否带 loading 图标 | [1.0.0](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | |hover-class |string| button-hover| 否 |指定按钮按下去的样式类。当 `hover-class="none"` 时，没有点击态效果| 1.0.0| |hover-stop-propagation| boolean| false |否 |指定是否阻止本节点的祖先节点出现点击态 |1.5.0| |hover-start-time |number |20 |否 |按住后多久出现点击态，单位毫秒| 1.0.0| |hover-stay-time |number |70 |否 |手指松开后点击态保留时间，单位毫秒 |1.0.0| >[info] ## 常见样式设置  * index.wxml ~~~html <button>按钮</button> <!-- 设置type 按钮的背景色 --> <button type="default">按钮（白色 绿底）</button> <button type="primary">按钮（绿色 灰底）</button> <button type="warn">按钮（红色 灰底）</button> <!-- 按钮尺寸 此时 是行内块元素 --> <button size="mini">小尺寸</button> <!-- plain 带边框 --> <button size="mini" plain>小尺寸</button> <!-- 禁用 --> <button size="mini" disabled>小尺寸</button> <!-- loading 加载 通过设置class 改变按钮颜色--> <button size="mini" loading class="btn">小尺寸</button> <!-- 按钮点击后呈现效果 --> <button size="mini" hover-class="btn">hover效果</button> ~~~ * index.wxss ~~~ .btn { background-color: orange; color: #fff; } ~~~ >[info] ## 事件交互 1. wx 也提供了不同场景下的触发按钮场景，这类场景需要设置`open-type`的类型，对应的类型要去和对应的事件进行触发绑定  * 类型对应事件  ~~~html <button open-type="contact" size="mini" type="primary">打开会话</button> <button open-type="getUserInfo" bindgetuserinfo="getUserInfo1" size="mini" type="primary" > 用户信息 </button> <button size="mini" type="primary" bindtap="getUserInfo">用户信息2</button> <button size="mini" type="primary" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" > 手机号码 </button> ~~~ * index.js ~~~ Page({ getUserInfo() { // 调用API, 获取用户的信息 // 1.早期小程序的API, 基本都是不支持Promise风格 // 2.后期小程序的API, 基本都开发支持Promise风格 wx.getUserProfile({ desc: 'desc', // success: (res) => { // console.log(res); // } }) .then(res => { console.log(res); }) }, getUserInfo1(e){ console.log(e); }, getPhoneNumber(event) { console.log(event); }, }) ~~~ 2. 要说明情况 **[不推荐使用](https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801) open-type="getUserInfo"获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息** 3. **推荐使用[wx.getUserProfile](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserInfo.html)获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认**