北京华网天下

uni - app内置button组件:简介、基础用法与按钮主题色

2025-02-04

来源：网络整理

本文共享的组件是Uni-App的内置组件。非扩展组件。两者实际上在使用中相似，但是扩展组件的属性更多...没有本质差异〜

“ Uni-App”表格按钮

1。简介

，按钮是图形接口的基本组件之一，通常用于响应用户的点击事件并触发业务逻辑操作；

2。基本用法

按钮的基础如下：

<button>这是一个按钮button>

在基本用法下，Uni-App将启用一组默认参数（包括主题，大小，状态等）内置组件内部内置。

3。按钮主题颜色3.1描述

Uni-App正式具有三组主题颜色，供用户直接使用，即：warn，使用方法是通过属性传递的，属性关键字是类型

参数说明类型选择值默认值

类型

按钮的主题颜色

｜｜警告

不同的类型值将对应于不同的主题颜色。示例代码如下：

<button type="primary">primarybutton> <button type="default">defaultbutton> <button type="warn">warnbutton>

它的表达形式渲染如下：

在基本用法中，我们有一个没有任何参数的示例。尽管使用时没有参数，但组件内的主题颜色实际上具有默认值。默认值是当时，它完全等效于内部

<button type="default">defaultbutton> <button>defaultbutton>

3.2平台差异

此外，Uni-App是跨平台解决方案，因此编译后存在某些平台差异。主题颜色之间的差异之间的差异主要在此属性上。 type =“”“”“”“”“”“”“”“ type =”“由于平台引起的平台引起的最终编译。差异将根据平台定义显示相应的颜色。具体差异如下：

微信迷你节目，360 Mini 应用程序，H5， Mini计划，Apay Mini计划，飞行书迷你程序，快速应用程序BYTE BYTE 应用QQ应用程序

绿色的

蓝色的

红色的

浅蓝色

换句话说，我们在Uni-App中设置了按钮将显示在微信中，并将显示为QQ小程序中的浅蓝色。

4。尺寸属性

大小属性（用于控制的大小）与主题颜色属性相同。它直接在组件上作为属性作用，并且值是类型。 Uni-App官员有两个内置尺寸：和Mini，如下：

参数说明类型选择值默认值

尺寸

按钮的大小

｜迷你

我们以type =“”的形式，并以不同的尺寸为例。代码如下

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

其表达形式的效果如下：

就像主题颜色一样，如果未将其引入尺寸属性，那么值与值相同

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

5。属性

属性，控制按钮在空心中，或使用该属性的按钮将处于幽灵模式，即内容逆转，背景变得透明。这种类型通常作用于某些话语DOM，以下显示：

参数说明类型选择值默认值

是控制按钮空心

是的｜

演示代码如下：

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

其表达形式的效果如下：

6。禁用属性

属性，用于控制是否可以单击该按钮。当按钮处于状态时，按钮的形状将为灰色，用户无法单击操作

参数说明类型选择值默认值

控制按钮可以单击吗

是的｜

代码示例如下：

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

其表达形式的效果如下：

7。属性

属性，此属性用于控制按钮是否在状态中。严格来说，国家是一个组合状态。它主要由动画组合组成。与属性不同，Uni-App中的属性不会设置。灰色按钮，具体描述如下

参数说明类型选择值默认值

是否将图标带到名字前面

是的｜

属性通常在等待阶段使用。例如：当注册用户时，用户填写信息并单击注册按钮时，此时已将信息发送到背景。它已经在处理，然后您可以使用该属性；

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

其表达形式的效果如下：

8。事件机制

Uni-App中的事件机制完全遵循VUE的语法，因此授予的事件也遵循Vue的语法。例如，我们需要将单击事件添加到该按钮。

<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的语法，如下

9。开放式开放能力

开放类型，开放能力，单次应用作为跨端解决方案，必须有与各种小问题相对应的开型。可能会有人问过什么是开放式的。能力，这些功能可以迅速帮助我们完成业务需求，例如获得用户的手机号码，共享转发等等；

Uni-App的开放型价值整合了许多小程序。用法大致类似于原件。主要区别是语法。毕竟，Uni-App遵循Vue的语法。例如，获取用户的手机号码，让我们看一下在Uni-App上写作后的编译结果和运行结果的结果，以及在原始微信中的Mini-开发人员工具中的操作结果；

9.1 Uni-App

在Uni-App中，我们声明开放类型，这意味着获取手机号码，然后定制事件的值必将获取值并打印。特定代码如下：

<button open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber"> 获取用户手机 button> <script> export default { methods: { decryptPhoneNumber(e) { console.log(e); } } }; script>

执行汇编并在微信中的Mini 开发人员工具中运行。

单击按钮后，成功将其打印在控制台上。打印结果如下：

从结果来看，它确实编制了与微信迷你计划相对应的开型。

9.2微信迷你节目的原始版本

然后，让我们看一下微信小程序中的实现代码，如下：

<button open-type="getPhoneNumber" bind:getphonenumber="getPhoneNumber"> 这是一个按钮 button> Page({ data: {}, getPhoneNumber(e){ console.log(e) }, })

代码显示的效果如下：

从屏幕截图中的结果来看，Uni-App和微信小计划的效果完全相同。

9.3代码比较

为了更好地理解代码写作的差异，我们正在比较

<button open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber"> 获取用户手机 button> <button open-type="getPhoneNumber" bind:getphonenumber="getPhoneNumber"> 这是一个按钮 button>