閱讀(1.7k) 書簽贊(0) 我要糾錯

百度智能小程序按鈕

2020-09-01 10:50 更新

button 按鈕

開發(fā)者工具 button 組件 open-type 不支持設置 contact,請到真機上調試

解釋：按鈕，設計文檔參考按鈕。

Web 態(tài)說明：由于瀏覽器的限制，在 Web 態(tài)內不支持獲取聯(lián)系人、打開授權設置頁等功能。具體支持情況詳見屬性說明。

屬性說明

屬性名	類型	默認值	必填	說明	最低支持版本	Web 態(tài)說明
size	String	default	否	大小	-	-
type	String	default	否	類型	-	-
plain	Boolean	false	否	按鈕是否鏤空，背景色透明。	-	-
form-type	String	buttonclick	否	用于`<form/>`組件，點擊分別會觸發(fā)`<form/>`組件的 submit/reset 事件。	-	-
open-type	String		否	百度 APP 開放能力，比如分享、獲取用戶信息等等。	-	-
hover-class	String	button-hover	否	點擊態(tài)。指定按鈕按下去的樣式類。當 `hover-class="none"` 時，沒有點擊態(tài)效果。 button-hover 默認為{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}。	-	-
hover-stop-propagation	Boolean	false	否	指定是否阻止本節(jié)點的祖先節(jié)點出現(xiàn)點擊態(tài)。	-	-
hover-start-time	Number	20	否	按住后多久出現(xiàn)點擊態(tài)，單位毫秒。	-	-
hover-stay-time	Number	70	否	手指松開后點擊態(tài)保留時間，單位毫秒。	-	-
disabled	Boolean	false	否	是否禁用	-	-
loading	Boolean	false	否	名稱前是否帶有 loading 圖標	-	-
bindgetphonenumber	Handler		否	獲取用戶手機號回調。和 open-type 搭配使用，使用時機：`open-type="getPhoneNumber"`。	1.12.14 低版本請做兼容性處理	暫不支持
bindgetuserinfo	EventHandler		否	用戶點擊該按鈕時，會返回獲取到的用戶信息，從返回參數(shù)的 detail 中獲取到的值，和 swan.getUserInfo 一樣的。和 open-type 搭配使用，使用時機： `open-type="getUserInfo"`。	-	暫不支持
bindopensetting	Handler		否	在打開授權設置頁后回調，使用時機：`open-type="openSetting"`。	-	暫不支持
bindcontact	Handler		否	客服消息回調，使用時機：open-type=“contact”。如果需要使用該功能，請發(fā)送郵件至 smartprogram_support@baidu.com 咨詢詳細情況。	-	暫不支持
bindchooseAddress	EventHandler		否	用戶點擊該按鈕時，調起用戶編輯收貨地址原生界面，并在編輯完成后返回用戶選擇的地址，從返回參數(shù)的 detail 中獲取，和 swan.chooseAddress 一樣的。和 open-type 搭配使用，使用時機： `open-type="chooseAddress"`。	3.160.3 低版本請做兼容性處理	暫不支持
bindchooseInvoiceTitle	EventHandler		否	用戶點擊該按鈕時，選擇用戶的發(fā)票抬頭，和 swan.chooseInvoiceTitle 一樣的。和 open-type 搭配使用，使用時機： `open-type="chooseInvoiceTitle"`。	3.160.3 低版本請做兼容性處理	暫不支持
contact	Handler		否	打開客服會話，如果用戶在會話中點擊消息卡片后返回小程序，可以從 bindcontact 回調中獲得具體信息。	-	暫不支持

size 有效值

值	說明
default	默認大小
mini	小尺寸

type 有效值

值	說明
primary	藍色
default	白色
warn	紅色

form-type 有效值

值	說明
buttonclick	普通按鈕點擊
submit	提交表單
reset	重置表單

open-type 有效值

