[Mini Program] Detailed explanation of common APIs for displaying pop-up windows

Display common APIs for pop-up windows

There are four ways to display the pop-up window in the applet: showToast, showModal, showLoading,showActionSheet

showToast

Explicit message prompt box

Has the following properties :

Attributes	type	Defaults		Required description
title	string		Yes	The content of the prompt
icon	string	success	no	icon
image	string		no	The local path of the custom icon, the priority of image is higher than icon
duration	number	1500	no	The timing of the display of the prompted content
mask	boolean	false	no	Whether to display a transparent overlay to prevent touch penetration
success	function		no	Callback function for successful interface call
fail	function		no	Callback function for interface call failure
complete	function		no	The callback function of the end of the interface call (the call will be executed if the call succeeds or fails)

The icon property has the following values :

legal value	illustrate
success	The success icon is displayed, at this time the title text can display up to 7 Chinese characters in length
error	Display the failure icon, at this time the title text can display up to 7 Chinese characters in length
loading	Display the loading icon, at this time the title text can display up to 7 Chinese characters in length
none	No icon is displayed. At this time, the title text can display up to two lines. It is supported by version 1.9.0 and above.

demo code

wx.showToast({
    
    
  title: "购买失败",
  icon: "error",
  duration: 100,
  mask: true,
  success: (res) => {
    
    
    console.log("展示成功: ", res);
  },
  fail: (err) => {
    
    
    console.log("展示失败: ", err);
  }
})

---

showModal

Show a modal dialog

Common properties are as follows :

Attributes	type	Defaults	Required	illustrate
title	string		no	the title of the prompt
content	string		no	The content of the prompt
showCancel	boolean	true	no	Whether to show the cancel button
cancelText	string	Cancel	no	Cancel button text, up to 4 characters
cancelColor	string	#000000	no	The text color of the cancel button, which must be a color string in hexadecimal format
confirmText	string	Sure	no	Confirm button text, up to 4 characters
confirmColor	string	#576B95	no	The text color of the confirmation button, which must be a color string in hexadecimal format
editable	boolean	false	no	whether to display the input box
placeholderText	string		no	The prompt text when the input box is displayed
success	function		no	Callback function for successful interface call
fail	function		no	Callback function for interface call failure
complete	function		no	The callback function of the end of the interface call (the call will be executed if the call succeeds or fails)

demo code

wx.showModal({
    
    
  title: "四个二",
  cancelText: "要不起",
  cancelColor: '#f00',
  confirmText: "管上",
  confirmColor: "skyblue",
  success: (res) => {
    
    
    console.log("展示成功: ", res);
  },
  fail: (err) => {
    
    
    console.log("展示失败: ", err);
  }
})

In the successful callback function, there are the following attributes to determine whether the user clicks OK or cancel

Attributes	type	illustrate
content	string	The text entered by the user when editable is true
confirm	boolean	When true, indicates that the user clicked the OK button
cancel	boolean	When true, it means that the user clicked Cancel (used by the Android system to distinguish between clicking the mask to close or clicking the Cancel button to close)

wx.showModal({
    
    
  title: "四个二",
  cancelText: "取消",
  confirmText: "确定",
  success: (res) => {
    
    
    console.log("展示成功: ", res);
    if (res.cancel) {
    
    
      console.log("用户点击了左边取消按钮");
    } else if (res.confirm) {
    
    
      console.log("用户点击了右边确定按钮");
    }
  },
  fail: (err) => {
    
    
    console.log("展示失败: ", err);
  }
})

---

showLoading

A loading prompt is displayed. The difference from showToast is that guard Loading needs to be actively called wx.hideLoadingto close the prompt box

The properties are as follows :

Attributes	type	Defaults	Required	illustrate
title	string		Yes	The content of the prompt
mask	boolean	false	no	Whether to display a transparent overlay to prevent touch penetration
success	function		no	Callback function for successful interface call
fail	function		no	Callback function for interface call failure
complete	function		no	The callback function of the end of the interface call (the call will be executed if the call succeeds or fails)

demo code

wx.showLoading({
    
    
			title: '加载中',
			mask: true,
			success: (res) => {
    
    
				console.log(res);
			},
			fail: (err) => {
    
    
				console.log(err);
			}
		})

---

showActionSheet

Display the operation menu

Attributes	type	Defaults	Required	illustrate
alertText	string		no	Warning copy
itemList	Array.<string>		Yes	A literal array of buttons, up to a length of 6
itemColor	string	#000000	no	button text color
success	function		no	Callback function for successful interface call
fail	function		no	Callback function for interface call failure
complete	function		no	The callback function of the end of the interface call (the call will be executed if the call succeeds or fails)

demo code

wx.showActionSheet({
    
    
  itemList: ["Macbook", "iPad", "iPhone"],
  itemColor: "#f00",
  success: (res) => {
    
    
    console.log(res);
  },
  fail: (err) => {
    
    
    console.log(err);
  }
})

Attribute in successful callback res

Attributes	type	illustrate
tapIndex	number	The sequence number of the button clicked by the user, from top to bottom, starting from 0

You can know which button was clicked through tapIndex

wx.showActionSheet({
    
    
  itemList: ["Macbook", "iPad", "iPhone"],
  itemColor: "#f00",
  success: (res) => {
    
    
    console.log(res .tapIndex);
  },
  fail: (err) => {
    
    
    console.log(err);
  }
})

Notice

wx.showToastwx.showLoadingand can only display one at a time

wx.showLoadingand wx.hideLoadingpaired with