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

EventHandle

否

获取用户手机号回调。和 open-type 搭配使用， 使用时机：open-type=”getPhoneNumber”。具体申请方法请见：获取用户手机号权限申请

1.12.14
低版本请做兼容性处理

暂不支持

bindgetuserinfo

EventHandle

否

用户点击该按钮时，会返回获取到的用户信息，从返回参数的 detail 中获取到的值，和 swan.getUserInfo 一样的。和 open-type 搭配使用， 使用时机：open-type=”getUserInfo”

-

暂不支持

bindopensetting

EventHandle

否

在打开授权设置页后回调，使用时机：open-type=”openSetting”

-

暂不支持

bindcontact

EventHandle

否

客服消息回调，使用时机：open-type=”contact”。如果需要使用该功能，请发送邮件至 smartprogram_support@baidu.com 咨询详细情况

-

暂不支持

bindchooseaddress

EventHandle

否

用户点击该按钮时，调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址，从返回参数的 detail 中获取，和 swan.chooseAddress 一样的。和 open-type 搭配使用，使用时机：open-type=”chooseAddress”

3.160.3
低版本请做兼容性处理

暂不支持

bindchooseinvoicetitle

EventHandle

否

用户点击该按钮时，选择用户的发票抬头，和 swan.chooseInvoiceTitle 一样的。和 open-type 搭配使用，使用时机：open-type=”chooseInvoiceTitle”

3.160.3
低版本请做兼容性处理

暂不支持

bindlogin

EventHandle

否

登录回调，和 open-type 搭配使用，使用时机：open-type=”login”。可以通过返回参数的 detail 判断是否登录成功，当 errMsg 为‘login:ok’时即为成功。如想获取登录凭证请示用 swan.getLoginCode

3.230.1
低版本请做兼容性处理

-

contact

EventHandle

否

打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息

-

暂不支持

template-id

String/Array.<string>

否（open-type 为 subscribe 时必填）

发送订阅类模板消息所用的模板库标题 ID ，可通过 getTemplateLibraryList 获取
当参数类型为 Array 时，可传递 1~3 个模板库标题 ID

3.270.1
低版本请做兼容性处理

暂不支持

subscribe-id

String

否（open-type 为 subscribe 时必填）

发送订阅类模板消息时所使用的唯一标识符，内容由开发者自定义，用来标识订阅场景
注意：同一用户在同一 subscribe-id 下的多次授权不累积下发权限，只能下发一条。若要订阅多条，需要不同 subscribe-id

3.270.1
低版本请做兼容性处理

暂不支持

bindsubmit

EventHandle

否

订阅消息授权回调，和 open-type 搭配使用，使用时机：open-type=”subscribe”

3.270.1
低版本请做兼容性处理

暂不支持

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 回调中获得具体信息暂不支持
login登录，可以从 bindlogin 回调中确认是否登录成功-
subscribe订阅类模板消息，需要用户授权才可发送，订阅消息详细说明请参考订阅消息接入暂不支持

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

百度智能小程序

请使用百度APP扫码

代码示例 1：主要按钮

  • SWAN
  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">
  4.             <view>主要按钮</view>
  5.             <view>primary</view>
  6.         </view>
  7.         <button type="primary" plain="false">
  8.             主按钮 normal
  9.         </button>
  10.         <button type="primary" loading>
  11.             主按钮 loading
  12.         </button>
  13.         <button type="primary" disabled>
  14.             主按钮 disabled
  15.         </button>
  16.     </view>
  17. </view>

代码示例 2：次要按钮

  • SWAN
  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">
  4.             <view>次要按钮</view>
  5.             <view>default</view>
  6.         </view>
  7.         <button type="default" plain="false">
  8.             次按钮 normal
  9.         </button>
  10.         <button type="default" loading>
  11.             次按钮 loading
  12.         </button>
  13.         <button type="default" disabled>
  14.             次按钮 disabled
  15.         </button>
  16.     </view>
  17. </view>

代码示例 3：警示按钮

  • SWAN
  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">
  4.             <view>警示按钮</view>
  5.             <view>warn</view>
  6.         </view>
  7.         <button type="warn">
  8.             警示按钮 normal
  9.         </button>
  10.         <button type="warn" loading>
  11.             警示按钮 loading
  12.         </button>
  13.         <button type="warn" disabled>
  14.             警示按钮 disabled
  15.         </button>
  16.     </view>
  17. </view>

代码示例 4：小尺寸按钮

  • SWAN
  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">
  4.             <view>小尺寸按钮</view>
  5.             <view>size='mini'</view>
  6.         </view>
  7.         <button type="primary" size="mini">
  8.             按钮 
  9.         </button>
  10.         <button type="default" size="mini">
  11.             按钮 
  12.         </button>
  13.         <button type="warn" size="mini">
  14.             按钮 
  15.         </button>
  16.     </view>
  17. </view>

