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

  在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

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://uniapp.dcloud.io/api/window/communication
• [官方文档-subNVue 原生子窗体]https://uniapp.dcloud.io/api/window/subNVues