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

武小脏~

11723人浏览 · 2020-03-02 17:47:48

武小脏~ · 2020-03-02 17:47:48 发布

在开发中，经常会遇到各种层级覆盖和原生界面自定义的问题：
原生导航栏渐变背景色、灵活自定义内容
覆盖原生导航栏、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. $e m i t 、 u n i .$ on 、 uni. $o n c e 、 u n i .$ off ，可以方便的进行页面的通讯，触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等。
示例：
监听事件
首先，在我的页面监听事件。

// 我的页面

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

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

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

// 登陆页面

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