值	說明	Web 態(tài)說明
share	觸發(fā)用戶分享，使用前建議先閱讀 swan.onShareAppMessage 用。	-
getUserInfo	獲取用戶信息，可以從 bindgetuserinfo 回調中獲取到用戶信息，參考用戶數(shù)據(jù)的簽名驗證和加解密對用戶數(shù)據(jù)進行處理。	出于安全性考慮，暫不支持
getPhoneNumber	獲取用戶手機號，可以從 bindgetphonenumber 回調中獲取到用戶信息： detail.errMsg 值為`"getPhoneNumber:ok"` 時代表用戶信息獲取成功； detail.errMsg 值為`"getPhoneNumber:fail auth deny"`時代表用戶信息獲取失敗。用戶手機號信息解密后數(shù)據(jù)示例：{“mobile”:“15000000000”} 1. 非個人開發(fā)者可申請； 2. 審核通過后，進入小程序首頁,在左側導航欄單擊“設置>開發(fā)設置”。下拉頁面，在“獲取用戶手機號權限申請”中單擊“申請開通”。	出于安全性考慮，暫不支持
openSetting	打開授權設置頁	暫不支持
chooseAddress	獲取用戶信息，可以從 bindchooseAddress 回調中獲取到用戶選擇的地址信息	出于安全性考慮，暫不支持
chooseInvoiceTitle	獲取用戶信息，可以從 bindchooseInvoiceTitle 回調中獲取到用戶選擇發(fā)票抬頭信息	出于安全性考慮，暫不支持
contact	打開客服會話，如果用戶在會話中點擊消息卡片后返回小程序，可以從 bindcontact 回調中獲得具體信息。	暫不支持

示例

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

代碼示例 1 ：主要按鈕

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>主要按鈕</view>
            <view>primary</view>
        </view>
        <button type="primary" plain="false">
            主按鈕 normal
        </button>
        <button type="primary" loading>
            主按鈕 loading
        </button>
        <button type="primary" disabled>
            主按鈕 disabled
        </button>
    </view>
</view>

代碼示例 2 ：次要按鈕

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>次要按鈕</view>
            <view>default</view>
        </view>
        <button type="default" plain="false">
            次按鈕 normal
        </button>
        <button type="default" loading>
            次按鈕 loading
        </button>
        <button type="default" disabled>
            次按鈕 disabled
        </button>
    </view>
</view>

代碼示例 3：警示按鈕

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>警示按鈕</view>
            <view>warn</view>
        </view>
        <button type="warn">
            警示按鈕 normal
        </button>
        <button type="warn" loading>
            警示按鈕 loading
        </button>
        <button type="warn" disabled>
            警示按鈕 disabled
        </button>
    </view>
</view>

代碼示例 4：小尺寸按鈕

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>小尺寸按鈕</view>
            <view>size='mini'</view>
        </view>
        <button type="primary" size="mini">
            按鈕 
        </button>
        <button type="default" size="mini">
            按鈕 
        </button>
        <button type="warn" size="mini">
            按鈕 
        </button>
    </view>
</view>

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

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            自定義點擊態(tài)
        </view>
        <button type="primary" hover-class="none" bind:tap="tap">
            無點擊態(tài)
        </button>
        <button type="primary" hover-start-time="1000">
            點擊態(tài)延遲出現(xiàn)
        </button>
        <button type="primary" hover-stay-time="2000">
            點擊態(tài)延遲消失
        </button>
    </view>
</view>

Page({
    tap() {
        swan.showToast({
            title: '已點擊',
            icon: 'none'
        });
    }
});

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

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            綁定開放能力
        </view>
       <view>
            <button type="primary" class="middle-btn" open-type="share">觸發(fā)用戶分享</button>
            <button type="primary" class="middle-btn" open-type="getUserInfo" bindgetuserinfo="getUserInfo">獲取用戶信息</button>
            <button type="primary" class="middle-btn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">獲取用戶手機號</button>
            <button type="primary" class="middle-btn" open-type="openSetting" bindopensetting="openSetting">打開授權設置頁</button>
            <button type="primary" class="middle-btn" contact open-type="contact" bindcontact="contact">打開客服對話</button>
            <button type="primary" class="middle-btn" open-type="chooseInvoiceTitle" bindchooseInvoiceTitle="chooseInvoiceTitle">選擇用戶發(fā)票抬頭</button>
            <button type="primary" class="middle-btn" open-type="chooseAddress" bindchooseAddress="chooseAddress">選擇用戶收貨地址</button>
       </view>
    </view>
