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

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

一. 简介

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

二. 基础用法

按钮基础用法如下：

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

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

三. 按钮主题色

3.1 说明

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

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

<button type="primary">primarybutton>


<button type="default">defaultbutton>


<button type="warn">warnbutton>
1
2
3
4
5
6
7
8

其表现形态 效果图 如下：

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

<button type="default">defaultbutton>


<button>defaultbutton>
1
2
3
4
5

3.2 平台差异

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

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

四. size属性

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

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

<button type="default">默认default尺寸button>


<button type="default" size="mini">默认mini尺寸button>
1
2
3
4
5

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

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

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

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

五. plain属性

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

演示代码如下：

<button type="primary" plain>primary+plainbutton>


<button type="default" plain>default+plainbutton>


<button type="warn" plain>warn+plainbutton>
1
2
3
4
5
6
7
8

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

六. disabled禁用属性

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

代码示例如下：

<button type="primary" disabled>primary+disabledbutton>


<button type="default" disabled>default+disabledbutton>


<button type="warn" disabled>warn+disabledbutton>
1
2
3
4
5
6
7
8

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

七. loading属性

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

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

<button type="primary" :loading="true">primary+loadingbutton>


<button type="default" :loading="true">default+loadingbutton>


<button type="warn" :loading="true">warn+loadingbutton>
1
2
3
4
5
6
7
8

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

八. 事件机制

在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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

我们看到 点击事件的绑定是遵循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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

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

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

9.2 微信小程序原版

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

<button 
  open-type="getPhoneNumber" 
  bind:getphonenumber="getPhoneNumber">
  这是一个按钮
button>

Page({
  data: {},
  getPhoneNumber(e){
    console.log(e)
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13

代码展示效果如下：

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

9.3 代码对比

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

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


<button 
  open-type="getPhoneNumber" 
  bind:getphonenumber="getPhoneNumber">
  这是一个按钮
button>
1
2
3
4
5
6
7
8
9
10
11
12
13

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

9.4 open-type有效值

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

十. 小结

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

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

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