《uni-app》表单组件-Button按钮

本文分享的button组件为uni-app的内置组件button，非扩展组件，两者在用法上其实大同小异，只是扩展组件的属性更多…没有本质上的区别～

一. 简介

Button，按钮，图形化界面基础组件之一，常用于响应用户的点击事件、触发业务逻辑操作时使用；

二. 基础用法

按钮基础用法如下：

<button>这是一个按钮</button>

在基础用法下，uni-app将 启用一组内置在button组件内部的默认参数（包括主题，尺寸，状态等等），其表现形态 效果图 如下：

三. 按钮主题色

3.1 说明

uni-app官方一共内置了 三组主题色 供用户直接使用，分别是：primary，default，warn，使用方式则是通过 属性的方式 传入，属性关键词为 type

参数	说明	类型	可选值	默认值
type	按钮的主题色	string	primary｜ default ｜ warn	default

不同的type值将对应不同的主题色，示例代码如下：

<!-- primary -->
<button type="primary">primary</button>

<!-- default -->
<button type="default">default</button>

<!-- warn -->
<button type="warn">warn</button>

其表现形态 效果图 如下：

我们在基础用法中有一个 不带任何参数的示例，虽然使用时不带任何参数，但在组件内部主题色其实是有 默认值 的，默认值为 default，也就是说，当我们不使用type属性的时候，在其内部完全等同于使用了default

<!-- default -->
<button type="default">default</button>

<!-- 完全等同于type="default" -->
<button>default</button>

3.2 平台差异

另外，uni-app是一个跨平台的解决方案，因此 某些属性在编译后存在一定的平台差异，在主题色这一块差异的体现主要在 primary 这个属性，type="primary" 的button在最终编译后由于平台的不同会根据平台定义primary展示对应的颜色，具体差异如下：

微信小程序、360小程序	App、H5、百度小程序、支付宝小程序、飞书小程序、快应用	字节跳动小程序	QQ小程序
绿色	蓝色	红色	浅蓝色

也就是说，我们在uni-app中将button的设置成primary，在 微信小程序 中按钮会显示成 绿色，在 qq小程序中 会显示成 浅蓝色，在 字节跳动小程序 中会显示成 红色；

四. size属性

size属性，用于控制button的尺寸大小，和主题色属性一样，它作为一个属性直接作用于button组件，并且值为string类型，uni-app官方一共内置了两种尺寸：default 和 mini，具体如下：

参数	说明	类型	可选值	默认值
size	按钮的大小尺寸	string	default｜ mini	default

我们以 type=“default”，且 不同尺寸为例，代码如下

<!-- default，默认大小 -->
<button type="default">默认default尺寸</button>

<!-- default，mini尺寸大小 -->
<button type="default" size="mini">默认mini尺寸</button>

其表现形态的 效果图 如下：

和主题色一样，如果不传入size属性，那么等同于值为 default

<!-- default，默认大小 -->
<button type="default">默认default尺寸</button>

<!-- default，和不传size完全等同 -->
<button type="default" size="default">默认default尺寸</button>

五. plain属性

plain属性，用于控制按钮是否处于镂空，或者说使用了plain属性的按钮将处于 幽灵模式，即 内容反色，背景变为透明，该种类常常作用在一些有底色的DOM上，说明如下：

参数	说明	类型	可选值	默认值
plain	控制按钮是否镂空	boolean	true｜ false	false

演示代码如下：

<!-- default，plain -->
<button type="primary" plain>primary+plain</button>

<!-- default，plain -->
<button type="default" plain>default+plain</button>

<!-- warn，plain -->
<button type="warn" plain>warn+plain</button>

其表现形态展示的 效果图 如下：

六. disabled禁用属性

disabled属性，用于控制按钮是否可点击，当按钮处于disabled状态下时，按钮的形态将 置灰 且用户 不可再进行点击操作

参数	说明	类型	可选值	默认值
disabled	控制按钮是否可点击	boolean	true｜ false	false

代码示例如下：

<!-- default，disabled -->
<button type="primary" disabled>primary+disabled</button>

<!-- default，disabled -->
<button type="default" disabled>default+disabled</button>

<!-- warn，disabled -->
<button type="warn" disabled>warn+disabled</button>

其表现形态展示的 效果图 如下：

