小程序开放平台

文档中心
表单组件
button
checkbox
checkbox-group
editor
form
input
label
picker
picker-view
picker-view-column
radio
radio-group
slider
switch
textarea
基础内容
媒体组件
地图
视图容器
导航组件
开放能力
画布

button

开发
>
组件
>
表单组件
>
button
>
更新时间:2025-04-14 15:43:33

button

button组件

属性
类型
默认值
必填
说明
sizestringdefault按钮的大小
typestringdefault按钮的样式类型
plainbooleanfalse按钮是否镂空,背景色透明
disabledbooleanfalse是否禁用
loadingbooleanfalse名称前是否带 loading 图标
form-typestring用于 form 组件,点击分别会触发 form 组件的 submit/reset 事件
open-typestring小红书开放能力
contact-typestring客服类型,默认值 seller
contact-idstringcontact-type 对应的key。contact-type 为 seller 时非必传;goods 时第三方商品 id;order时第三方订单 id。open-type=contact时有效
hover-classstringbutton-hover指定按钮按下去的样式类。当 hover-class='none' 时,没有点击态效果
hover-stop-propagationbooleanfalse指定是否阻止本节点的祖先节点出现点击态
hover-start-timenumber,string20按住后多久出现点击态,单位毫秒
hover-stay-timenumber,string70手指松开后点击态保留时间,单位毫秒
bindgetuserinfoeventhandle用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与xhs.getUserInfo返回的一致,open-type='getUserInfo'时有效
bindgetphonenumbereventhandle获取用户手机号回调,open-type=getPhoneNumber时有效
bindopensettingeventhandle在打开授权设置页后回调,open-type=openSetting时有效

size 的合法值

说明
default默认大小
mini小尺寸

type 的合法值

说明
primary绿色
default白色
warn红色

form-type 的合法值

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

open-type 的合法值

说明
share触发用户转发, 使用前建议先阅读 使用指引
getPhoneNumber获取用户手机号,可以从 bindgetphonenumber 回调中获取到用户信息, 具体说明
getUserInfo获取用户信息,可以从bindgetuserinfo 回调中获取到用户信息
openSetting打开授权设置页
contact打开客服会话

contact-type 的合法值

说明
seller等于 seller 时,contact-id 非必传
goods等于 goods 时,contact-id 是第三方商品 id
order等于 order 时,contact-id 是第三方订单 id

扫码预览

组件示例

 <view class="page-body">
    <view class="btn-area" id="buttonContainer">
      <button type="primary">页面主操作 Normal</button>
      <button type="primary" loading="true">页面主操作 Loading</button>
      <button type="primary" disabled="true">页面主操作 Disabled</button>
      <button type="default">页面次要操作 Normal</button>
      <button type="default" disabled="true">页面次要操作 Disabled</button>
      <button type="warn">警告类操作 Normal</button>
      <button type="warn" disabled="true">警告类操作 Disabled</button>
      <view class="button-sp-area">
        <button type="primary" plain="true">按钮</button>
        <button type="primary" disabled="true" plain="true">不可点击的按钮</button>
        <button type="default" plain="true">按钮</button>
        <button type="default" disabled="true" plain="true">按钮</button>
        <button class="mini-btn" type="primary" size="mini">按钮</button>
        <button class="mini-btn" type="default" size="mini">按钮</button>
        <button class="mini-btn" type="warn" size="mini">按钮</button>
      </view>
      <button type="primary" open-type="contact" bindcontact="handleContact" show-message-card="{{true}}" send-message-title="临时会话">打开客服会话</button>
      <button type="primary" open-type="share">触发用户转发</button>
      <button type="primary" open-type="getPhoneNumber" bindgetphonenumber="handleGetPhoneNumber">获取用户手机号</button>
      <button type="primary" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="handleGetUserInfo">获取用户信息</button>
      <button type="primary" open-type="openSetting" bindopensetting="handleOpenSetting">打开设置授权页</button>
      <button type="primary" open-type="feedback">打开意见反馈</button>
    </view>
  </view>