跳到主要内容
版本:3.x

Button

按钮

支持情况:

参考文档

类型

ComponentType<ButtonProps>

示例代码

export default class PageButton extends Component {
state = {
btn: [
{
text: '页面主操作 Normal',
size: 'default',
type: 'primary'
},
{
text: '页面主操作 Loading',
size: 'default',
type: 'primary',
loading: true,
},
{
text: '页面主操作 Disabled',
size: 'default',
type: 'primary',
disabled: true,
},
{
text: '页面次要操作 Normal',
size: 'default',
type: 'default'
},
{
text: '页面次要操作 Disabled',
size: 'default',
type: 'default',
disabled: true,
},
{
text: '警告类操作 Normal',
size: 'default',
type: 'warn'
},
{
text: '警告类操作 Disabled',
size: 'default',
type: 'warn',
disabled: true,
}
]
}
render () {
return (
<View className='container'>
{this.state.btn.map(item => {
return (
<Button
size={item.size ? item.size : ''}
type={item.type ? item.type : ''}
loading={item.loading ? item.loading : false}
disabled={item.disabled ? item.disabled : false}
>
{item.text}
</Button>
)
})}
<Button className='btn-max-w' plain type='primary'>按钮</Button>
<Button className='btn-max-w' plain type='primary' disabled>不可点击的按钮</Button>
<Button className='btn-max-w' plain >按钮</Button>
<Button className='btn-max-w' plain disabled >按钮</Button>
<Button size='mini' type='primary'>按钮</Button>
<Button size='mini' >按钮</Button>
<Button size='mini' type='warn'>按钮</Button>
<Button openType='getPhoneNumber' onGetPhoneNumber="callback">按钮</Button>
</View>
)
}
}

ButtonProps

参数类型默认值必填说明
sizekeyof Sizedefault按钮的大小
typekeyof Typedefault按钮的样式类型
plainbooleanfalse按钮是否镂空,背景色透明
disabledbooleanfalse是否禁用
loadingbooleanfalse名称前是否带 loading 图标
formTypekeyof FormType用于 <form/> 组件,点击分别会触发 <form/> 组件的 submit/reset 事件
openTypeOpenType微信开放能力
hoverClassstringbutton-hover指定按下去的样式类。当 hover-class="none" 时,没有点击态效果
hoverStyleStyleProp<ViewStyle>none由于 RN 不支持 hoverClass,故 RN 端的 Button 组件实现了 hoverStyle属性,写法和 style 类似,只不过 hoverStyle 的样式是指定按下去的样式。
hoverStopPropagationbooleanfalse指定是否阻止本节点的祖先节点出现点击态
hoverStartTimenumber20按住后多久出现点击态,单位毫秒
hoverStayTimenumber70手指松开后点击态保留时间,单位毫秒
langkeyof Lang指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。

生效时机: open-type="getUserInfo"
sessionFromstring会话来源

生效时机:open-type="contact"
sendMessageTitlestring当前标题会话内消息卡片标题

生效时机:open-type="contact"
sendMessagePathstring当前标题会话内消息卡片点击跳转小程序路径

生效时机:open-type="contact"
sendMessageImgstring截图会话内消息卡片图片

生效时机:open-type="contact"
appParameterstring打开 APP 时,向 APP 传递的参数

生效时机:open-type="launchApp"
scope"userInfo" or "phoneNumber"支付宝小程序 scope

生效时机:open-type="getAuthorize"
showMessageCardbooleanfalse显示会话内消息卡片

生效时机:open-type="contact"
publicIdstring生活号 id,必须是当前小程序同主体且已关联的生活号,open-type="lifestyle" 时有效。
templateIdstring or string[]发送订阅类模板消息所用的模板库标题 ID ,可通过 getTemplateLibraryList 获取
当参数类型为 Array 时,可传递 1~3 个模板库标题 ID
subscribeIdstring发送订阅类模板消息时所使用的唯一标识符,内容由开发者自定义,用来标识订阅场景
注意:同一用户在同一 subscribe-id 下的多次授权不累积下发权限,只能下发一条。若要订阅多条,需要不同 subscribe-id
groupIdstring群聊 id
guildIdstring打开频道页面时,传递的频道号
shareTypestring27分享类型集合,请参考下面share-type有效值说明。share-type后续将不再维护,请更新为share-mode
shareModestring['qq', 'qzone']分享类型集合,请参考下面share-mode有效值说明
ariaLabelstring无障碍访问,(属性)元素的额外描述
openIdstring添加好友时,对方的 openid
shareMessageFriendInfostring发送对象的 FriendInfo
shareMessageTitlestring转发标题,不传则默认使用当前小程序的昵称。 FriendInfo
shareMessageImgstring转发显示图片的链接,可以是网络图片路径(仅 QQ CDN 域名路径)或本地图片文件路径或相对代码包根目录的图片文件路径。显示图片长宽比是 5:4FriendInfo
dataAwemeIdstring跳转抖音号个人页,只支持小程序绑定的品牌号、员工号、合作号
dataIsHalfPageboolean是否开启半屏模式
onGetUserInfoCommonEventFunction<onGetUserInfoEventDetail>用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与 Taro.getUserInfo 返回的一致

