Skip to main content
Version: 下个版本

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​

参数类型默认值必填说明
sizekeyof Sizedefault否按钮的大小
typekeyof Typedefault否按钮的样式类型
plainbooleanfalse否按钮是否镂空，背景色透明
disabledbooleanfalse否是否禁用
loadingbooleanfalse否名称前是否带 loading 图标
formTypekeyof FormType否用于 <form/> 组件，点击分别会触发 <form/> 组件的 submit/reset 事件
openTypeOpenType否微信开放能力
hoverClassstringbutton-hover否指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hoverStyleStyleProp<ViewStyle>none否由于 RN 不支持 Class，故 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"
businessIdstring否微信小程序子商户能力中，添加 business-id 字段指向子商户

生效时机：open-type="contact"
scope"userInfo" or "phoneNumber"否支付宝小程序 scope

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

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

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

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

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

生效时机：open-type="getphonenumber"
onChooseAvatarCommonEventFunction<onChooseAvatarEventDetail>否获取头像信息

生效时机：open-type="chooseavatar"
onGetRealnameAuthInfoCommonEventFunction否获取用户实名

生效时机：open-type="getRealnameAuthInfo"
onErrorCommonEventFunction否当使用开放能力时，发生错误的回调

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

生效时机：open-type="openSetting"
onLaunchappCommonEventFunction否打开 APP 成功的回调

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

API 支持度​

API微信小程序支付宝小程序QQ 小程序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.businessId✔️
ButtonProps.scope✔️
ButtonProps.onGetUserInfo✔️
ButtonProps.onChooseAvatar✔️
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 的合法值

openTypeKeys​

open-type 的合法值

参数类型说明
weapp{ contact: any; share: any; getPhoneNumber: any; getUserInfo: any; chooseavatar: any; getRealnameAuthInfo: any; launchApp: any; openSetting: any; feedback: any; }
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 合法值
参考地址

Lang​

lang 的合法值

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

onGetUserInfoEventDetail​

参数类型必填说明
userInfo{ nickName: string; avatarUrl: 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加密算法的初始向量

onOpenSettingEventDetail​

参数类型
errMsgstring
authSettingRecord<string, boolean>

onChooseAvatarEventDetail​

参数类型说明
avatarUrlstring用户头像的临时链接