uniapp的Toast消息提示框

这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战

我们在做uniapp项目的时候都会遇到消息提示的情况。这时候要做轻提示的，可以使用uniapp.showToast方法。下面我们来学习一下uniapp.showToast。

uni.showToast(OBJECT)

显示消息提示框。

OBJECT参数说明

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

icon 值说明

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

示例

uni.showToast({ 
    title: '标题', 
    duration: 2000
});
//当我们不传值icon的时候，默认是会显示一个success的图标，我们可以看到 success时 显示成功图标，此时 title 文本最多显示 7 个汉字长度。当消息提示文字较多时，我们可以把icon去掉。

position 值说明（仅App生效）

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

在使用toast的时，要注意我们使用的平台，以及各个字段的默认值。 我们可以在接口拦截的时候使用轻提示。如下代码：

// 全局的错误异常处理
request.interceptor.fail = ((res, config) => {
	let ret = res;
	let msg = ''
	if (res.statusCode === 200) { // 业务错误
		msg = res.data.msg
		ret = res.data
	} else if (res.statusCode > 0) { // HTTP错误
		msg = '服务器异常[' + res.statusCode + ']'
	} else { // 其它错误
		msg = res.errMsg
	}
	if (config.toastError) {
		uni.showToast({
			title: msg,
			duration: 2000,
			icon: 'none'
		})
	}
	return ret;
})

当我们发现ajax报错时，我们可以将错误信息展示。