title: button 按钮 header: develop nav: component sidebar: formlist_button

webUrl: https://qft12m.smartapps.cn/component/button/button

解释： 按钮

属性说明

属性名 类型 默认值 必填 说明 最低支持版本
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”。如果需要使用该功能，请发送邮件至 smartprogram_support@baidu.com 咨询详细情况。 -
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有效值

值 说明
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回调中获得具体信息。

示例

在开发者工具中预览效果

扫码体验

webUrl: https://qft12m.smartapps.cn/component/button/button - 图1 请使用百度APP扫码

代码示例 1 ：主要按钮

:::codeTab

  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 ： 次要按钮

:::codeTab

  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： 警示按钮

:::codeTab

  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： 小尺寸按钮

:::codeTab

  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： 自定义点击态

:::codeTab

  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>
  1. Page({
  2.     tap() {
  3.         swan.showToast({
  4.             title: '已点击',
  5.             icon: 'none'
  6.         });
  7.     }
  8. });

:::

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

:::codeTab

  1. <view class="wrap">
  2.     <view class="card-area" s-if="{{!isWeb}}">
  3.         <view class="top-description border-bottom">
  4.             绑定开放能力
  5.         </view>
  6.        <view>
  7.             <button type="primary" class="middle-btn" open-type="share">触发用户分享</button>
  8.             <button type="primary" class="middle-btn" open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取用户信息</button>
  9.             <button type="primary" class="middle-btn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取用户手机号</button>
  10.             <button type="primary" class="middle-btn" open-type="openSetting" bindopensetting="openSetting">打开授权设置页</button>
  11.             <button type="primary" class="middle-btn" contact open-type="contact" bindopensetting="contact">打开客服对话</button>
  12.             <button type="primary" class="middle-btn" open-type="chooseInvoiceTitle" bindchooseInvoiceTitle="chooseInvoiceTitle">选择用户发票抬头</button>
  13.             <button type="primary" class="middle-btn" open-type="chooseAddress" bindchooseAddress="chooseAddress">选择用户收货地址</button>
  14.        </view>
  15.     </view>
  16. </view>
  1. Page({
  2.     getUserInfo(e) {
  3.         console.log('用户信息:', e);
  4.     },
  5.     openSetting(e) {
  6.         console.log('用户设置:', e);
  7.     },
  8.     getPhoneNumber(e) {
  9.         console.log('用户手机号:', e);
  10.     },
  11.     contact(e) {
  12.         console.log('用户面板:', e);
  13.     },
  14.     chooseInvoiceTitle(e) {
  15.         console.log('发票抬头:', e);
  16.     },
  17.     chooseAddress(e) {
  18.         console.log('收货地址:', e);
  19.     }
  20. });

:::

代码示例 7： 不同类型按钮

:::codeTab

  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description border-bottom">
  4.             form-type="submit/reset"
  5.         </view>
  6.         <form bindsubmit="submit" bindreset="reset">
  7.             <button form-type="submit" type="primary">
  8.                 提交
  9.             </button>
  10.             <button form-type="reset">
  11.                 重置
  12.             </button>
  13.         </form>
  14.     </view>
  15.     <view class="card-area">
  16.         <view class="top-description border-bottom">
  17.             form-type="buttonclick"
  18.         </view>
  19.         <form>
  20.             <button form-type="buttonclick" bindtap="buttonclick" type="primary" size="default">
  21.                 普通点击
  22.             </button>
  23.         </form>
  24.     </view>
  25. </view>

:::

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

在开发者工具中预览效果

:::codeTab

  1. <view class="wrap">
  2.     <view class="card-area" hover-class="hover">
  3.         <button type="primary" hover-stop-propagation='true'>
  4.             按钮
  5.         </button>
  6.     </view>
  7. </view>
  1. .hover {
  2.     opacity: .2;
  3. }
  4. .card-area {
  5.     background-color: #5B9FFF;
  6. }

:::