生效时机: open-type="getUserInfo"
onGetAuthorizeCommonEventFunction支付宝获取会员基础信息授权回调

生效时机:open-type="getAuthorize"
onContactCommonEventFunction<onContactEventDetail>客服消息回调

生效时机:open-type="contact"
onGetPhoneNumberCommonEventFunction<onGetPhoneNumberEventDetail>获取用户手机号回调

生效时机:open-type="getPhoneNumber"
onGetRealTimePhoneNumberCommonEventFunction<onGetRealTimePhoneNumberEventDetail>手机号实时验证回调,open-type="getRealtimePhoneNumber" 时有效
onErrorCommonEventFunction当使用开放能力时,发生错误的回调

生效时机:open-type="launchApp"
onOpenSettingCommonEventFunction<onOpenSettingEventDetail>在打开授权设置页后回调

生效时机:open-type="openSetting"
onLaunchAppCommonEventFunction打开 APP 成功的回调

生效时机:open-type="launchApp"
onChooseAvatarCommonEventFunction获取用户头像回调

生效时机:open-type="chooseAvatar"
onAgreePrivacyAuthorizationCommonEventFunction用户同意隐私协议事件回调,open-type="agreePrivacyAuthorization"时有效
onTapCommonEventFunction点击。
说明: 每点击一次会触发一次事件,建议自行使用代码防止重复点击,可以使用 js 防抖和节流实现。
onFollowLifestyleCommonEventFunction<{ followStatus: true or 1 or 2 or 3; }>当 open-type 为 lifestyle 时有效。
当点击按钮时触发。
event.detail = { followStatus },followStatus 合法值有 1、2、3,其中 1 表示已关注。2 表示用户不允许关注。3 表示发生未知错误;
已知问题:基础库 1.0,当用户在点击按钮前已关注生活号,event.detail.followStatus 的值为 true。
onChooseAddressCommonEventFunction用户点击该按钮时,调起用户编辑收货地址原生界面,并在编辑完成后返回用户选择的地址,从返回参数的 detail 中获取,和 swan.chooseAddress 一样的。和 open-type 搭配使用,使用时机:open-type="chooseAddress"
onChooseInvoiceTitleCommonEventFunction用户点击该按钮时,选择用户的发票抬头,和 swan.chooseInvoiceTitle 一样的。和 open-type 搭配使用,使用时机:open-type="chooseInvoiceTitle"
onLoginCommonEventFunction登录回调,和 open-type 搭配使用,使用时机:open-type="login"。可以通过返回参数的 detail 判断是否登录成功,当 errMsg 为'login:ok'时即为成功。如想获取登录凭证请使用 swan.getLoginCode
onSubscribeCommonEventFunction订阅消息授权回调,和 open-type 搭配使用,使用时机:open-type="subscribe"
onAddFriendCommonEventFunction添加好友的回调
onAddGroupAppCommonEventFunction添加群应用的回调。errCode 错误码:41004(当前用户非管理员或群主,无权操作),41005(超过可添加群应用的群数量)
onOpenAwemeUserProfileCommonEventFunction监听跳转抖音号个人页的回调

生效时机:open-type="openAwemeUserProfile"
onJoinGroupCommonEventFunction<{ errMsg: string; errNo: number; }>加群后触发

API 支持度