</view>

Page({
    onShareAppMessage() {
        return {
            title: '百度智能小程序官方示例',
            content: '世界很復雜，百度更懂你——小程序簡介或詳細描述',//推薦設置為小程序簡介或描述  
            imageUrl: 'https://b.bdstatic.com/miniapp/images/bgt_icon.png',
            path: '/index/index',
            success(res) {
                // 分享成功
            },
            fail(err) {
                // 分享失敗
            }
        };
    },
    getUserInfo(e) {
        console.log('用戶信息:', e);
        if (e.detail.encryptedData) {
            swan.showToast({
                title: '已成功授權',
                icon: 'none'
            });
        }
    },
    openSetting(e) {
        console.log('用戶設置:', e);
    },
    getPhoneNumber(e) {
        console.log('用戶手機號:', e);
    },
    contact(e) {
        console.log('用戶面板:', e);
    },
    chooseInvoiceTitle(e) {
        console.log('發(fā)票抬頭:', e);
    },
    chooseAddress(e) {
        console.log('收貨地址:', e);
    }
});

代碼示例 7：不同類型按鈕

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            form-type="submit/reset"
        </view>
        <form bindsubmit="submit" bindreset="reset">
            <button form-type="submit" type="primary">
                提交
            </button>
            <button form-type="reset">
                重置
            </button>
        </form>
    </view>
    <view class="card-area">
        <view class="top-description border-bottom">
            form-type="buttonclick"
        </view>
        <form>
            <button form-type="buttonclick" bindtap="buttonclick" type="primary" size="default">
                普通點擊
            </button>
        </form>
    </view>
</view>

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

<view class="wrap">
    <view class="card-area" hover-class="hover">
        <button type="primary" hover-stop-propagation="true">
            按鈕
        </button>
    </view>
</view>

.hover {
    opacity: .2;
}
.card-area {
    background-color: #5B9FFF;
}

Bug & Tip

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

參考示例

參考示例 1：自定義 button 樣式

<view class="wrap">
    <button class="{{isFavor ? 'Favor' : 'noFavor' }}" bindtap="tapChange">
        收藏
    </button>
</view>

Page({
    data: {
        isFavor: false
    },
    tapChange() {
        this.setData({
            isFavor: !this.data.isFavor
        })
    }
});

.Favor {
    background-color: #FFB6C1;
    font-size: .24rem;
}

.noFavor {
    background-image: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/xuezhiqian.jpg);
    background-size: 54.35rpx 43.48rpx;
    background-repeat: no-repeat;
    background-position: 25% 60%;
    width: 362.32rpx;
    font-size: .24rem;
    border: 3.62rpx solid #000;
    border-radius: 181.16rpx;
    position: static;
}

參考示例 2：button 設置為開放能力，綁定普通點擊事件

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            綁定開放能力
        </view>
        <button type="primary" open-type="getUserInfo" bindgetuserinfo="getUserInfo" bindtap="normalClick">獲取用戶信息</button>
    </view>
</view>

Page({
    getUserInfo(e) {
        console.log('用戶信息:', e);
        if (e.detail.encryptedData) {
            swan.showToast({
                title: '已成功授權',
                icon: 'none'
            });
        }
    },
    normalClick() {
        swan.showToast({
            title: '您點擊了此按鈕',
            icon: 'none'
        });
    }
});

常見問題

Q：button 組件的類型為默認時，無法修改按鈕的邊框樣式

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

代碼示例

<button type="default" class="btn">
    按鈕 default
</button>

.btn {
    position: absolute;
    top: 50px;
}
.btn:after {
    border: 1px solid #f00;
}

以上內容是否對您有幫助：

← 百度智能小程序文本

百度智能小程序多項選擇器 →

寫筆記

我要補充

百度智能小程序 按鈕