button：是按鈕元件；可以通過小程式提供的屬性切換按鈕的外觀樣式，也可以通過某些屬性呼叫內建的功能

1.控制按鈕外觀的屬性

--通過type屬性控制按鈕的樣式型別

--通過size屬性控制按鈕的尺寸

--通過plain屬性控制按鈕是否鏤空

--通過disabled屬性控制按鈕是否可點選

--通過loading屬性控制按鈕名稱前是否帶 loading 圖示

<button type="primary">primary</button>
<button type="primary" loading="true">primary+Loading</button
 
>
<button type="primary" disabled="true">primary+Disabled</button>
<button type="default">預設樣式</button>
<button type="default" disabled="true">預設樣式+Disabled</button>
<button type="warn">警告類warn</button>
<button type="warn" disabled="true">警告類warn+Disabled</
 
button>
<button type="primary" plain="true">primary+plain</button>
<button type="primary" disabled="true" plain="true">primary+plain+disabled</button>
<button type="default" plain="true">預設樣式+plain</button>
<button type="default" disabled="true" plain="true">
 
預設樣式+plain+disabled</button>
<button type="primary" size="mini">mini+primary</button>
<button type="default" size="mini">mini+預設樣式</button>
<button type="warn" size="mini">mini+warn</button>

注意：直接設定button標籤的尺寸是不生效的，這個涉及到權重問題，在小程式中通過 button[size='mini']、button:not([size='mini'])設定按鈕的寬高，它的權重是(0,1,1)。css會渲染權重高的選擇器的樣式，所以只需要在wxss樣式表中，設定更高的權重，那麼樣式就會生效

1）.設定!important。設定了!important的選擇器的權重是最高階的

button{

width:700rpx!important;

}

2）.設定行內樣式

<buttontype="primary"style="width:700rpx">primary</button>

3）.為按鈕設定ID，其權重為(1,0,0)

<buttontype="primary"id="btn">primary</button>

#btn{

width:700rpx!important;

}

4）.將button包裹在一個容器元件中，如view，為view設定class名，通過.view .btn修改樣式，其權重(0,2,0)

<viewclass="view"><buttontype="primary"class="btn">primary</button></view>

.view.btn{

width:700rpx;

}

總結：改變小程式按鈕尺寸及預設樣式的方法其實不能，只要選擇器的權重大於小程式內建選擇器的權重，就可以了

2.開放能力

1）contact開啟客服會話,需要在微信小程式的後臺配置

share向微信朋友轉發當前的小程式，不能把小程式分享到朋友圈

2）getPhoneNumber獲取使用者手機號，可以從bindgetphonenumber回撥中獲取到使用者資訊，非企業小程式賬號是沒有許可權去獲取使用者的手機號碼的

---繫結一個事件bindgetphonenumber

---在事件的回撥函式中通過引數來獲取資訊

---獲取到的資訊是加密後的資料

---需要使用者自己搭建小程式的後臺伺服器，在後臺伺服器中解析手機號碼，返回到小程式中就可以看到資訊了

3）getUserInfo獲取使用者資訊，可以從bindgetuserinfo回撥中獲取到使用者資訊

---使用方法類似獲取使用者手機號

---可以直接獲取不存在加密的欄位

---資料包含在detail.userInfo中，可以獲取到使用者頭像、城市、省份、國家、性別(1是男生，2是女生)、語言、暱稱

4）launchApp開啟APP

---需要先在App中通過App的某個連結開啟小程式

---在小程式中再通過這個功能重新開啟App

5）openSetting開啟授權設定頁

---授權頁面中只會出現使用者曾經點選過的許可權

6）feedback開啟小程式內建的“意見反饋”頁面

---只能通過真機除錯開啟

<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>

  // 獲取使用者的手機號碼
  getPhoneNumber(e){
    console.log(e)
  },
  // 獲取使用者個人資訊
  getUserInfo(e){
    console.log(e)
  },