微信小程序（组件 -- 表单：按钮）

最新推荐文章于 2025-11-17 04:11:38 发布

原创最新推荐文章于 2025-11-17 04:11:38 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

29 篇文章

订阅专栏

本文深入解析小程序中的button按钮组件，涵盖其属性、样式、微信开放能力及hover效果，帮助开发者全面掌握button组件的使用技巧。

一、button按钮组件

button按钮属性

属性	类型	默认值	是否必填	作用
size	string	default	否	按钮的大小
type	string	default	否	按钮的样式类型
plain	boolean	false	否	按钮是否镂空，背景色透明
disabled	boolean	false	否	是否禁用
loading	boolean	false	否	名称前是否带 loading 图标

button按钮组件–按钮大小size属性值

值	说明
default	默认大小
mini	小尺寸

<button size="default">默认按钮</button>
<button size="mini">迷你按钮</button>

在这里插入图片描述
查看源码，分析button默认样式与小尺寸button

由此可以分析出button按钮的边框是由伪元素button:after设置的。
所以，若想去除小程序按钮默认边框，给button设置border:none无效，只能通过伪元素去除默认边框。

查看源码，小尺寸button按钮样式属性
在这里插入图片描述

按钮type样式类型

值	说明
primary	绿色
default	白色
warn	红色

<button type="primary">主要按钮样式类型</button>
<button type="default">默认按钮样式类型</button>
<button type="warn">警告按钮样式类型</button>

在这里插入图片描述

按钮plain是否镂空

<view>按钮plain是否镂空</view>
<button plain="true" type="primary">主要按钮样式类型</button>
<button plain="true" type="default">默认按钮样式类型</button>
<button plain="true" type="warn">警告按钮样式类型</button>

/**源码 */
button[plain] {
	color: #353535;
	border: 1px solid #353535;
	background-color: transparent;
}

在这里插入图片描述

按钮是否禁用

<button disabled="true" type="primary">主要按钮样式类型</button>
<button disabled="true" type="default">默认按钮样式类型</button>
<button disabled="true" type="warn">警告按钮样式类型</button>

/**源码 */
button[disabled][type=primary] {
	background-color: #9ed99d;

}
button[disabled] {
	color: rgba(255,255,255,.6);
}

在这里插入图片描述

按钮是否显示loading图标

<view>按钮是否显示loading图标</view>
<button loading="true" type="primary">主要按钮样式类型</button>
<button loading="true" type="default">默认按钮样式类型</button>
<button loading="true" type="warn">警告按钮样式类型</button>

/**源码 */
button[loading][type=primary] {
	color: rgba(255,255,255,.6);
	background-color: #179b16;
}

在这里插入图片描述
分析按钮显示loading图标源码

::before实现loading样式，::after实现按钮基本样式（解决1px适配问题）

按钮微信开放能力

open-type	string	无	否	微信开放能力

微信小程序开放了很多端口，实现多种功能，例如客服会话、转发、获取用户信息及手机号、授权页面、意见反馈等。

open-type —微信开放能力常用属性值，篇幅问题，详见下节

属性值	作用
contact	打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息
share	触发用户转发
getPhoneNumber	获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息
getUserInfo	获取用户信息，可以从bindgetuserinfo回调中获取到用户信息
openSetting	打开授权设置页，可以从bindopensetting回调中获取相关设置
feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容

button按钮hover类属性

属性	类型	默认值	是否必填	作用
hover-class	string	none	否	指定按下去的样式类
hover-stop-propagation	boolean	false	否	指定是否阻止冒泡
hover-start-time	number	20	否	按住后多久出现点击态，单位毫秒
hover-stay-time	number	70	否	手指松开后点击态保留时间，单位毫秒