uniapp原生子窗体subNvue的使用超容易理解的总结，解决覆盖不了视频或者地图等层级问题

subNvue 自1.9.10 起支持 ，仅支持 app 平台

subNVues 是 vue 页面的原生子窗体。用于解决App中 vue 页面中的层级覆盖和原生界面灵活自定义用的。

它是一个 nvue 页面，使用 weex 引擎渲染，方便自定义原生导航或覆盖原生地图、视频等

虽然有cover-view来覆盖原生组件，但是在app-vue中不支持嵌套，且只能在map、video组件使用，这个时候用原生子窗体是比较适合的

1.首先配置pages.json（我这里引用官方的一个配置案例）

{ 
 "pages": [{
        "path": "pages/index/index", //首页
        "style": {
                "subNVues":[{//侧滑菜单
                    "id": "drawer", //subNVue 的 id，可通过 uni.getSubNVueById('drawer') 获取
                    "path": "pages/index/drawer.nvue", // nvue 路径
                    "style": { //webview style 子集，文档可暂时开放出来位置，大小相关配置
                        "position": "popup", //除 popup 外，其他值域参考 5+ webview position 文档
                        "width": "50%"
                    }

                }, {//弹出层
                    "id": "popup",
                    "path": "pages/index/popup",
                    "style": {
                        "position": "popup",
                        "margin":"auto",
                        "width": "150px",
                        "height": "150px"
                    }
                }]
            }
    }]
}

注意：

• subNVues 的 id 是全局唯一的，不能重复
• 可以通过 uni.getSubNVueById('id') 获取 subNVues 的实例
• subNVues 的 path 属性只能是 nvue 文件路径

更多配置请看 官方文档

 2.创建完毕之后使用原生子窗体

在一个项目文件夹下建一个，专门存放subNvue原生子窗体的文件夹

3.在vue页面引用原生子窗体

loadfun(e){
			let drawer = uni.getSubNVueById('drawer');//通过 ID 获取 subNVues 原生子窗体的实例
			uni.$emit('senddata',this.swiperlist[e])
           //我下面用的等同于uni.getSubNVueById('drawer').show，show是显示
			drawer.show('zoom-fade-out', 200,()=>{//第一个参数指定动画，我这里设置的是新窗体逐渐放大
             //第二个参数执行时间，第三个参数是执行完的回调
			})
		},

4.在窗体页面设置隐藏窗体的函数

mounted() {
			let _this = this;
			uni.$on('senddata', (e) => {
				_this.infos = e;
			})
		},
		methods: {
			toSecondPage() {
				// 先关掉drawer再进行跳转，因为subNVue会在其它页面也存在
				uni.getCurrentSubNVue().hide('slide-out-left');
              //slide-out-left新窗体从左侧进入隐藏
			}
		}

更多动画类型也可参考动画类型

补充：

subNvue.postMessage()可以发送消息

subNvue.onMessage()可以监听消息，这种通讯方式已过时

所以我在这里传参用的是uni.$emit和uni.$on

虽然subNVue 比cover-view和plus.nativeObj.view更强大，也占用更多内存，为了保证更好的性能体验，一个vue页面不要加载太多 subNVue 子窗体，建议控制在三个以内