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

广告也精彩 广告也精彩
《uni-app》表单组件-Button按钮

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

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

一. 简介

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

二. 基础用法

按钮基础用法如下:

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

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

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

三. 按钮主题色 3.1 说明

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

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

type

按钮的主题色

string

primary| default | warn

default

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


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

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

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

其表现形态 效果图 如下:

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

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


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

<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”,且 不同尺寸为例,代码如下


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

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

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

《uni-app》表单组件-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

演示代码如下:


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

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

<button type="warn" plain>warn+plain</button>

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

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

六. disabled禁用属性

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

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

disabled

控制按钮是否可点击

boolean

true| false

false

代码示例如下:


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

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

<button type="warn" disabled>warn+disabled</button>

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

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

七. loading属性

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

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

loading

名称前是否带 loading 图标

boolean

true| false

false

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


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

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

<button type="warn" :loading="true">warn+loading</button>

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

《uni-app》表单组件-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 的语法,如下

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

九. 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>

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

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

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

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

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

9.2 微信小程序原版

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


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

代码展示效果如下:

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

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

9.3 代码对比

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


<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

广告也精彩 广告也精彩
版权声明:admin 发表于 2023-11-05 17:04:18。
转载请注明:《uni-app》表单组件-Button按钮 | 嘿全导航
广告也精彩 广告也精彩

暂无评论

暂无评论...