代码示例 5：自定义点击态

  • SWAN
  • JS
  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">
  4.             自定义点击态
  5.         </view>
  6.         <button type="primary" hover-class="none" bind:tap="tap">
  7.             无点击态
  8.         </button>
  9.         <button type="primary" hover-start-time="1000">
  10.             点击态延迟出现
  11.         </button>
  12.         <button type="primary" hover-stay-time="2000">
  13.             点击态延迟消失
  14.         </button>
  15.     </view>
  16. </view>

代码示例 6：绑定开放能力

  • SWAN
  • JS
  1. <view class="wrap">
  2.     <view class="card-area" s-if="{{!isWeb}}">
  3.         <view class="top-description border-bottom">
  4.             绑定开放能力
  5.         </view>
  6.         <button type="primary" class="middle-btn" open-type="share">触发用户分享</button>
  7.         <button type="primary" class="middle-btn" open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取用户信息</button>
  8.         <button type="primary" class="middle-btn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取用户手机号</button>
  9.         <button type="primary" class="middle-btn" open-type="openSetting" bindopensetting="openSetting">打开授权设置页</button>
  10.         <button type="primary" class="middle-btn" open-type="chooseAddress" bindchooseAddress="chooseAddress">选择用户收货地址</button>
  11.         <button type="primary" class="middle-btn" open-type="chooseInvoiceTitle" bindchooseInvoiceTitle="chooseInvoiceTitle">选择用户发票抬头</button>
  12.         <button type="primary" class="middle-btn" open-type="contact" bindcontact="contact">打开客服对话</button>
  13.         <button type="primary" class="middle-btn" open-type="login" bindlogin="login">登录</button>
  14.         <button type="primary" class="middle-btn" open-type="subscribe" template-id="BD0003" subscribe-id="8026" bindsubscribe="subscribe">订阅消息</button>
  15.     </view>
  16. </view>

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

  • SWAN
  • JS
  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">
  4.             <view>绑定表单操作</view>
  5.             <view>form-type="submit/reset"</view>
  6.         </view>
  7.         <form bindsubmit="submit" bindreset="reset">
  8.             <button form-type="submit" type="primary">
  9.                 提交
  10.             </button>
  11.             <button form-type="reset">
  12.                 重置
  13.             </button>
  14.         </form>
  15.     </view>
  16. </view>

代码示例 8：hover-stop-propagation 属性

  • SWAN
  • JS
  • CSS
  1. <view class="wrap">
  2.     <view class="card-area" hover-class="hover">
  3.         <view class="top-description border-bottom">
  4.             <view>按钮父级同步出现点击态</view>
  5.             <view>hover-stop-propagation</view>
  6.         </view>
  7.         <button type="primary" hover-stop-propagation="true" bind:tap="tap">
  8.             点击卡片空白区域体验效果
  9.         </button>
  10.     </view>
  11. </view>

代码示例 9：自定义 button 样式

  • SWAN
  • JS
  • CSS
  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">
  4.             自定义 button 样式
  5.         </view>
  6.         <button class="{{isFavor ? 'Favor' : 'noFavor' }}" bindtap="tapChange">
  7.             {{isFavor ? '已' : '' }}关注
  8.         </button>
  9.     </view>
  10. </view>

代码示例 10：同时绑定开放能力、普通点击事件

  • SWAN
  • JS
  1. <view class="wrap">
  2.     <view class="card-area" s-if="{{!isWeb}}">
  3.         <view class="top-description border-bottom">
  4.             同时绑定开放能力、普通点击事件
  5.         </view>
  6.         <button type="primary" open-type="getPhoneNumber" bindgetuserinfo="getPhoneNumber" bindtap="tap">获取用户手机号</button>
  7.     </view>
  8. </view>

Bug & Tip

  • Tip：建议页面中使用 1 个主要按钮引导操作。
  • Tip：按钮文案可配，文案不可折行显示，文案前可增加 icon 及局部加载状态。
  • Tip：页面中可以使用多个小尺寸按钮引导操作。
  • Tip：建议小尺寸按钮宽度在 364px 到 114px 之间。

常见问题

Q：button 组件的类型为默认时，无法修改按钮的边框样式?

A：为了处理移动端的 1px 问题，默认类型的 button 组件在设置边框样式时使用了伪类；开发者可以通过伪类设置样式来覆盖默认的边框样式。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

  • SWAN
  • CSS
  1. <button type="default" class="btn">
  2.     按钮 default
  3. </button>