百度小程序button按钮属性一览

时间：2022-02-21 浏览：23

　　在作百度小程序的时候，设计师们一定要对按钮的尺寸以及对应属性名称要熟悉，因为按钮的大小需要根据整体设计来进行调整，同时也要符合用户的视觉美观要求，以及系统的要求标准，如下百度小程序button按钮属性一览内容，希望能给大家一定的帮助。

百度小程序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 中获取到的值。当 errMsg 为getUserInfo:ok时即为获取成功；其中 userInfo 字段中包含获取到的用户头像地址（avatarUrl）、性别（gender）、昵称（nickName）。和 open-type 搭配使用， 使用时机：open-type="getUserInfo"

 -

暂不支持

bindopensetting

EventHandle

  

否

在打开授权设置页后回调，使用时机：open-type="openSetting"

 -

暂不支持

bindcontact

EventHandle

  

否

客服消息回调，使用时机：open-type="contact"

 -

暂不支持

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
低版本请做兼容性处理

 -

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
低版本请做兼容性处理

暂不支持

bindsubscribe

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 订阅类模板消息，需要用户授权才可发送，订阅消息详细说明请参考订阅消息接入 暂不支持
button 小程序设计 按钮设计 百度小程序