七. loading属性

loading属性，该属性用于控制按钮是否处于loading状态，严格的来说，loading状态算是一种组合状态，它主要由 disabled 加上 loading动画 组合而成，和disabled属性不同的是，uni-app中loading属性的disabled并不会置灰按钮，具体说明如下

参数	说明	类型	可选值	默认值
loading	名称前是否带 loading 图标	boolean	true｜ false	false

loading属性常用于等待阶段，比如：用户注册时，当用户填写完信息并点击注册按钮后，此时信息已被发送至后台，为了保证用户不进行重复点击注册按钮，且希望通过交互效果告知用户注册已经正在处理中了，那么就可以使用loading属性；

<!-- default，loading -->
<button type="primary" :loading="true">primary+loading</button>

<!-- default，disabled -->
<button type="default" :loading="true">default+loading</button>

<!-- warn，disabled -->
<button type="warn" :loading="true">warn+loading</button>

其表现形态展示的 效果图 如下：

八. 事件机制

在uni-app中的事件机制完全遵循于Vue的语法，那么理所当然的button的事件也遵循Vue的语法，比如，我们要为按钮添加一个点击事件，点击后提示一个alert弹窗，那么代码如下

<template>
	<view class="buton-conatiner">
		<!-- 基础用法 -->
		<view class="button-group">
			<h4>默认按钮</h4>
			<!-- 默认按钮组件 -->
			<button @click="handleClick">这是一个按钮</button>
		</view>
	</view>
</template>

<script>
export default {
	methods: {
		handleClick() {
			alert('触发点击');
		}
	}
};
</script>

我们看到 点击事件的绑定是遵循Vue的语法的，通过指令 @ 或者 v-on 的语法，如下

九. open-type开放能力

open-type，开放能力，uni-app作为跨端的解决方案，必然有对应各个小程序的open-type，可能会有小伙伴问，什么是open-type，简单的说，就是封装好的一些公共能力，这些能力可以快速的协助我们完成业务需求，比如获取用户的手机号码，分享转发等等；
uni-app的open-type值综合了众多小程序，用法与原版大致相似，最主要的区别还是语法，毕竟语法上uni-app遵循的是Vue的语法，举个例子吧，我们以微信小程序为例，获取用户的手机号码，我们看一下在 uni-app中书写后编译运行结果 以及 在原版微信小程序开发者工具中的运行结果；

9.1 uni-app

uni-app中我们声明了一个 open-type，值为 getPhoneNumber 意思为获取手机号码，之后绑定了一个 自定义事件getPhoneNumber 取得点击时的值并打印，具体代码如下，：

<!-- 默认按钮组件 -->
<button 
  open-type="getPhoneNumber" 
  @getphonenumber="decryptPhoneNumber">
  获取用户手机
</button>

<script>
export default {
	methods: {
		decryptPhoneNumber(e) {
			console.log(e);
		}
	}
};
</script>

执行编译，并运行在微信小程序开发者工具中，运行路径如下：运行 -> 运行到小程序模拟器 -> 微信开发者工具：

点击按钮后，成功在控制台进行了打印，打印结果如下：

从结果看，确实已经编译成微信小程序对应的open-type了；

9.2 微信小程序原版

接着，我们看一下在微信小程序中的实现代码，如下：

<!-- 默认按钮组件 -->
<button 
  open-type="getPhoneNumber" 
  bind:getphonenumber="getPhoneNumber">
  这是一个按钮
</button>

Page({
  data: {},
  getPhoneNumber(e){
    console.log(e)
  },
})

代码展示效果如下：

从截图中的结果来看，uni-app与微信小程序实现的getPhoneNumber效果完全一致；

9.3 代码对比

为了更好的了解两者代码上的书写差异，我们在对比一下

<!-- uni-app -->
<button 
  open-type="getPhoneNumber" 
  @getphonenumber="decryptPhoneNumber">
  获取用户手机
</button>

<!-- 微信小程序 -->
<button 
  open-type="getPhoneNumber" 
  bind:getphonenumber="getPhoneNumber">
  这是一个按钮
</button>

代码确实非常接近，最大的区别就是 自定义事件 了，uni-app中使用的是 Vue的语法绑定的事件，而在微信小程序中则是 原生的bind事件捕捉机制；

9.4 open-type有效值

