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"。如果需要使用该功能,请发送邮件至 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 有效值

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

# 示例

扫码体验
重新加载
请使用百度APP扫码

# 代码示例 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;
                  }
                  

                  # 参考示例

                  # 参考示例 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'
                              });
                          }
                      });
                      
                      

                      # Bug & Tips

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

                      # 常见问题

                      # Q:button 组件的类型为默认时,无法修改按钮的边框样式

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

                      代码示例:

                      <button type="default" class="btn">
                          按钮 default
                      </button>
                      
                      .btn {
                          position: absolute;
                          top: 50px;
                      }
                      .btn:after {
                          border: 1px solid #f00;
                      }