uni.showToast(OBJECT)

Expand All

# uni.showToast(OBJECT)

Displays the message prompt box.

元服务
√

# showToast 兼容性

HarmonyOS
HBuilderX 4.23

OBJECT parameter description

Parameter	Type	Required	Instruction	Platform difference description
title	String	是	提示的内容，长度与 icon 取值有关。
icon	String	否	图标，有效值详见下方说明，默认：success。
image	String	否	自定义图标的本地路径（app端暂不支持gif）	App、H5、微信小程序、百度小程序、抖音小程序（2.62.0+）、小红书小程序
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认：false	App、微信小程序、抖音小程序（2.47.0+）、小红书小程序
duration	Number	No	Prompt delay time, in milliseconds, default: 1500
position	String	No	The display position of the plain text light prompt. Only the `title` attribute takes effect after filling in a valid value, and does not support hiding through uni.hideToast. See below for valid values.	App
success	Function	No	Callback function for successful interface calling
fail	Function	No	Callback function for failed interface calling
complete	Function	No	Callback function for closed interface calling (available both for successful and failed calling)

icon value description

Value	Instruction	Platform difference description
success	显示成功图标，此时 title 文本在`小程序`平台最多显示 7 个汉字长度，`App`仅支持单行显示。	支付宝小程序无长度无限制
error	显示错误图标，此时 title 文本在`小程序`平台最多显示 7 个汉字长度，`App`仅支持单行显示。	支付宝小程序、快手小程序、抖音小程序、百度小程序、京东小程序、QQ小程序不支持
fail	显示错误图标，此时 title 文本无长度显示。	支付宝小程序、抖音小程序
exception	Display the exception icon. The title text is now displayed without length.	Alipay Mini Program
loading	显示加载图标，此时 title 文本在`小程序`平台最多显示 7 个汉字长度。	支付宝小程序不支持
none	不显示图标，此时 title 文本在`小程序`最多可显示两行。

Example

uni.showToast({
	duration: 2000
});

Description of position value (valid only in App)

Value	Instruction
top	Display at top
center	Display at center
bottom	Display at bottom

Tips

The App can achieve more functions through the plus.nativeUI.toast API.

# uni.hideToast()

Hide the message prompt box.

元服务
x

# hideToast 兼容性

HarmonyOS
HBuilderX 4.23

Example

uni.hideToast();

# uni.showLoading(OBJECT)

显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。

元服务
√

# showLoading 兼容性

HarmonyOS
HBuilderX 4.23

OBJECT parameter description

Parameter	Type	Required	Instruction	Platform difference description
title	String	是	提示的文字内容，显示在loading的下方
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认：false	H5、App、微信小程序、百度小程序、抖音小程序（2.47.0+）、小红书小程序
success	Function	No	Callback function for successful interface calling
fail	Function	No	Callback function for failed interface calling
complete	Function	No	Callback function for closed interface calling (available both for successful and failed calling)

Example

uni.showLoading({
});

# uni.hideLoading()

Hide the loading prompt box.

元服务
x

# hideLoading 兼容性

HarmonyOS
HBuilderX 4.23

Example

uni.showLoading({
});

setTimeout(function () {
	uni.hideLoading();
}, 2000);

# uni.showModal(OBJECT)

Display the modal pop-up window with only one OK button or both OK and Cancel buttons. Similar to an API integrating alert and confirm in html.

元服务
√

# showModal 兼容性

HarmonyOS
HBuilderX 4.23

OBJECT parameter description

Parameter	Type	Required	Instruction	Platform difference description
title	String	No	Prompt title
content	String	No	Prompt content
showCancel	Boolean	No	Whether to display the Cancel button, with true as default
cancelText	String	否	取消按钮的文字，默认为"取消"
cancelColor	HexColor	否	取消按钮的文字颜色，默认为"#000000"	H5、微信小程序、百度小程序、抖音小程序（2.62.0+）、支付宝小程序、小红书小程序
confirmText	String	否	确定按钮的文字，默认为"确定"
confirmColor	HexColor	否	确定按钮的文字颜色，H5平台默认为"#007aff"，微信小程序平台默认为"#576B95"，百度小程序平台默认为"#3c76ff"	H5、微信小程序、百度小程序、抖音小程序（2.62.0+）、支付宝小程序、小红书小程序
editable	Boolean	否	是否显示输入框	H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)、抖音小程序（2.62.0+）、小红书小程序
placeholderText	String	否	显示输入框时的提示文本	H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)、抖音小程序（2.62.0+）、小红书小程序
success	Function	No	Callback function for successful interface calling
fail	Function	No	Callback function for failed interface calling
complete	Function	No	Callback function for closed interface calling (available both for successful and failed calling)

