uniapp开发APP如何使用subNVues（map,video组件必备技能）

在开发中，经常会遇到各种层级覆盖和原生界面自定义的问题：
原生导航栏渐变背景色、灵活自定义内容
覆盖原生导航栏、tabbar 的弹出层组件。比如侧滑菜单盖不住地图、视频、原生导航栏，比如 popup盖不住tabbar。
弹出层内部元素可滚动,
在地图、视频等组件上的添加复杂覆盖组件：比如直播视频上覆盖滚动的聊天记录。
在小程序中只能用 cover-view 来解决。
App中就有三种方法：
1、cover-view和cover-image
【缺点：a：cover-view 不支持嵌套、只能在 video、map 上使用、样式和控件少；
b:如果放在手机底部的话，当系统底部的三键导航栏显示和隐藏，cover-view作为控件是无法自己动的，就会出现被底部tab栏覆盖的情况，用js检测屏幕高度改变定位多麻烦就不说了。】
这个我写了半天，最后放弃了，遇到了一些坑也写了总结，有兴趣的可以看看

2、plus.nativeObj.view
但是plus.nativeObj.view 虽然更灵活，但易用性比较差、没有动画、不支持内部内容滚动。最重要的是太麻烦！！！
学习传送门—>https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View
3、subNVue
uni-app已经支持 nvue 的原生渲染，我们何不做一个subNVue，来替代 cover-view实现更强的功能。

开始使用

第一步：
先了解一下subNVues，传输门==》（https://www.bookstack.cn/read/uniapp-api/3915c299c1c48f89.md），只有了解了用的才更顺手嘛
第二步：
在要使用 subNVue 子窗体的 pages.json 配置
在 pages.json 中，新增了 subNVues 节点, 与 titleNView 在同一级别。支持配置 subNVue 子窗体的相关属性。配置结构如下:
subNVues:
id: [String], 全局唯一，不能重复。
path: [String], subNVue 子窗体的路径。
type: [String], 内置的特殊子窗体类型，弹出(popup)和导航(navigationBar)。
style: [Object], 配置子窗体的位置，背景等样式属性。
代码示例：

{  
    "pages": [{  
        "path": "pages/index/index", //首页  
        "style": {  
            "app-plus": {  
                "subNVues":[{  
                    "id": "concat", // 唯一标识  
                    "path": "pages/index/subnvue/concat", // 页面路径  
                    /*"type": "popup",  这里不需要*/  
                    "style": {  
                        "position": "absolute",  
                        "dock": "right",  
                        "width": "100upx",  
                        "height": "150upx",  
                        "background": "transparent"  
                    }  
                }]  
            }  
        }  
    }]  
}

subNVue 更多详细的配置见===》
https://uniapp.dcloud.io/collocation/pages?id=app-subNVues
第三步：
注意上面的path填的路径是新建一个nvue文件的路径
在需要弹出子窗体的页面，使用下面代码弹出页面

const subNVue = uni.getSubNVueById('tanchu'); // 通过 id 获取 nvue 子窗体 
subNVue.show('slide-in-top', 250); // 打开 nvue 子窗体

subNVue.hide隐藏。
如果不是作为一个弹窗，建议type不用写了。另外mask默认是透明的黑色遮罩，刚开始我没看清，折腾死了，后面我写成纯透明了，别写：‘transpasrent’，不然直接就是纯白色的了

更详细的使用：https://uniapp.dcloud.io/collocation/frame/subNVues?id=subnvuehide
第四步：
最后就是实现vue和nvue两个文件之间的数据传输，
自 HBuilderX 2.0.0 起支持 uni.$emit、uni.$on 、 uni.$once、uni.$off ，可以方便的进行页面的通讯 ，触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等。
示例：
监听事件
首先，在我的页面监听事件。

// 我的页面

onLoad(){  
    // 监听事件  
    uni.$on('login',(usnerinfo)=>{  
        this.usnerinfo = usnerinfo;  
    })  
},  
onUnload() {  
    // 移除监听事件  
        uni.$off('login');  
    },

因为事件监听是全局的，所以使用 uni.$on，需要使用uni.$off 移除全局的事件监听，避免重复监听。

触发事件
进入登陆页面，触发事件

// 登陆页面

uni.$emit('login', {  
                avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',  
                token: 'user123456',  
                userName: 'unier',  
                login: true  
            });

使用 uni.$emit触发事件后，对应的uni.$on 就会监听到事件触发，在回调中去执行相关的逻辑。
不清楚的可以看这：https://ask.dcloud.net.cn/article/36010
附上一个dome：https://ask.dcloud.net.cn/file/download/file_name-ZGVtby56aXA=__url-Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdXBsb2Fkcy9hcnRpY2xlLzIwMTkwNjEzLzNhZjY2Y2JhMTc3YTM4YTM0Njk0MzliNjM1ZDU1N2M1

当然如果一些简单的需求，如果 cover-view 已经能搞定，那也没必要使用subNVue，毕竟能跨端，内存占用也更低。

强大的东西往往也意味着消耗更多内存，为了保证更好的性能体验，一个vue页面不要加载太多 subNVue 子窗体，建议控制在三个以内。

注意事项：
在使用 subNVue 子窗体的页面中，同时满足下面两种情形时：
页面包含 map, video 之类的原生组件
页面使用了 type 为 navigationBar 的 subNVue 子窗体

原生组件可能会出现错位的问题，目前可以使用以下方法进行解决：
将此类元素放在页面的 onReady 中进行渲染。
采用延时的策略，保证元素在页面渲染后，再去定位位置。