后浪云百度小程序教程：button 按钮

2023-8-27
  • button 按钮
    • 属性说明
      • size 有效值
      • type 有效值
      • form-type 有效值
      • open-type 有效值
    • 示例
      • 代码示例 1：主要按钮
      • 代码示例 2：次要按钮
      • 代码示例 3：警示按钮
      • 代码示例 4：小尺寸按钮
      • 代码示例 5：自定义点击态
      • 代码示例 6：绑定开放能力
      • 代码示例 7：form-type=”submit/reset”
      • 代码示例 8：hover-stop-propagation 属性
      • 代码示例 9：自定义 button 样式
      • 代码示例 10：同时绑定开放能力、普通点击事件
    • Bug & Tip
    • 常见问题
      • Q：button 组件的类型为默认时，无法修改按钮的边框样式?

    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”。如果需要使用该功能，请发送邮件至 [email protected] 咨询详细情况

    		 -

    暂不支持

    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 中打开

    扫码体验

    代码示例

    后浪云百度小程序教程：button 按钮插图

    请使用百度APP扫码

    代码示例 1：主要按钮

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

    代码示例 2：次要按钮

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

    代码示例 3：警示按钮

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

    代码示例 4：小尺寸按钮

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

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

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

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

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

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

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

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

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

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

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

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

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

    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. 
  
  
  
    2.  按钮 default
      3. 
  
  
  
    3. </button>
      4.
    版权声明：
    作者：后浪云
    链接：https://www.idc.net/help/186143/
    文章版权归作者所有，未经允许请勿转载。
    THE END
    IDC.NET智能小程序后浪云百度小程序
    Copyright © 2025 后浪云 网站地图