微信小程序按钮设置技巧，从入门到精通全攻略

做微信小程序的，谁没跟button这个组件打过交道？但说真的，很多人用了半年一年，还只停留在“放个按钮、绑个事件”的初级阶段。我见过太多开发者在群里问“为什么我的按钮样式跟设计稿差那么多”“为什么点击没反应”，其实问题都出在最基础的属性设置上。button这东西看着简单，真要玩透，得从它的默认样式、开放能力、交互反馈到自定义模板，一层层拆开来看。

先说说最容易被忽略的默认样式。微信小程序的button组件，自带了一堆默认属性：圆角、边框、背景色、字号，甚至还有hover-class的默认值。很多人一上来就急着写自定义样式，结果发现怎么调都盖不过默认样式。原因很简单，微信小程序组件的样式优先级跟普通标签不一样，button作为原生组件，它的默认样式是通过伪类、伪元素和内置class来实现的。比如那个默认的灰色背景，其实是`.wx-button`这个class在起作用。你要想彻底改掉，得用`!important`去覆盖，或者直接在app.wxss里把默认样式重置掉。我自己的习惯是，在项目初始化的时候，就把button的默认样式清空：`border: none; background: none; padding: 0;`。这样一来，后面每个页面里的按钮，都是从零开始构建，不会有任何“脏数据”干扰。

再往下聊，就得提到button的几个核心属性：size、type、plain、loading、disabled。size控制大小，有default和mini两种，但实际开发中你会发现，这两个尺寸往往都不够灵活。大多数UI设计稿里，按钮宽度是自适应的，高度有固定值，比如44px、48px。那怎么办？直接不设size，自己写宽高。type属性控制颜色主题，有default、primary、warn三种，但说句实话，这三个颜色真不一定跟你的设计稿匹配。我见过有人硬凑primary的颜色去对接设计稿，结果整个页面看起来脏兮兮的。不如直接不用type，自己写背景色和文字色。plain属性把按钮变成镂空样式，但它的实现方式是通过把背景变透明、加边框，如果你已经自定义了样式，这个属性就没啥用了。loading和disabled是使用频率最高的两个属性，前者用来做提交状态的反馈，后者用来做条件限制。但有个坑：disabled状态下，按钮的点击事件不会触发，但hover-class效果可能还会残留。所以如果你要做一个禁用态的按钮，最好同时把hover-class设置成none。

说到交互反馈，很多人只知道一个bindtap。但button组件其实提供了好几个事件：bindgetuserinfo、bindcontact、bindgetphonenumber、binderror、bindopensetting，这些都是跟微信开放能力绑定的。比如获取用户手机号，你得在button上设置open-type="getPhoneNumber"，然后监听bindgetphonenumber事件。这里有个很多人踩过的坑：真机调试时，bindgetphonenumber回调里拿到的encryptedData和iv，需要后端解密才能拿到真实手机号，前端是看不到明文号码的。同样的道理，open-type="getUserInfo"在2021年之后也改了规则，现在获取用户头像昵称，得用头像昵称填写组件，而不是靠button弹授权框了。这些变化，文档里都有，但很多人不看，上来就复制旧代码，结果线上炸了。

再往深了说，button组件其实可以玩出很多花样。比如你把button的display设成flex，再在里面放icon和text，就能做出带图标的按钮。配合微信的iconfont或者自定义图片，效果不比原生组件差。还有人用button来做弹窗里的确认取消按钮，但弹窗里的按钮通常需要关闭弹窗并执行操作，这时候就得注意事件冒泡。如果你在弹窗的蒙层上绑了tap事件用来关闭弹窗，按钮的tap事件必须用catchtap而不是bindtap，否则点击按钮的同时，事件会冒泡到蒙层，弹窗关闭，操作却没执行。这个小细节，能卡住新手半天。

再说说性能优化。button组件虽然小，但如果一个页面里有十几个按钮，比如表单页面、商品列表页，渲染压力还是有的。特别是每个按钮都绑了不同的开放能力事件，比如有的获取手机号、有的分享、有的跳转，事件监听过多会影响页面交互的流畅度。我的做法是：对于静态按钮，比如跳转链接、提交表单，尽量用navigator组件或者直接绑tap事件，不要滥用open-type。对于需要频繁改变状态的按钮，比如点赞、收藏，用button配合data-*自定义属性来传递参数，而不是每个按钮都写一个独立的事件处理函数。比如在wxml里写``，然后在js里通过`e.currentTarget.dataset.id`拿到参数，这样所有按钮共用同一个函数，性能会好很多。

聊聊自定义组件里的button。很多项目会封装一个通用的按钮组件，比如my-button，里面套一个原生button。这时候要注意：原生button的样式穿透问题。如果你在my-button的wxss里写了`.my-button .wx-button`，可能会发现样式没生效，因为原生组件的样式隔离机制。解决方法是用`:host`选择器，或者在自定义组件上设置`styleIsolation: 'shared'`。还有一个更简单的方法：在自定义组件的wxml里，直接在button标签上写内联样式，或者用`externalClasses`把样式从外部传入。我比较推荐后者，因为外部传入的样式类可以复用，而且不会污染全局。

从入门到精通，其实就是一个“拆解再重组”的过程。你先把button的默认属性、事件、样式机制全拆开看明白，然后再根据实际需求，一个个重新组装。别怕麻烦，微信小程序的button组件虽然基础，但它背后承载了授权、支付、分享这些核心功能，每一个属性、每一个事件，都可能影响到用户体验和业务流程。我见过一个电商小程序，就因为按钮的disabled状态没处理好，用户重复提交订单，导致库存超卖。也见过一个工具类小程序，因为button的open-type用错了，导致用户无法正常登录。这些坑，其实都藏在你每天都会写的那个button里。

原文来自：小程序开发

下一篇：微信公众号开发新突破，手把手教你搭建专属小程序 上一篇：微信小程序开发实战，从零开始打造专属App