前言:在进行开发中,难免会遇到与客户进行交互的问题,好的交互不仅可以增加用户体验也可以让程序更加完美。比如PC端常用的ElementUI中的Message,今天我们来看一看uniapp原生的交互。

---

一.uni.showToast(OBJECT)

1.概述

显示消息提示框

---

2.OBJECT参数

参数	类型	必填	说明
title	String	是	提示的内容，长度与 icon 取值有关。
icon	String	否	图标,参数见下方说明
image	String	否	自定义图标的本地路径（app端暂不支持gif）
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认：false
duration	Number	否	提示的延迟时间，单位毫秒，默认：1500
position	String	否	纯文本轻提示显示位置，填写有效值后只有 title 属性生效，且不支持通过 uni.hideToast 隐藏。参数详见下方说明。
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

---

(1).icon值说明

值	说明
success	显示成功图标，此时 title 文本在小程序平台最多显示 7 个汉字长度。
error	显示错误图标，此时 title 文本在小程序平台最多显示 7 个汉字长度。
fail	显示错误图标，此时 title 文本无长度显示。
exception	显示异常图标。此时 title 文本无长度显示。
loading	显示加载图标，此时 title 文本在小程序平台最多显示 7 个汉字长度。
none	不显示图标，此时 title 文本在小程序最多可显示两行，App仅支持单行显示。

---

(2).position 值说明（仅App生效）

值	说明
top	居上显示
center	居中显示
bottom	居底显示

---

3.举例

注意:默认为success图标

uni.showToast({
	title:'打开消息提示'
})

---

二.uni.hideToast()

1.概述

顾名思义,这个api就是隐藏消息提示框

2.举例

uni.hideToast()

---

三.uni.showLoading(OBJECT)

1.概述

显示 loading 提示框,通常我们可以使用在进行网络请求或者在进行下一步操作中使用。

2.OBJECT参数说明

参数	类型	必填	说明
title	String	是	提示的文字内容，显示在loading的下方
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认：false
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

3.举例

uni.showLoading({
	title:'加载中...'
})

---

四.uni.hideLoading()

1.概述

隐藏 loading 提示框

2.举例

const uploadImage = (url, data) => {
	uni.showLoading({
		title: '加载中'
	});
	return new Promise((resolve, reject) => {
		uni.uploadFile({
			url: BASE_URL + url,
			filePath: data,
			name: 'file',
			formData: {},
			success: (uploadFileRes) => {
				let parms = uploadFileRes.data
				resolve(parms)
				uni.hideLoading();
			},
			fail: () => {
				uni.hideLoading();
				uni.showToast({
					title: '图片上传失败',
					icon: 'none'
				})
			}
		});
	})
}