针对uniApp在地图、视频上增加弹窗层级问题记录

打从使用uniApp，一直有个重大问题困扰我，那就是在地图和视频使用时，产品往往喜欢搞一些视觉效果爆炸的“特殊”弹窗，还动不动就来句这也实现不了，那也实现不了？？？我就没受过这样的气！！！

方法一：nvue

在这里特别说明，针对杠精提问：为什么不使用cover-view、cover-image？呵呵，脑子有问题。只有 这两种标签，且还不能嵌套组件，这怎么能拿来做复杂效果？除非你只需要放一句话，那你一定要用cover-view😁。

回到主题，简单介绍一下nvue：vue文件走的webview渲染，nvue走weex方式的原生渲染。uni-app的App端内置了一个基于weex改进的原生渲染引擎，提供了原生渲染能力，所以一般nvue是使用在app项目中的，其用法与vue页面一样，可嵌套组件，主要要注意的是css的限制：

1、在nvue中，只能使用默认的flex布局方式，默认是竖排（column）排列；不能使用百分比

2、只有text标签才能给文字设置颜色、大小；文字内容，必须、只能在text组件下。不能在div、view的标签里直接写文字。否则即使渲染了，也无法绑定js里的变量。

3、不支持背景图片；进行class绑定的时候，只支持数组语法

最后说一句，官网说复杂页面推荐用nvue，因为weex原生渲染性能好啊，若果你信了，那么当你用过后，你一定会和我一样把它当个笑话（坑多的填不完🤣），所以我建议还是以vue为主，废话不再说，直接上代码：

一、pages.json路由定义

{
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"app-plus": {
					"titleNView": false, //不启用系统导航
					"subNVues": [{
						"id": "comment",
						"path": "pages/index/subNVue/screen",
						"style": {
							"height": "100%",
							"width":"100%",
							"position":"absolute",
							"top":"0",
							"right":"0",
							"bottom":"0",
							"left":"0",
							"color":"#000000",
							"background":"transparent",
							"zindex":10000000
						}
					}]
				}
			}
		}, 
	]
}

二、index.vue中使用screen.nvue（内容无所谓，这里不展示）

export default {
		data() {
			return {
				subNvue: '',
			}
		},
		created() {
			this.subNvue = uni.getSubNVueById('comment'); //获取
			this.subNvue.show() // 显示
			setTimeout(function(){
				this.subNvue.hide() // 隐藏
			},2000)
			
		},
	}

方法二、透明页面

如果对uniapp路由跳转方式有一定了解的话并心细的话你就会发现uni.navigateTo之所以能uni.navigateBack是因为上一个页面并未被销毁🎉！！！既然如此，那么新页面不就是在就业面之上吗，如果我将新页面的背景改成透明的。。。

pages.json

...
{
            "path" : "pages/home/monitoring-modal",
            "style": {
            	"navigationStyle": "custom",
            	"backgroundColor": "transparent",
            	"app-plus": {
            		"animationType": "fade-in",
            		"background": "transparent",
            		"popGesture": "none"
            	}
            }
            
        }

monitoring-modal.vue

...
<style>
page {
		background: transparent;
	}
</style>

以上既是关键代码，也是我目前发现的最佳解决方案，强烈推荐！！！