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 AppPopupViewfunction AppPopupView({title = '提示',content = '',confirmBoxColor = '#41a863',cancelText = "取消",confirmText = "确认",showCancel = true,maskClick = false,
} = {}, cd1, cd2) {let screenWidth = plus.screen.resolutionWidthlet screenHeight = plus.screen.resolutionHeightconst popupViewWidth = screenWidth * 0.7const popupViewHeight = 80 + 20 + 20 + 90 + 10const viewContentPadding = 20const 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和leftfor (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 - viewContentPaddinglet maxLeft = popupViewWidth - viewContentPaddinglet buttonWidth = (viewContentWidth - viewContentPadding) / 2if (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>

效果图