后浪云百度小程序教程：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”`。如果需要使用该功能，请发送邮件至 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

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

SWAN

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

SWAN

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

SWAN

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

SWAN
JS

 
 
 
  
  
  <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>

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

SWAN
JS

 
 
 
  
  
  <view class="wrap">
  
  
   <view class="card-area" s-if="{{!isWeb}}">
  
  
   <view class="top-description border-bottom">
  
  
   绑定开放能力
  
  
   </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" open-type="chooseAddress" bindchooseAddress="chooseAddress">选择用户收货地址</button>
  
  
   <button type="primary" class="middle-btn" open-type="chooseInvoiceTitle" bindchooseInvoiceTitle="chooseInvoiceTitle">选择用户发票抬头</button>
  
  
   <button type="primary" class="middle-btn" open-type="contact" bindcontact="contact">打开客服对话</button>
  
  
   <button type="primary" class="middle-btn" open-type="login" bindlogin="login">登录</button>
  
  
   <button type="primary" class="middle-btn" open-type="subscribe" template-id="BD0003" subscribe-id="8026" bindsubscribe="subscribe">订阅消息</button>
  
  
   </view>
  
  
  </view>

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

SWAN
JS

 
 
 
  
  
  <view class="wrap">
  
  
   <view class="card-area">
  
  
   <view class="top-description border-bottom">
  
  
   <view>绑定表单操作</view>
  
  
   <view>form-type="submit/reset"</view>
  
  
   </view>
  
  
   <form bindsubmit="submit" bindreset="reset">
  
  
   <button form-type="submit" type="primary">
  
  
   提交
  
  
   </button>
  
  
   <button form-type="reset">
  
  
   重置
  
  
   </button>
  
  
   </form>
  
  
   </view>
  
  
  </view>

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

SWAN
JS
CSS

 
 
 
  
  
  <view class="wrap">
  
  
   <view class="card-area" hover-class="hover">
  
  
   <view class="top-description border-bottom">
  
  
   <view>按钮父级同步出现点击态</view>
  
  
   <view>hover-stop-propagation</view>
  
  
   </view>
  
  
   <button type="primary" hover-stop-propagation="true" bind:tap="tap">
  
  
   点击卡片空白区域体验效果
  
  
   </button>
  
  
   </view>
  
  
  </view>

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

SWAN
JS
CSS

 
 
 
  
  
  <view class="wrap">
  
  
   <view class="card-area">
  
  
   <view class="top-description border-bottom">
  
  
   自定义 button 样式
  
  
   </view>
  
  
   <button class="{{isFavor ? 'Favor' : 'noFavor' }}" bindtap="tapChange">
  
  
   {{isFavor ? '已' : '' }}关注
  
  
   </button>
  
  
   </view>
  
  
  </view>

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

SWAN
JS

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

Bug & Tip

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

常见问题

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

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

代码示例

在开发者工具中打开

在 WEB IDE 中打开

SWAN
CSS

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

作者：后浪云

链接：https://www.idc.net/help/186143/

文章版权归作者所有，未经允许请勿转载。

THE END

香港云服务器
1核2G内存30G硬盘

年付5.5折 200元

为什么选择后浪云？

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

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 组件的类型为默认时，无法修改按钮的边框样式?

香港云服务器1核2G内存30G硬盘

年付5.5折 200元

为什么选择后浪云？

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

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 组件的类型为默认时，无法修改按钮的边框样式?

香港云服务器
1核2G内存30G硬盘