Skip to main content
Version: 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>
</View>
)
}
}

ButtonProps

参数类型默认值必填说明
size"default" | "mini"default按钮的大小
type"default" | "primary" | "warn"default按钮的样式类型
plainbooleanfalse按钮是否镂空,背景色透明
disabledbooleanfalse是否禁用
loadingbooleanfalse名称前是否带 loading 图标
formType"submit" | "reset"用于 <form/> 组件,点击分别会触发 <form/> 组件的 submit/reset 事件
openType"contact" | "contactShare" | "share" | "getRealnameAuthInfo" | "getAuthorize" | "getPhoneNumber" | "getUserInfo" | "lifestyle" | "launchApp" | "openSetting" | "feedback"微信开放能力
hoverClassstringbutton-hover指定按下去的样式类。当 hover-class="none" 时,没有点击态效果
hoverStylestringnone由于 RN 不支持 Class,故 RN 端的 Button 组件实现了 hoverStyle属性,写法和 style 类似,只不过 hoverStyle 的样式是指定按下去的样式。
hoverStopPropagationbooleanfalse指定是否阻止本节点的祖先节点出现点击态
hoverStartTimenumber20按住后多久出现点击态,单位毫秒
hoverStayTimenumber70手指松开后点击态保留时间,单位毫秒
lang"en" | "zh_CN" | "zh_TW"指定返回用户信息的语言,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" | "phoneNumber"支付宝小程序 scope

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

生效时机:open-type="contact"
onGetUserInfoBaseEventOrigFunction<onGetUserInfoEventDetail>用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与 Taro.getUserInfo 返回的一致

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

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

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

生效时机:open-type="getphonenumber"
onGetRealnameAuthInfoBaseEventOrigFunction<any>获取用户实名

生效时机:open-type="getRealnameAuthInfo"
onErrorBaseEventOrigFunction<any>当使用开放能力时,发生错误的回调

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

生效时机:open-type="openSetting"
onLaunchappBaseEventOrigFunction<any>打开 APP 成功的回调

生效时机:open-type="launchApp"

API 支持度

API微信小程序支付宝小程序H5React Native
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.onGetUserInfo✔️
ButtonProps.onGetAuthorize✔️
ButtonProps.onContact✔️
ButtonProps.onGetPhoneNumber✔️
ButtonProps.onGetRealnameAuthInfo✔️
ButtonProps.onError✔️
ButtonProps.onOpenSetting✔️
ButtonProps.onLaunchapp✔️

size

size 的合法值

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

type

type 的合法值

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

formType

form-type 的合法值

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

openType

open-type 的合法值

参数说明
contact打开客服会话,如果用户在会话中点击消息卡片后返回小程序,可以从 bindcontact 回调中获得具体信息
参考地址
contactShare
share触发用户转发,使用前建议先阅读使用指引
参考地址
getRealnameAuthInfo
getAuthorize
getPhoneNumber获取用户手机号,可以从 bindgetphonenumber 回调中获取到用户信息
Vue3 example: <button @getphonenumber="callback" />
参考地址
getUserInfo获取用户信息,可以从 bindgetuserinfo 回调中获取到用户信息
lifestyle
launchApp打开APP,可以通过app-parameter属性设定向APP传的参数
参考地址
openSetting打开授权设置页
feedback打开“意见反馈”页面,用户可提交反馈内容并上传日志,开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容

lang

lang 的合法值

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

onGetUserInfoEventDetail

参数类型说明
userInfo{ nickName: string; avatarUrl: string; gender: 0 | 1 | 2; province: string; city: string; country: string; }
rawDatastring不包括敏感信息的原始数据 JSON 字符串,用于计算签名
signaturestring使用 sha1(rawData + sessionkey) 得到字符串,用于校验用户信息
encryptedDatastring包括敏感数据在内的完整用户信息的加密数据
ivstring加密算法的初始向量
errMsgstring

gender

性别的合法值

参数说明
0未知
1
2

onContactEventDetail

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

onGetPhoneNumberEventDetail

参数类型说明
errMsgstring
encryptedDatastring包括敏感数据在内的完整用户信息的加密数据
ivstring加密算法的初始向量

onOpenSettingEventDetail

参数类型
errMsgstring
authSettingRecord<string, boolean>

API 支持度

API微信小程序H5React Native
Button✔️✔️✔️