×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程：button按钮

button 按钮

开发者工具 button 组件 open-type 不支持设置 contact ，请到真机上调试。

专注于为中小企业提供成都网站制作、网站建设、外贸网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业江达免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了成百上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

解释：按钮，设计文档参考按钮 。
Web 态说明：由于浏览器的限制，在 Web 态内不支持获取联系人、打开授权设置页等功能。具体支持情况详见属性说明。

属性说明

属性名 类型 默认值 必填 说明 最低支持版本 Web 态说明

size

String

default

否

大小

 - -

type

String

default

否

类型

 - -

plain

Boolean

false

否

按钮是否镂空，背景色透明

 - -

form-type

String

buttonclick

否

用于

组件，点击分别会触发组件的 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.

否（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：主要按钮

 
 
 
    
  
  
  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.  主要按钮
    5. 
  
  
  
  5.  primary
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.  主按钮 normal
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11.  主按钮 loading
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13.  
    14. 
  
  
  
  14.  主按钮 disabled
    15. 
  
  
  
  15.  
    16. 
  
  
  
  16.  
    17. 
  
  
  
    18.

代码示例 2：次要按钮

 
 
 
    
  
  
  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.  次要按钮
    5. 
  
  
  
  5.  default
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.  次按钮 normal
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11.  次按钮 loading
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13.  
    14. 
  
  
  
  14.  次按钮 disabled
    15. 
  
  
  
  15.  
    16. 
  
  
  
  16.  
    17. 
  
  
  
    18.

代码示例 3：警示按钮

 
 
 
    
  
  
  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.  警示按钮
    5. 
  
  
  
  5.  warn
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.  警示按钮 normal
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11.  警示按钮 loading
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13.  
    14. 
  
  
  
  14.  警示按钮 disabled
    15. 
  
  
  
  15.  
    16. 
  
  
  
  16.  
    17. 
  
  
  
    18.

代码示例 4：小尺寸按钮

 
 
 
    
  
  
  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.  小尺寸按钮
    5. 
  
  
  
  5.  size='mini'
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.  按钮 
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11.  按钮 
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13.  
    14. 
  
  
  
  14.  按钮 
    15. 
  
  
  
  15.  
    16. 
  
  
  
  16.  
    17. 
  
  
  
    18.

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

 
 
 
    
  
  
  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.  自定义点击态
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  无点击态
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10.  点击态延迟出现
    11. 
  
  
  
  11.  
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13.  点击态延迟消失
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15.  
    16. 
  
  
  
    17.

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

 
 
 
    
  
  
  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.  绑定开放能力
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11.  
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13.  
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15.  
    16. 
  
  
  
    17.

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

 
 
 
    
  
  
  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.  绑定表单操作
    5. 
  
  
  
  5.  form-type="submit/reset"
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9.  提交
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11.  
    12. 
  
  
  
  12.  重置
    13. 
  
  
  
  13.  
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15.  
    16. 
  
  
  
    17.

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

 
 
 
    
  
  
  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.  按钮父级同步出现点击态
    5. 
  
  
  
  5.  hover-stop-propagation
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.  点击卡片空白区域体验效果
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10.  
    11. 
  
  
  
    12.

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

 
 
 
    
  
  
  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.  自定义 button 样式
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  {{isFavor ? '已' : '' }}关注
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9.  
    10. 
  
  
  
    11.

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

 
 
 
    
  
  
  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.  同时绑定开放能力、普通点击事件
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  
    8. 
  
  
  
    9.

Bug & Tip

常见问题

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

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

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

 
 
 
    
  
  
  
    2. 
  
  
  
  2.  按钮 default
    3. 
  
  
  
    4.

本文题目：创新互联百度小程序教程：button按钮
链接URL：http://cdbrznjsb.com/article/dphsscs.html

其他资讯

让你的专属顾问为你服务