除了 getPhoneNumber 之外，uni-app还有非常多的 open-type有效值，这些值存在平台上的一些差异，毕竟不同的平台API并不是完全一致的，具体如下，就不一一介绍了，有兴趣的小伙伴可以挑感兴趣的试试：

值	说明	平台差异说明
feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志	App、微信小程序、QQ小程序
share	触发用户转发	微信小程序、百度小程序、支付宝小程序、字节跳动小程序、飞书小程序、QQ小程序、快手小程序、京东小程序、360小程序
getUserInfo	获取用户信息，可以从@getuserinfo回调中获取到用户信息	微信小程序、百度小程序、QQ小程序、快手小程序、京东小程序、360小程序
contact	打开客服会话，如果用户在会话中点击消息卡片后返回应用，可以从 @contact 回调中获得具体信息	微信小程序、百度小程序、快手小程序
getPhoneNumber	获取用户手机号，可以从@getphonenumber回调中获取到用户信息	微信小程序、百度小程序、字节跳动小程序、支付宝小程序、快手小程序、京东小程序。
launchApp	小程序中打开APP，可以通过app-parameter属性设定向APP传的参数	微信小程序、QQ小程序、快手小程序、京东小程序
openSetting	打开授权设置页	微信小程序、QQ小程序、百度小程序、快手小程序、京东小程序、360小程序
chooseAvatar	获取用户头像，可以从@chooseavatar回调中获取到头像信息	微信小程序2.21.2版本+
getAuthorize	支持小程序授权	支付宝小程序
lifestyle	关注生活号	支付宝小程序
contactShare	分享到通讯录好友	支付宝小程序基础库1.11.0版本+
openGroupProfile	呼起QQ群资料卡页面，可以通过group-id属性设定需要打开的群资料卡的群号，同时manifest.json中必须配置groupIdList	QQ小程序基础库1.4.7版本+
openGuildProfile	呼起频道页面，可以通过guild-id属性设定需要打开的频道ID	QQ小程序基础库1.46.8版本+
openPublicProfile	打开公众号资料卡，可以通过public-id属性设定需要打开的公众号资料卡的号码，同时manifest.json中必须配置publicIdList	QQ小程序基础库1.12.0版本+
shareMessageToFriend	在自定义开放数据域组件中,向指定好友发起分享据	QQ小程序基础库1.17.0版本+
addFriend	添加好友， 对方需要通过该小程序进行授权，允许被加好友后才能调用成功用户授权	QQ小程序
addColorSign	添加彩签，点击后添加状态有用户提示，无回调	QQ小程序基础库1.10.0版本+
addGroupApp	添加群应用（只有管理员或群主有权操作），添加后给button绑定@addgroupapp事件接收回调数据	QQ小程序基础库1.16.0版本+
addToFavorites	收藏当前页面，点击按钮后会触发Page.onAddToFavorites方法	QQ小程序基础库1.19.0版本+
chooseAddress	选择用户收货地址，可以从@chooseaddress回调中获取到用户选择的地址信息	百度小程序3.160.3版本+
chooseInvoiceTitle	选择用户发票抬头，可以从@chooseinvoicetitle回调中获取到用户选择发票抬头信息	百度小程序3.160.3版本+
login	登录，可以从@login回调中确认是否登录成功	百度小程序3.230.1版本+
subscribe	订阅类模板消息，需要用户授权才可发送	百度小程序
favorite	触发用户收藏	快手小程序
watchLater	触发用户稍后再看	快手小程序
openProfile	触发打开用户主页	快手小程序

十. 小结

本文主要分享了uni-app中内置组件button的一些用法，包括 属性的使用，事件机制 以及 一些开放能力，我们知道button是图形化界面中的基石之一，它承担了用户与系统之间绝大多数的交互，随着时代的发展，用户对于界面的要求越来越高，不管是界面的美观还是交互逻辑的合理性；

在保证界面质量的要求下，如何提高开发效率逐渐成为了开发的一大难题，时代的答案则是 组件的高度封装来解决，将常用的功能，属性统统进行封装，就如同uni-app中的button组件，它内置了主题，大小，loading等属性，在使用的时候简单的设置即可完成期望的功能和交互；

(PS：都已经看到这里了，点个赞，求个关注吧，万分感谢～)