新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

創(chuàng)新互聯(lián)百度小程序教程：button按鈕

button 按鈕
- 屬性說明
  - size 有效值
  - type 有效值
  - form-type 有效值
  - open-type 有效值
- 示例
  - 代碼示例 1：主要按鈕
  - 代碼示例 2：次要按鈕
  - 代碼示例 3：警示按鈕
  - 代碼示例 4：小尺寸按鈕
  - 代碼示例 5：自定義點(diǎn)擊態(tài)
  - 代碼示例 6：綁定開放能力
  - 代碼示例 7：form-type=”submit/reset”
  - 代碼示例 8：hover-stop-propagation 屬性
  - 代碼示例 9：自定義 button 樣式
  - 代碼示例 10：同時(shí)綁定開放能力、普通點(diǎn)擊事件
- Bug & Tip
- 常見問題
  - Q：button 組件的類型為默認(rèn)時(shí)，無法修改按鈕的邊框樣式?

button 按鈕

開發(fā)者工具 button 組件 open-type 不支持設(shè)置 contact ，請(qǐng)到真機(jī)上調(diào)試。
專注于為中小企業(yè)提供成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)江達(dá)免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

解釋：按鈕，設(shè)計(jì)文檔參考按鈕。
Web 態(tài)說明：由于瀏覽器的限制，在 Web 態(tài)內(nèi)不支持獲取聯(lián)系人、打開授權(quán)設(shè)置頁等功能。具體支持情況詳見屬性說明。

屬性說明

屬性名	類型	默認(rèn)值	必填	說明	最低支持版本	Web 態(tài)說明
size	String	default	否	大小	-	-
type	String	default	否	類型	-	-
plain	Boolean	false	否	按鈕是否鏤空，背景色透明	-	-
form-type	String	buttonclick	否	用于組件，點(diǎn)擊分別會(huì)觸發(fā)組件的 submit/reset 事件	-	-
open-type	String		否	百度 App 開放能力，比如分享、獲取用戶信息等等	-	-
hover-class	String	button-hover	否	點(diǎn)擊態(tài)。指定按鈕按下去的樣式類。當(dāng)`hover-class=”none”`時(shí)，沒有點(diǎn)擊態(tài)效果。button-hover 默認(rèn)為`{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}`	-	-
hover-stop-propagation	Boolean	false	否	指定是否阻止本節(jié)點(diǎn)的祖先節(jié)點(diǎn)出現(xiàn)點(diǎn)擊態(tài)	-	-
hover-start-time	Number	20	否	按住后多久出現(xiàn)點(diǎn)擊態(tài)（單位：毫秒）	-	-
hover-stay-time	Number	70	否	手指松開后點(diǎn)擊態(tài)保留時(shí)間（單位：毫秒）	-	-
disabled	Boolean	false	否	是否禁用	-	-
loading	Boolean	false	否	名稱前是否帶有 loading 圖標(biāo)	-	-
bindgetphonenumber	EventHandle		否	獲取用戶手機(jī)號(hào)回調(diào)。和 open-type 搭配使用，使用時(shí)機(jī)：`open-type=”getPhoneNumber”`。具體申請(qǐng)方法請(qǐng)見：獲取用戶手機(jī)號(hào)權(quán)限申請(qǐng)	1.12.14 低版本請(qǐng)做兼容性處理	暫不支持
bindgetuserinfo	EventHandle		否	用戶點(diǎn)擊該按鈕時(shí)，會(huì)返回獲取到的用戶信息，從返回參數(shù)的 detail 中獲取到的值，和 swan.getUserInfo 一樣的。和 open-type 搭配使用，使用時(shí)機(jī)：`open-type=”getUserInfo”`	-	暫不支持
bindopensetting	EventHandle		否	在打開授權(quán)設(shè)置頁后回調(diào)，使用時(shí)機(jī)：`open-type=”openSetting”`	-	暫不支持
bindcontact	EventHandle		否	客服消息回調(diào)，使用時(shí)機(jī)：`open-type=”contact”`。如果需要使用該功能，請(qǐng)發(fā)送郵件至 smartprogram_support@baidu.com 咨詢?cè)敿?xì)情況	-	暫不支持
bindchooseaddress	EventHandle		否	用戶點(diǎn)擊該按鈕時(shí)，調(diào)起用戶編輯收貨地址原生界面，并在編輯完成后返回用戶選擇的地址，從返回參數(shù)的 detail 中獲取，和 swan.chooseAddress 一樣的。和 open-type 搭配使用，使用時(shí)機(jī)：`open-type=”chooseAddress”`	3.160.3 低版本請(qǐng)做兼容性處理	暫不支持
bindchooseinvoicetitle	EventHandle		否	用戶點(diǎn)擊該按鈕時(shí)，選擇用戶的發(fā)票抬頭，和 swan.chooseInvoiceTitle 一樣的。和 open-type 搭配使用，使用時(shí)機(jī)：`open-type=”chooseInvoiceTitle”`	3.160.3 低版本請(qǐng)做兼容性處理	暫不支持
bindlogin	EventHandle		否	登錄回調(diào)，和 open-type 搭配使用，使用時(shí)機(jī)：`open-type=”login”`?？梢酝ㄟ^返回參數(shù)的 detail 判斷是否登錄成功，當(dāng) errMsg 為`‘login:ok’`時(shí)即為成功。如想獲取登錄憑證請(qǐng)示用 swan.getLoginCode	3.230.1 低版本請(qǐng)做兼容性處理	-
contact	EventHandle		否	打開客服會(huì)話，如果用戶在會(huì)話中點(diǎn)擊消息卡片后返回小程序，可以從 bindcontact 回調(diào)中獲得具體信息	-	暫不支持
template-id	String/Array.		否（open-type 為 subscribe 時(shí)必填）	發(fā)送訂閱類模板消息所用的模板庫(kù)標(biāo)題 ID ，可通過 getTemplateLibraryList 獲取當(dāng)參數(shù)類型為 Array 時(shí)，可傳遞 1~3 個(gè)模板庫(kù)標(biāo)題 ID	3.270.1 低版本請(qǐng)做兼容性處理	暫不支持
subscribe-id	String		否（open-type 為 subscribe 時(shí)必填）	發(fā)送訂閱類模板消息時(shí)所使用的唯一標(biāo)識(shí)符，內(nèi)容由開發(fā)者自定義，用來標(biāo)識(shí)訂閱場(chǎng)景注意：同一用戶在同一 subscribe-id 下的多次授權(quán)不累積下發(fā)權(quán)限，只能下發(fā)一條。若要訂閱多條，需要不同 subscribe-id	3.270.1 低版本請(qǐng)做兼容性處理	暫不支持
bindsubmit	EventHandle		否	訂閱消息授權(quán)回調(diào)，和 open-type 搭配使用，使用時(shí)機(jī)：`open-type=”subscribe”`	3.270.1 低版本請(qǐng)做兼容性處理	暫不支持

