Button

按钮

参考文档

类型

  1. ComponentType<ButtonProps>

示例代码

  • React
  • Vue
  1. export default class PageButton extends Component {
  2. state = {
  3. btn: [
  4. {
  5. text: '页面主操作 Normal',
  6. size: 'default',
  7. type: 'primary'
  8. },
  9. {
  10. text: '页面主操作 Loading',
  11. size: 'default',
  12. type: 'primary',
  13. loading: true,
  14. },
  15. {
  16. text: '页面主操作 Disabled',
  17. size: 'default',
  18. type: 'primary',
  19. disabled: true,
  20. },
  21. {
  22. text: '页面次要操作 Normal',
  23. size: 'default',
  24. type: 'default'
  25. },
  26. {
  27. text: '页面次要操作 Disabled',
  28. size: 'default',
  29. type: 'default',
  30. disabled: true,
  31. },
  32. {
  33. text: '警告类操作 Normal',
  34. size: 'default',
  35. type: 'warn'
  36. },
  37. {
  38. text: '警告类操作 Disabled',
  39. size: 'default',
  40. type: 'warn',
  41. disabled: true,
  42. }
  43. ]
  44. }
  45. render () {
  46. return (
  47. <View className='container'>
  48. {this.state.btn.map(item => {
  49. return (
  50. <Button
  51. size={item.size ? item.size : ''}
  52. type={item.type ? item.type : ''}
  53. loading={item.loading ? item.loading : false}
  54. disabled={item.disabled ? item.disabled : false}
  55. >
  56. {item.text}
  57. </Button>
  58. )
  59. })}
  60. <Button className='btn-max-w' plain type='primary'>按钮</Button>
  61. <Button className='btn-max-w' plain type='primary' disabled>不可点击的按钮</Button>
  62. <Button className='btn-max-w' plain >按钮</Button>
  63. <Button className='btn-max-w' plain disabled >按钮</Button>
  64. <Button size='mini' type='primary'>按钮</Button>
  65. <Button size='mini' >按钮</Button>
  66. <Button size='mini' type='warn'>按钮</Button>
  67. </View>
  68. )
  69. }
  70. }
  1. <template>
  2. <view class="container">
  3. <button
  4. v-for="item in btn"
  5. :size="item.size ? item.size : ''"
  6. :type="item.type ? item.type : ''"
  7. :loading="item.loading ? item.loading : false"
  8. :disabled="item.disabled ? item.disabled : false"
  9. >
  10. {{ item.text }}
  11. </button>
  12. <button class="btn-max-w" :plain="true" type="primary">按钮</button>
  13. <button class="btn-max-w" :plain="true" type="primary" :disabled="true">不可点击的按钮</button>
  14. <button class="btn-max-w" :plain="true">按钮</button>
  15. <button class="btn-max-w" :plain="true" :disabled="true">按钮</button>
  16. <button size="mini" type="primary">按钮</button>
  17. <button size="mini" >按钮</button>
  18. <button size="mini" type="warn">按钮</button>
  19. </view>
  20. </template>
  21. <script>
  22. export default {
  23. data() {
  24. return {
  25. btn: [
  26. {
  27. text: '页面主操作 Normal',
  28. size: 'default',
  29. type: 'primary'
  30. },
  31. {
  32. text: '页面主操作 Loading',
  33. size: 'default',
  34. type: 'primary',
  35. loading: true,
  36. },
  37. {
  38. text: '页面主操作 Disabled',
  39. size: 'default',
  40. type: 'primary',
  41. disabled: true,
  42. },
  43. {
  44. text: '页面次要操作 Normal',
  45. size: 'default',
  46. type: 'default'
  47. },
  48. {
  49. text: '页面次要操作 Disabled',
  50. size: 'default',
  51. type: 'default',
  52. disabled: true,
  53. },
  54. {
  55. text: '警告类操作 Normal',
  56. size: 'default',
  57. type: 'warn'
  58. },
  59. {
  60. text: '警告类操作 Disabled',
  61. size: 'default',
  62. type: 'warn',
  63. disabled: true,
  64. }
  65. ]
  66. }
  67. }
  68. }
  69. </script>

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✔️✔️✔️