uni-app原生子窗体（app端）

不念不忘少年蓝@ 2023-06-09 11:28 54阅读 0赞

在uni-app中video是原生组件，层级最高，全屏后普通前端组件无法覆盖，如果想要在视频自行绘制界面：  
  1、app端`vue`页面可以用 `cover-view、cover-image` ，但是`cover-view、cover-image`中不支持嵌套其它组件，包括再次嵌套cover-view；  
  2、app端 2.1.5 以上`nvue`页面的video也可以通过`cover-view`来绘制界面覆盖元素；  
  3、使用更灵活和强大的`subNvue`（原生子窗体）；  
  4、使用强大的`plus.nativeObj.view`绘制原生内容。

### 原生子窗体的使用 ###

##### 1、页面布局 #####

（1）启用`uni-app`编译模式，默认编译模式是`weex`（对weex不熟悉的使用uni-app编译模式）

// manifest.json 
    {       
        // ... 
         /* App平台特有配置 */      
        "app-plus": {       
            "nvueCompiler":"uni-app" //是否启用 uni-app 模式 
        }      
    }

（2）在uni-app编译模式下需要注意文字尽量写在`text`节点，非`text`节点的文字无法自动更新。  
（3）在uni-app编译模式下布局样式

*  使用弹性盒布局，不支持display
 *  布局排列方向默认为竖排（column），如需改变布局方向，可以在 `manifest.json -> app-plus -> nvue -> flex-direction` 节点下修改，仅在 `uni-app` 模式下生效
 *  只有text标签可以设置字体大小，字体颜色
 *  布局不能使用百分比
 *  只能使用 class 选择器
 *  border 不支持简写
 *  background 不支持简写
 *  `App.vue` 中的样式，会编译到每个 `nvue`文件。如果有不合法属性控制台会给出警告，可以通过条件编译屏蔽 App 中的警告  
    条件编译：
    
        /* #ifndef APP-PLUS-NVUE */   
        .style{ 
        	background:#FFFFFF;
        }
        /* #endif */

官方给出的文档 \[nvue不同编译模式介绍\][https://ask.dcloud.net.cn/article/36074][https_ask.dcloud.net.cn_article_36074]

##### 2、页面引入子窗体 #####

（1）配置  
在 `pages.json` 中，新增了 `subNVues` 节点, 与 titleNView 在同一级别。支持配置 `subNVue` 子窗体的相关属性。配置结构如下:

*  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"  
                        }  
                    }]  
                }  
            }  
        }]  
    }

（2）使用  
在页面中打开和关闭 subNVue 子窗体

// 通过 id 获取 nvue 子窗体 
    const subNVue = uni.getSubNVueById('map_widget')  
    // 打开 nvue 子窗体 
    subNVue.show('slide-in-left', 300, function(){   
        // 打开后进行一些操作... 
        // 
    });  
    // 关闭 nvue 子窗体 
    subNVue.hide('fade-out', 300)

动态修改 subNVue 子窗体位置，大小

subNVue.setStyle({   
        top: '100px',  
        left: '20px',  
        width: '100px',  
        height = '50px',  
    })

（3）通讯  
使用页面通讯时注意事项： 要在页面卸载前，使用 uni.$off 移除事件监听器。

// 在 subNVue/vue 页面注册事件监听方法 
    // $on(eventName, callback) 
    uni.$on('page-popup', (data) => {   
        vm.title = data.title;  
        vm.content = data.content;  
    })  
    
    // 在 subNVue/vue 页面触发事件 
    // $emit(eventName, data) 
    uni.$emit('page-popup', {   
        title: '我是一个title',  
        content: '我试data content'  
    });

官方给出的文档:

*  \[uni-app subNVue 原生子窗体开发指南\][https://ask.dcloud.net.cn/article/35948][https_ask.dcloud.net.cn_article_35948]
 *  \[官方文档-页面通讯\] [https://uniapp.dcloud.io/api/window/communication][https_uniapp.dcloud.io_api_window_communication]
 *  \[官方文档-subNVue 原生子窗体\][https://uniapp.dcloud.io/api/window/subNVues][https_uniapp.dcloud.io_api_window_subNVues]

[https_ask.dcloud.net.cn_article_36074]: https://ask.dcloud.net.cn/article/36074
[https_ask.dcloud.net.cn_article_35948]: https://ask.dcloud.net.cn/article/35948
[https_uniapp.dcloud.io_api_window_communication]: https://uniapp.dcloud.io/api/window/communication
[https_uniapp.dcloud.io_api_window_subNVues]: https://uniapp.dcloud.io/api/window/subNVues