>[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)獲取用戶信息，開發者每次通過該接口獲取用戶個人信息均需用戶確認**