size 有效值

值	說明
default	默認(rèn)大小
mini	小尺寸

type 有效值

值	說明
primary	藍(lán)色
default	白色
warn	紅色

form-type 有效值

值	說明
buttonclick	普通按鈕點(diǎn)擊
submit	提交表單
reset	重置表單

open-type 有效值

值	說明	Web 態(tài)說明
share	觸發(fā)用戶分享，使用前建議先閱讀 swan.onShareAppMessage	-
getUserInfo	獲取用戶信息，可以從 bindgetuserinfo 回調(diào)中獲取到用戶信息，參考用戶數(shù)據(jù)的簽名驗(yàn)證和加解密對(duì)用戶數(shù)據(jù)進(jìn)行處理	出于安全性考慮，暫不支持
getPhoneNumber	獲取用戶手機(jī)號(hào)，可以從 bindgetphonenumber 回調(diào)中獲取到用戶信息： detail.errMsg 值為`“getPhoneNumber:ok”` 時(shí)代表用戶信息獲取成功； detail.errMsg 值為`“getPhoneNumber:fail auth deny”`時(shí)代表用戶信息獲取失敗。參考用戶數(shù)據(jù)的簽名驗(yàn)證和加解密對(duì)用戶數(shù)據(jù)進(jìn)行處理獲得用戶手機(jī)號(hào)。用戶手機(jī)號(hào)信息解密后數(shù)據(jù)示例：`{“mobile”:”15000000000”}` 1. 非個(gè)人開發(fā)者可申請(qǐng)； 2. 審核通過后，進(jìn)入小程序首頁,在左側(cè)導(dǎo)航欄單擊“設(shè)置 -> 開發(fā)設(shè)置”。下拉頁面，在“獲取用戶手機(jī)號(hào)權(quán)限申請(qǐng)”中單擊“申請(qǐng)開通”	出于安全性考慮，暫不支持
openSetting	打開授權(quán)設(shè)置頁	暫不支持
chooseAddress	選擇用戶收貨地址，可以從 bindchooseaddress 回調(diào)中獲取到用戶選擇的地址信息	出于安全性考慮，暫不支持
chooseInvoiceTitle	選擇用戶發(fā)票抬頭，可以從 bindchooseinvoicetitle 回調(diào)中獲取到用戶選擇發(fā)票抬頭信息	出于安全性考慮，暫不支持
contact	打開客服會(huì)話，如果用戶在會(huì)話中點(diǎn)擊消息卡片后返回小程序，可以從 bindcontact 回調(diào)中獲得具體信息	暫不支持
login	登錄，可以從 bindlogin 回調(diào)中確認(rèn)是否登錄成功	-
subscribe	訂閱類模板消息，需要用戶授權(quán)才可發(fā)送，訂閱消息詳細(xì)說明請(qǐng)參考訂閱消息接入	暫不支持

