开发者社区
社区提问意见反馈
开发者钉组织
扫描二维码
加入支付宝开发者钉组织
开发 > 组件 > 表单组件 > button 按钮
收藏
订阅更新
我的文档
设置
简介
需要重点强调该操作并且引导用户去点击的入口通过按钮表达。
扫码体验

使用
在线示例

属性说明
属性
类型
描述
size
string
有效值 default, mini(小尺寸)。 默认值: default
type
string
按钮的样式类型,有效值 primary、default、warn。 默认值: default
plain
boolean
是否镂空(ghost 与 plain 等效)。 默认值: false
disabled
boolean
是否禁用。 默认值: false
loading
boolean
按钮文字前是否带 loading 图标。 默认值: false
hover-class
string
按钮按下去的样式类。button-hover
默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;},hover-class="none"
时表示没有被点击效果。 默认值: button-hover
hover-start-time
number
按住后多少时间后出现点击状态,单位毫秒。 默认值: 20
hover-stay-time
number
手指松开后点击状态保留时间,单位毫秒。 默认值: 70
hover-stop-propagation
boolean
是否阻止当前元素的祖先元素出现被点击样式。 默认值: false 版本要求: 基础库 1.10.0
及以上
form-type
string
有效值:submit、 reset,用于 form 表单
组件,点击分别会触发 submit/reset 事件。
open-type
string
开放能力。 版本要求: 基础库 1.1.0
及以上
scope
string
当 open-type 为 getauthorize 时有效。 版本要求: 基础库 1.11.0
及以上
ontap
eventhandle
点击。 说明: 每点击一次会触发一次事件,建议自行使用代码防止重复点击,可以使用 js 防抖和节流实现。
public-id
string
生活号 id,必须是当前小程序同主体且已关联的生活号,open-type="lifestyle"
时有效。
ongetauthorize
eventhandle
当 open-type 为 getauthorize 时有效。 当授权成功时触发。 版本要求:基础库 1.11.0
及以上
onfollowlifestyle
eventhandle
当 open-type 为 lifestyle 时有效。 当点击按钮时触发。 event.detail = { followstatus }
folllowstatus
合法值有 1
2
3
,其中 1
表示已关注。2
表示用户不允许关注。3
表示发生未知错误; 已知问题:基础库 1.0,当用户在点击按钮前已关注生活号,event.detail.followstatus
的值为 true
版本要求:基础库 1.11.0
及以上
onerror
eventhandle
当 open-type 为 getauthorize 时有效。 当授权失败时触发。event.detail = {type, errormessage}
,此时 type
的值为 getauthorize
版本要求:基础库 1.11.0
及以上
ongetuserinfo
eventhandler
当 open-type 为 getauthorize 且 scope 为 userinfo 时有效。 当授权成功时触发。 版本要求 :基础库  2.8.0 及以上 event.detail = {     userinfo: {         avatar, // 头像         nickname,  // 昵称   } },
ongetphonenumber
eventhandler
当 open-type 为 getauthorize 且 scope 为 phonenumber 时有效。 当授权成功时触发。 版本要求 :基础库 2.8.0 及以上 成功获取用户信息后返回 event.detail = {     encrypteddata: '',  // 加密后的手机号     sign: '',  //  签名信息,如果在开放平台后台配置了加签方式后有此字段 },
onchooseavatar
eventhandle
当 open-type 为 chooseavatar 时有效。
当用户选择头像后触发。
版本要求:基础库 2.9.29 支付宝客户端 10.6.0 及以上。
event.detail = {
avatarurl // 头像临时文件链接
}
open-type 有效值
属性
描述
share
触发 自定义分享
,可使用 my.caniuse
('button.open-type.share') 判断。 版本要求:基础库 1.1.0
及以上
getauthorize
支持小程序授权,可使用 my.caniuse('button.open-type.getauthorize')
判断。 版本要求:基础库 1.11.0
及以上
contactshare
分享到通讯录好友,可使用 my.caniuse('button.open-type.contactshare')
判断。 版本要求:基础库 1.11.0 及以上
lifestyle
关注生活号
,可使用 my.caniuse('button.open-type.lifestyle')
判断。 版本要求:基础库 1.11.0 及以上
chooseavatar
获取用户头像,可使用 my.caniuse(button.open-type.chooseavatar) 判断。
版本要求:基础库 2.9.29 支付宝客户端 10.6.0 及以上。
scope 有效值
当 open-type 为 getauthorize 时,可以设置 scope 为以下值:
属性
描述
phonenumber
用户点击同意后,即可通过 my.getphonenumber
授权小程序获取用户绑定的手机号。 版本要求:基础库 1.11.0
及以上
userinfo
用户点击同意后,即可通过 my.getopenuserinfo
授权小程序获取支付宝会员基础信息。 版本要求:基础库 1.11.0
及以上
常见问题
使用 button 点击授权获取手机号,服务端要怎么解密?
请查看文档 接口内容加密方式
button 如何去除默认边框?
修改 style 属性为:border: 0; padding: 0;
如何实现自定义分享中的 button: 页面分享按钮触发?
通过给 button 组件设置属性 open-type="share",可以在用户点击按钮后触发。
内容没有解决您的问题?您还可以前往 或 寻求帮助
凯发k8官方网娱乐官方 copyright © 2022 支付宝(杭州)信息技术有限公司  | icp证浙b2-20160559
该文档对你是否有帮助?
当前页面目录
网站地图