Skip to main content
Version: 2.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 回调中获取到用户信息
参考地址
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✔️✔️✔️