uniapp定义new plus.nativeObj.View实现APP端全局弹窗

为什么要用new plus.nativeObj.View在APP端实现弹窗？因为uni.showModal在APP端太难看了。

AppPopupView弹窗函数参数定义

参数一:弹窗信息(所有属性可不填，会有默认值)

1.title:"", //标题

2.content:"", //内容

3.confirmBoxColor:"", //确认按钮背景色

4.cancelText:"", //取消按钮文字

5.confirmText:" //确认按钮文字"

6.showCancel: false, // 是否显示取消按钮是:true(默认) 否:false

7.maskClick: true // 是否允许点击遮罩层关闭弹窗是:true 否:false(默认)

参数二(cd1):点击确认按钮执行逻辑，

参数三(cd2):点击取消按钮执行逻辑。

/utils/AppPopupView.js 定义弹窗文件

export default AppPopupView
 
function AppPopupView({
	title = '提示',
	content = '',
	confirmBoxColor = '#41a863',
	cancelText = "取消",
	confirmText = "确认",
	showCancel = true,
	maskClick = false,
} = {}, cd1, cd2) {
	let screenWidth = plus.screen.resolutionWidth
	let screenHeight = plus.screen.resolutionHeight
	const popupViewWidth = screenWidth * 0.7
	const popupViewHeight = 80 + 20 + 20 + 90 + 10
	const viewContentPadding = 20
	const viewContentWidth = parseInt(popupViewWidth - (viewContentPadding * 2))
	let maskLayer = new plus.nativeObj.View('maskLayer', {
		top: '0px',
		left: '0px',
		height: '100%',
		width: '100%',
		backgroundColor: 'rgba(0,0,0,0.2)'
	})
 
	let popupViewContentList = [{
		tag: 'font',
		id: 'title',
		text: title,
		textStyles: {
			size: '18px',
			color: "#333",
			weight: "bold",
			whiteSpace: "normal"
		},
		position: {
			top: '55px',
			left: viewContentPadding + "px",
			width: viewContentWidth + "px",
			height: "30px",
		}
	}]
 
	popupViewContentList.push({
		tag: 'font',
		id: 'content',
		text: content || '确认要操作吗?',
		textStyles: {
			size: '14px',
			color: "#666",
			lineSpacing: "50%",
			align: "left"
		},
		position: {
			top: "100px",
			left: viewContentPadding + "px",
			width: viewContentWidth + "px",
			height: "18px",
		}
	});
 
	if (showCancel === true) { // 添加取消按钮
		popupViewContentList.push({
			tag: 'rect',
			id: 'cancelBox',
			rectStyles: {
				radius: "3px",
				borderColor: "#f1f1f1",
				borderWidth: "1px",
			},
			position: {
				bottom: viewContentPadding + 'px',
				left: viewContentPadding + "px",
				width: (viewContentWidth - viewContentPadding) / 2 + "px",
				height: "30px",
			}
		})
		popupViewContentList.push({
			tag: 'font',
			id: 'cancelText',
			text: cancelText,
			textStyles: {
				size: '14px',
				color: "#666",
				lineSpacing: "0%",
				whiteSpace: "normal"
			},
			position: {
				bottom: viewContentPadding + 'px',
				left: viewContentPadding + "px",
				width: (viewContentWidth - viewContentPadding) / 2 + "px",
				height: "30px",
			}
		})
	}
 
	popupViewContentList.push({
		tag: 'rect',
		id: 'confirmBox',
		rectStyles: {
			radius: "3px",
			color: confirmBoxColor,
		},
		position: {
			bottom: viewContentPadding + 'px',
			left: ((viewContentWidth - viewContentPadding) / 2 + viewContentPadding * 2) + "px",
			width: (viewContentWidth - viewContentPadding) / 2 + "px",
			height: "30px",
		}
	})
 
	popupViewContentList.push({
		tag: 'font',
		id: 'confirmText',
		text: confirmText || '确认',
		textStyles: {
			size: '14px',
			color: "#FFF",
			lineSpacing: "0%",
			whiteSpace: "normal"
		},
		position: {
			bottom: viewContentPadding + 'px',
			left: ((viewContentWidth - viewContentPadding) / 2 + viewContentPadding * 2) + "px",
			width: (viewContentWidth - viewContentPadding) / 2 + "px",
			height: "30px",
		}
	})
 
	if (showCancel === false) { // 如果只显示确认按钮需要重新设置按钮的width和left
		for (let i = 0; i < popupViewContentList.length; i++) {
			let item = popupViewContentList[i]
			if (item.id === 'confirmBox' || item.id === 'confirmText') {
				item.position.left = viewContentPadding + "px"
				item.position.width = viewContentWidth + "px"
			}
		}
	}
 
	let popupView = new plus.nativeObj.View("popupView", { //创建底部图标菜单
		tag: "rect",
		top: (screenHeight - popupViewHeight) / 2 + "px",
		left: '15%',
		height: popupViewHeight + "px",
		width: "70%"
	})
	popupView.drawRect({
		color: "#FFFFFF",
		radius: "20px"
	}, {
		top: "40px",
		height: popupViewHeight - 40 + "px",
	})
 
	popupView.addEventListener("click", e => {
		let maxTop = popupViewHeight - viewContentPadding
		let maxLeft = popupViewWidth - viewContentPadding
		let buttonWidth = (viewContentWidth - viewContentPadding) / 2
		if (e.clientY > maxTop - 30 && e.clientY < maxTop) {
			let maxTop = popupViewHeight - viewContentPadding;
			let maxLeft = popupViewWidth - viewContentPadding;
			let buttonWidth = (viewContentWidth - viewContentPadding) / 2;
			if (showCancel) {
				if (e.clientY > maxTop - 30 && e.clientY < maxTop) {
					if (e.clientX > viewContentPadding && e.clientX < maxLeft - buttonWidth -
						viewContentPadding) {
						// console.log("取消"); 
						maskLayer.hide()
						popupView.hide()
						cd2 && cd2()
					}
					if (e.clientX > maxLeft - buttonWidth && e.clientX < maxLeft) {
						// console.log("确认");
						maskLayer.hide()
						popupView.hide()
						cd1 && cd1()
					}
				}
			} else {
				maskLayer.hide()
				popupView.hide()
				cd1 && cd1()
			}
		}
	})
 
	popupView.draw(popupViewContentList)
 
	// 点击遮罩层
	maskLayer.addEventListener("click", function() { //处理遮罩层点击
		if (maskClick) {
			maskLayer.hide();
			popupView.hide();
		}
	})
 
	// 显示弹窗
	maskLayer.show()
	popupView.show()
}

在main.js挂载到全局

// #ifdef APP-PLUS
import AppPopupView from '@/utils/AppPopupView.js';
Vue.prototype.AppPopupView = AppPopupView;
// #endif

页面调用全局弹窗

<script>
	export default {
		onLoad() {
			// #ifdef APP-PLUS
			// 参数一:弹窗信息(所有属性可不填，会有默认值)
			let AppPopupInfo = {
				// title:"", //标题
				// content:"", //内容
				// confirmBoxColor:"", //确认按钮背景色
				// cancelText:"", //取消按钮文字
				// confirmText:" //确认按钮文字",  
				// showCancel: false, // 是否显示取消按钮 是:true(默认) 否:false
				// maskClick: true // 是否允许点击遮罩层关闭弹窗 是:true 否:false(默认) 
			}
			// 参数二:点击确认按钮执行逻辑
			const affirmBtn = () => {
				console.log("点击了确认按钮");
			}
			// 参数三:点击取消按钮执行逻辑
			const cancelBtn = () => {
				console.log("点击了取消按钮");
			}
			this.AppPopupView(AppPopupInfo, affirmBtn, cancelBtn)
			// #endif
		},
	}
</script>

效果图

uniapp定义new plus.nativeObj.View实现APP端全局弹窗

悦读