button

按钮

属性

属性	类型	默认值	必填	说明
size	'small' | 'default' | 'tiny' | 'mini' | 'medium' | 'large' | 'huge'	'default'	否	按钮的大小
type	'warn' | 'default' | 'primary'	'default'	否	按钮的样式类型
plain	boolean	false	否	按钮是否镂空，背景���透明
disabled	boolean	false	否	是否禁用
loading	boolean	false	否	名称前是否带 loading 图标
form-type	'submit' | 'reset'		否	用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件
open-type	'contact' | 'share' | 'getPhoneNumber' | 'getUserInfo' | 'launchApp' | 'openSetting' | 'favorite' | 'openProfile' | 'openUserProfile' | 'videoGenerate' | 'openChatGroupProfile' | 'videoPublish'		否	开放能力
hover-class	string	'button-hover'	否	指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	number	20	否	按住后多久出现点击态，单位毫秒
hover-stay-time	number	70	否	手指松开后点击态保留时间，单位毫秒
lang	'en' | 'zh_CN' | 'zh_TW'	'en'	否	指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。
user	string	''	否	要跳转的号主页，可以传快手号或者快手 id，open-type="openProfile" 时有效
fit	boolean	false	否	按钮是否自动适应父元素宽度
show-message-card	boolean		否	打开 APP 时，向 APP 传递的参数，open-type="launchApp" 时有效
chat-group-number	string		否	群聊号，open-type 为openChatGroupProfile时有效
bindgetuserinfo	(e: { detail: UserInfoResult | AuthorizedUserInfoResult } & Event) => void		否	用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与 ks.getUserInfo 返回的一致，open-type="getUserInfo" 时有效
bindcontact	(e: { detail: Record<string, unknown> } & Event) => void		否	客服消息回调，open-type="contact" 时有效
bindgetphonenumber	(e: { detail: Record<string, unknown> } & Event) => void		否	获取用户手机号回调，open-type="getPhoneNumber" 时有效
binderror	(e: { detail: Record<string, unknown> } & Event) => void		否	当使用开放能力时，发生错误的回调，open-type="launchApp" 时有效
bindopensetting	(e: { detail: Record<string, unknown> } & Event) => void		否	在打开授权设置页后回调，open-type="openSetting" 时有效
bindlaunchapp	(e: { detail: Record<string, unknown> } & Event) => void		否	打开 APP 成功的回调，open-type="launchApp" 时有效

size

按钮的大小

值	说明
'small'	小尺寸
'default'	默认大小
'tiny'	特小尺寸
'mini'	超小尺寸
'medium'	中尺寸
'large'	大尺寸
'huge'	超大尺寸

type

按钮的样式类型

值	说明
'warn'	#FB5858
'default'	#FFFFFF
'primary'	#FE3666

formType

用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件

值	说明
'submit'	提交表单
'reset'	重置表单

openType

开放能力

值	说明
'contact'	打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明
'share'	触发用户转发，使用前建议先阅读使用指引
'getPhoneNumber'	获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息，具体说明
'getUserInfo'	获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息
'launchApp'	打开APP，可以通过app-parameter属性设定向APP传的参数具体说明
'openSetting'	打开授权设置页
'favorite'	触发用户收藏
'openProfile'	触发打开用户主页，配合 user (userId/kwaiId) 使用
'openUserProfile'	触发打开用户主页，配合 user (openId) 使用
'videoGenerate'	生成快手分享视频
'openChatGroupProfile'	点击打开对应群聊
'videoPublish'	发布快手视频

lang

指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。

值	说明
'en'	英文
'zh_CN'	简体中文
'zh_TW'	繁体中文

扫码体验

示例代码

open-type 示例

<button open-type="contact" bindcontact="onContact">打开客服会话</button>
<button open-type="share">转发</button>
<button open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber">获取用户手机号</button>
<button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">获取用户信息</button>
<button open-type="launchApp" bindlaunchapp="onLaunchApp">打开APP</button>
<button open-type="openSetting" bindopensetting="onOpenSetting">打开授权设置页</button>
<button open-type="favorite">收藏</button>
<button open-type="openProfile" user="1833712571">打开用户主页</button>
<button open-type="openChatGroupProfile" chat-group-number="K121323432749" type="default">测试群聊</button>

Bug & Tip

1. tip: button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
2. tip: bindgetphonenumber 建议使用 ks.canIUse 进行检测
3. tip: 在 bindgetphonenumber 等返回加密信息的回调中调用 ks.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。
4. tip: button 可作为原生组件的子节点嵌入，以便在原生组件上使用 open-type 的能力。
5. tip: 设置了 form-type 的 button 只会对当前组件中的 form 有效。因而，将 button 封装在自定义组件中，而 from 在自定义组件外，将会使这个 button 的 form-type 失效。