示例

跳轉(zhuǎn)編輯工具

在開發(fā)者工具中打開

在 WEB IDE 中打開

掃碼體驗(yàn)

代碼示例

請(qǐng)使用百度APP掃碼

代碼示例 1：主要按鈕

SWAN

 
 
 
  
  
  
  
  
   
  
  
   
  
  
   主要按鈕
  
  
   primary
  
  
   
  
  
   
  
  
   主按鈕 normal
  
  
   
  
  
   
  
  
   主按鈕 loading
  
  
   
  
  
   
  
  
   主按鈕 disabled

代碼示例 2：次要按鈕

SWAN

 
 
 
  
  
  
  
  
   
  
  
   
  
  
   次要按鈕
  
  
   default
  
  
   
  
  
   
  
  
   次按鈕 normal
  
  
   
  
  
   
  
  
   次按鈕 loading
  
  
   
  
  
   
  
  
   次按鈕 disabled

代碼示例 3：警示按鈕

SWAN

 
 
 
  
  
  
  
  
   
  
  
   
  
  
   警示按鈕
  
  
   warn
  
  
   
  
  
   
  
  
   警示按鈕 normal
  
  
   
  
  
   
  
  
   警示按鈕 loading
  
  
   
  
  
   
  
  
   警示按鈕 disabled

代碼示例 4：小尺寸按鈕

SWAN

 
 
 
  
  
  
  
  
   
  
  
   
  
  
   小尺寸按鈕
  
  
   size='mini'
  
  
   
  
  
   
  
  
   按鈕 
  
  
   
  
  
   
  
  
   按鈕 
  
  
   
  
  
   
  
  
   按鈕

代碼示例 5：自定義點(diǎn)擊態(tài)

SWAN
JS

 
 
 
  
  
  
  
  
   
  
  
   
  
  
   自定義點(diǎn)擊態(tài)
  
  
   
  
  
   
  
  
   無點(diǎn)擊態(tài)
  
  
   
  
  
   
  
  
   點(diǎn)擊態(tài)延遲出現(xiàn)
  
  
   
  
  
   
  
  
   點(diǎn)擊態(tài)延遲消失

代碼示例 6：綁定開放能力

SWAN
JS

代碼示例 7：form-type=”submit/reset”

SWAN
JS

 
 
 
  
  
  
  
  
   
  
  
   
  
  
   綁定表單操作
  
  
   form-type="submit/reset"
  
  
   
  
  
   
  
  
   
  
  
   提交
  
  
   
  
  
   
  
  
   重置

代碼示例 8：hover-stop-propagation 屬性

SWAN
JS
CSS

 
 
 
  
  
  
  
  
   
  
  
   
  
  
   按鈕父級(jí)同步出現(xiàn)點(diǎn)擊態(tài)
  
  
   hover-stop-propagation
  
  
   
  
  
   
  
  
   點(diǎn)擊卡片空白區(qū)域體驗(yàn)效果

代碼示例 9：自定義 button 樣式

SWAN
JS
CSS

 
 
 
  
  
  
  
  
   
  
  
   
  
  
   自定義 button 樣式
  
  
   
  
  
   
  
  
   {{isFavor ? '已' : '' }}關(guān)注

代碼示例 10：同時(shí)綁定開放能力、普通點(diǎn)擊事件

SWAN
JS

 
 
 
  
  
  
  
  
   
  
  
   
  
  
   同時(shí)綁定開放能力、普通點(diǎn)擊事件

Bug & Tip

Tip：建議頁面中使用 1 個(gè)主要按鈕引導(dǎo)操作。
Tip：按鈕文案可配，文案不可折行顯示，文案前可增加 icon 及局部加載狀態(tài)。
Tip：頁面中可以使用多個(gè)小尺寸按鈕引導(dǎo)操作。
Tip：建議小尺寸按鈕寬度在 364px 到 114px 之間。

常見問題

Q：button 組件的類型為默認(rèn)時(shí)，無法修改按鈕的邊框樣式?

A：為了處理移動(dòng)端的 1px 問題，默認(rèn)類型的 button 組件在設(shè)置邊框樣式時(shí)使用了偽類；開發(fā)者可以通過偽類設(shè)置樣式來覆蓋默認(rèn)的邊框樣式。

代碼示例