# 微信的弹窗

wx.showLoadingwx.showToast 同时只能显示一个

# 消息提示框

wx.showToast({
	title: "成功", // 提示的内容
	icon: "success", // 图标  值: success/loading/none
	// image:	自定义图标的本地路径,image 的优先级高于 icon
	duration: 2000, // 提示的延迟时间,默认1500ms
	// mask // 是否显示透明蒙层,防止触摸穿透 默认 false
	// success 成功回调 fail 失败回调 complete 接口调用完成回调
});

wx.hideToast(); // 可以关闭页面的提示框

**注意:**当提示框显示图标时,toast 最多显示 7 个汉字长度,当图标为 none 时,最多显示两行。

# 模态对话框

wx.showModal({
	title: "提示", // 提示的标题
	content: "这是一个模态弹窗", // 提示的内容
	// showCancel 是否显示取消按钮
	// cancelText 取消按钮的文字,最多 4 个字符
	// cancelColor 取消按钮的文字颜色,必须是 16 进制格式的颜色字符串
	// confirmText 确认按钮的文字,最多 4 个字符
	// confirmColor 确认按钮的文字颜色,必须是 16 进制格式的颜色字符串
	success(res) {
		// 成功后的回调
		if (res.confirm) {
			// confirm为true表示用户点击了确定按钮
			console.log("用户点击确定");
		} else if (res.cancel) {
			// cancel为true表示用户点击了取消(用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭)
			console.log("用户点击取消");
		}
	},
});

注意

  • Android 6.7.2 以下版本,点击取消或蒙层时,回调 fail, errMsg 为 "fail cancel";
  • Android 6.7.2 及以上版本 和 iOS 点击蒙层不会关闭模态弹窗,所以尽量避免使用「取消」分支中实现业务逻辑

# loading 提示框

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

wx.showLoading({
	title: "加载中", // 提示的内容
	mask: false, // 是否显示透明蒙层,防止触摸穿透,默认为false
	// success 成功回调 fail 失败回调 complete 接口调用完成回调
});

# 底部操作菜单

wx.showActionSheet({
	itemList: ["A", "B", "C"], // 按钮的文字数组,数组长度最大为 6
	itemColor: "#333333", // 按钮的文字颜色,默认#000000
	success(res) {
		// 成功后的回调
		console.log(res.tapIndex); // tapIndex 用户点击的按钮序号,从上到下的顺序,从0开始
	},
	fail(res) {
		// 失败的回调函数
		console.log(res.errMsg);
	},
	// complete
});

注意

  • Android 6.7.2 以下版本,点击取消或蒙层时,回调 fail, errMsg 为 "fail cancel";
  • Android 6.7.2 及以上版本 和 iOS 点击蒙层不会关闭模态弹窗,所以尽量避免使用「取消」分支中实现业务逻辑
上次更新: 10/29/2019, 6:04:16 PM