Success return parameter description

Parameter	Type	Description	Platform Difference Description
confirm	Boolean	When is true, it means that the user has clicked the OK button
cancel	Boolean	为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭）
content	String	`editable` 为 true 时，用户输入的文本	H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)、抖音小程序（2.62.0+）

Example

uni.showModal({
	title: '提示',
	success: function (res) {
		if (res.confirm) {
		} else if (res.cancel) {
		}
	}
});

Notice

When the pop-up box is used at the same time to confirm and cancel, it should be noted that the positions of the confirm and cancel buttons on different platforms are different. In WeChat and H5, the confirm button is on the right by default. In the App, the iOS confirmation button is on the right by default, and Android is on the left by default. The reason for this difference is that uni.showModal calls the natively provided pop-up box on the App and the applet, and the native platform strategy itself is different. If you need to adjust, you can control the text of the button by yourself, that is, the text of the "OK" button can actually be set to "Cancel";
When showModal does not meet the requirements, you can develop the component bullet box yourself. There are many components for custom pop-up boxes in the plug-in market. It should be noted that on non-H5 platforms, front-end components cannot cover native components (such as maps and videos), and masks cannot cover tabbar and navigationbar. If you need to cover native components or mask tabbar, etc., it is recommended to use subNvue on the App side;
On the Mini Program platform, cancelText and confirmText have a length limit, up to 4 characters;
DingTalk MiniApp has different performance between the real device and the emulator, the title and content of the real device are required
各家小程序平台对于 confirm、cancel 字段返回规则可能不尽相同，包含两种情况：{ confirm: true, cancel: false } 或 { confirm: true }，但并不影响使用 if 去做判断
钉钉小程序本身不支持设置 cancelColor/confirmColor 属性

# uni.showActionSheet(OBJECT)

Pop up the operation menu from the bottom up

# showActionSheet 兼容性

HarmonyOS
HBuilderX 4.23

OBJECT parameter description

Parameter	Type	Required	Instruction	Platform difference description
title	String	否	菜单标题	App、H5、支付宝小程序、钉钉小程序、微信小程序 3.4.5+（仅真机有效）
alertText	String	否	警示文案（同菜单标题）	微信小程序（仅真机有效）、抖音小程序、小红书小程序
itemList	Array<String>	是	按钮的文字数组	微信、百度、抖音小程序数组长度最大为6个
itemColor	HexColor	否	按钮的文字颜色，字符串格式，默认为"#000000"	App-iOS、飞书小程序不支持
popover	Object	No	On large-screen devices, the display area of the native selection button box is popped up and displayed in the center by default	App-iPad(2.6.6+), H5(2.9.2)
success	Function	No	Callback function for successful interface calling. See the notices on returning parameter description.
fail	Function	No	Callback function for failed interface calling
complete	Function	No	Callback function for closed interface calling (available both for successful and failed calling)

popover 值说明

Value	Type	Instruction
top	Number	Coordinates of the indication area. When using the native navigationBar, it is generally necessary to add the height of the navigationBar.
left	Number	Indicate area coordinates
width	Number	Indicate area width
height	Number	Indicate area height

Success return parameter description

Parameter	Type	Instruction
tapIndex	Number	The buttons clickable by user, from top to bottom, starting from 0

Example

uni.showActionSheet({
	itemList: ['A', 'B', 'C'],
	success: function (res) {
	},
	fail: function (res) {
		console.log(res.errMsg);
	}
});

Tips

App platform, iPad devices support setting the position of the popup box, see plus.nativeUI documentation
To realize native and complex bottom menu of graphics and text on the App platform, such as sharing menu, please refer to https://ext.dcloud.net.cn/plugin?id=69

Notice

On the non-H5 side, all pop-up controls in this chapter are native controls with the highest level, covering native controls such as video, map and tabbar.
uni-app插件市场有很多封装好的前端组件，但注意前端组件层级不是最高，无法覆盖原生组件，除非使用cover-view或nvue。