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