本文分享的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等属性，在使用的时候简单的设置即可完成期望的功能和交互；文章来源：https://www.toymoban.com/news/detail-785993.html
(PS：都已经看到这里了，点个赞，求个关注吧，万分感谢～)文章来源地址https://www.toymoban.com/news/detail-785993.html
到了这里，关于《uni-app》表单组件-Button按钮的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[uni-app] 微信小程序 - 组件找不到/导入报错 (分包问题导致)](https://imgs.yssmx.com/Uploads/2024/02/604004-1.png)