API微信小程序百度小程序支付宝小程序抖音小程序QQ 小程序京东小程序H5React NativeHarmony
ButtonProps.size✔️✔️✔️✔️✔️✔️✔️✔️
ButtonProps.type✔️✔️✔️✔️✔️✔️✔️✔️
ButtonProps.plain✔️✔️✔️✔️✔️✔️✔️
ButtonProps.disabled✔️✔️✔️✔️✔️✔️✔️✔️
ButtonProps.loading✔️✔️✔️✔️✔️✔️✔️✔️
ButtonProps.formType✔️✔️✔️✔️✔️✔️
ButtonProps.openType✔️✔️✔️✔️✔️✔️
ButtonProps.hoverClass✔️✔️✔️✔️✔️✔️✔️✔️(支持 hoverStyle 属性,但框架未支持 hoverClass)
ButtonProps.hoverStyle✔️
ButtonProps.hoverStopPropagation✔️✔️✔️✔️✔️✔️
ButtonProps.hoverStartTime✔️✔️✔️✔️✔️✔️✔️✔️
ButtonProps.hoverStayTime✔️✔️✔️✔️✔️✔️✔️✔️
ButtonProps.lang✔️✔️✔️
ButtonProps.sessionFrom✔️✔️
ButtonProps.sendMessageTitle✔️✔️
ButtonProps.sendMessagePath✔️✔️
ButtonProps.sendMessageImg✔️✔️
ButtonProps.appParameter✔️✔️✔️
ButtonProps.scope✔️
ButtonProps.showMessageCard✔️✔️
ButtonProps.publicId✔️✔️
ButtonProps.templateId✔️
ButtonProps.subscribeId✔️
ButtonProps.groupId✔️(通过创建聊天群、查询群信息获取)✔️(打开群资料卡时,传递的群号)
ButtonProps.guildId✔️
ButtonProps.shareType✔️
ButtonProps.shareMode✔️
ButtonProps.ariaLabel✔️
ButtonProps.openId✔️
ButtonProps.shareMessageFriendInfo✔️
ButtonProps.shareMessageTitle✔️
ButtonProps.shareMessageImg✔️
ButtonProps.dataAwemeId✔️
ButtonProps.dataIsHalfPage✔️
ButtonProps.onGetUserInfo✔️✔️✔️✔️✔️
ButtonProps.onGetAuthorize✔️
ButtonProps.onContact✔️✔️✔️
ButtonProps.onGetPhoneNumber✔️✔️✔️✔️✔️
ButtonProps.onGetRealTimePhoneNumber✔️
ButtonProps.onError✔️✔️✔️✔️
ButtonProps.onOpenSetting✔️✔️✔️✔️✔️
ButtonProps.onLaunchApp✔️✔️
ButtonProps.onChooseAvatar✔️
ButtonProps.onAgreePrivacyAuthorization✔️
ButtonProps.onTap✔️
ButtonProps.onFollowLifestyle✔️
ButtonProps.onChooseAddress✔️
ButtonProps.onChooseInvoiceTitle✔️
ButtonProps.onLogin✔️
ButtonProps.onSubscribe✔️
ButtonProps.onAddFriend✔️
ButtonProps.onAddGroupApp✔️
ButtonProps.onOpenAwemeUserProfile✔️
ButtonProps.onJoinGroup✔️

Size

size 的合法值

参数说明
default默认大小
mini小尺寸

Type

type 的合法值

参数说明
primary绿色
default白色
warn红色

FormType

form-type 的合法值

参数说明
submit提交表单
reset重置表单

OpenType

open-type 的合法值

openTypeKeys

open-type 的合法值

参数类型说明
weapp{ contact: any; share: any; getPhoneNumber: any; getRealtimePhoneNumber: any; getUserInfo: any; launchApp: any; openSetting: any; feedback: any; chooseAvatar: any; agreePrivacyAuthorization: any; "getPhoneNumberoragreePrivacyAuthorization": any; "getRealtimePhoneNumberoragreePrivacyAuthorization": any; "getUserInfoorag...
alipay{ share: any; getAuthorize: any; contactShare: any; lifestyle: any; }支付宝小程序专属的 open-type 合法值
参考地址
qq{ share: any; getUserInfo: any; launchApp: any; openSetting: any; feedback: any; openGroupProfile: any; addFriend: any; addColorSign: any; openPublicProfile: any; addGroupApp: any; shareMessageToFriend: any; }QQ 小程序专属的 open-type 合法值
参考地址
tt{ share: any; getPhoneNumber: any; im: any; platformIm: any; navigateToVideoView: any; openAwemeUserProfile: any; openWebcastRoom: any; addCalendarEvent: any; addShortcut: any; joinGroup: any; privateMessage: any; authorizePrivateMessage: any; }TT 小程序专属的 open-type 合法值
参考地址

Lang

lang 的合法值

参数说明
en英文
zh_CN简体中文
zh_TW繁体中文

onGetUserInfoEventDetail

参数类型必填说明
userInfo{ nickName: string; avatarUrl: string; avatar: string; gender: keyof Gender; province: string; city: string; country: string; }
rawDatastring不包括敏感信息的原始数据 JSON 字符串,用于计算签名
signaturestring使用 sha1(rawData + sessionkey) 得到字符串,用于校验用户信息
encryptedDatastring包括敏感数据在内的完整用户信息的加密数据
ivstring加密算法的初始向量
errMsgstring
cloudIDstring敏感数据对应的云 ID,开通云开发的小程序才会返回,可通过云调用直接获取开放数据,详细见云调用直接获取开放数据

Gender

性别的合法值

参数说明
0未知
1
2

onContactEventDetail

参数类型说明
errMsgstring
pathstring小程序消息指定的路径
queryRecord<string, any>小程序消息指定的查询参数

onGetPhoneNumberEventDetail

参数类型必填说明
errMsgstring
encryptedDatastring包括敏感数据在内的完整用户信息的加密数据
ivstring加密算法的初始向量
codestring动态令牌。可通过动态令牌换取用户手机号。
参考地址
signstring签名信息,如果在开放平台后台配置了加签方式后有此字段

API 支持度

API微信小程序支付宝小程序H5React NativeHarmony
onGetPhoneNumberEventDetail.sign✔️

onGetRealTimePhoneNumberEventDetail

参数类型
codestring

onOpenSettingEventDetail

参数类型
errMsgstring
authSettingRecord<string, boolean>