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.建立完畢之後使用原生子窗體

在一個項目檔案夾下建一個，專門存放subN

vue

原生子窗體的檔案夾

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.在窗體頁面設定隐藏窗體的函數

1.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 子窗體，建議控制在三個以内