阅读(786) 赞(7)

百度智能小程序按钮

2020-08-11 17:37:16 更新

button 按钮

开发者工具 button 组件 open-type 不支持设置 contact,请到真机上调试

解释：按钮，设计文档参考按钮。

Web 态说明：由于浏览器的限制，在 Web 态内不支持获取联系人、打开授权设置页等功能。具体支持情况详见属性说明。

属性说明

属性名	类型	默认值	必填	说明	最低支持版本	Web 态说明
size	String	default	否	大小	-	-
type	String	default	否	类型	-	-
plain	Boolean	false	否	按钮是否镂空，背景色透明。	-	-
form-type	String	buttonclick	否	用于`<form/>`组件，点击分别会触发`<form/>`组件的 submit/reset 事件。	-	-
open-type	String		否	百度 APP 开放能力，比如分享、获取用户信息等等。	-	-
hover-class	String	button-hover	否	点击态。指定按钮按下去的样式类。当 `hover-class="none"` 时，没有点击态效果。 button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}。	-	-
hover-stop-propagation	Boolean	false	否	指定是否阻止本节点的祖先节点出现点击态。	-	-
hover-start-time	Number	20	否	按住后多久出现点击态，单位毫秒。	-	-
hover-stay-time	Number	70	否	手指松开后点击态保留时间，单位毫秒。	-	-
disabled	Boolean	false	否	是否禁用	-	-
loading	Boolean	false	否	名称前是否带有 loading 图标	-	-
bindgetphonenumber	Handler		否	获取用户手机号回调。和 open-type 搭配使用，使用时机：`open-type="getPhoneNumber"`。	1.12.14 低版本请做兼容性处理	暂不支持
bindgetuserinfo	EventHandler		否	用户点击该按钮时，会返回获取到的用户信息，从返回参数的 detail 中获取到的值，和 swan.getUserInfo 一样的。和 open-type 搭配使用，使用时机： `open-type="getUserInfo"`。	-	暂不支持
bindopensetting	Handler		否	在打开授权设置页后回调，使用时机：`open-type="openSetting"`。	-	暂不支持
bindcontact	Handler		否	客服消息回调，使用时机：open-type=“contact”。如果需要使用该功能，请发送邮件至 [email protected] 咨询详细情况。	-	暂不支持
bindchooseAddress	EventHandler		否	用户点击该按钮时，调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址，从返回参数的 detail 中获取，和 swan.chooseAddress 一样的。和 open-type 搭配使用，使用时机： `open-type="chooseAddress"`。	3.160.3 低版本请做兼容性处理	暂不支持
bindchooseInvoiceTitle	EventHandler		否	用户点击该按钮时，选择用户的发票抬头，和 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 态说明
share	触发用户分享，使用前建议先阅读 swan.onShareAppMessage 用。	-
getUserInfo	获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息，参考用户数据的签名验证和加解密对用户数据进行处理。	出于安全性考虑，暂不支持
getPhoneNumber	获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息： detail.errMsg 值为`"getPhoneNumber:ok"` 时代表用户信息获取成功； detail.errMsg 值为`"getPhoneNumber:fail auth deny"`时代表用户信息获取失败。用户手机号信息解密后数据示例：{“mobile”:“15000000000”} 1. 非个人开发者可申请； 2. 审核通过后，进入小程序首页,在左侧导航栏单击“设置>开发设置”。下拉页面，在“获取用户手机号权限申请”中单击“申请开通”。	出于安全性考虑，暂不支持
openSetting	打开授权设置页	暂不支持
chooseAddress	获取用户信息，可以从 bindchooseAddress 回调中获取到用户选择的地址信息	出于安全性考虑，暂不支持
chooseInvoiceTitle	获取用户信息，可以从 bindchooseInvoiceTitle 回调中获取到用户选择发票抬头信息	出于安全性考虑，暂不支持
contact	打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息。	暂不支持

示例

在开发者工具中打开

代码示例 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：自定义点击态

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            自定义点击态
        </view>
        <button type="primary" hover-class="none" bind:tap="tap">
            无点击态
        </button>
        <button type="primary" hover-start-time="1000">
            点击态延迟出现
        </button>
        <button type="primary" hover-stay-time="2000">
            点击态延迟消失
        </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">触发用户分享</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">选择用户发票抬头</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('发票抬头:', 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 及局部加载状态。
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 组件在设置边框样式时使用了伪类；开发者可以通过伪类设置样式来覆盖默认的边框样式。

代码示例

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

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

← 百度智能小程序文本

百度智能小程序多项选择器 →

百度智能小程序 按钮