uni-app 能显示在 web-view 之上的nvue 子窗体

在uni-app中，nvue 页面主要用于高性能的原生渲染，而 web-view 组件则用于嵌入外部网页。要实现 nvue 子窗体显示在 web-view 之上，通常需要借助一些布局和层级管理的技巧。由于 nvue 和 web-view 渲染机制不同，直接在 web-view 上方显示 nvue 组件并非原生支持的功能，但可以通过一些变通的方案来实现。

下面是一个基本的思路和代码示例，用于展示如何在 web-view 上方显示一个 nvue 弹窗（假设这个弹窗是一个简单的遮罩层）：

1. 在页面中嵌入 web-view：

   在 pages/index/index.vue 文件中，嵌入 web-view 组件。

   <template>
     <view class="container">
       <web-view src="https://example.com" style="width: 100%; height: 100%;"></web-view>
       <!-- 这里不能直接嵌套nvue组件，但通过事件触发nvue弹窗 -->
     </view>
   </template>
   
   <script>
   export default {
     methods: {
       showOverlay() {
         // 触发nvue弹窗显示，可以通过postMessage等方式通信
         plus.webview.currentWebview().evalJS(`window.postMessage('showOverlay', '*')`);
       }
     },
     mounted() {
       // 监听来自nvue的消息，用于隐藏弹窗等交互
       window.addEventListener('message', (event) => {
         if (event.data === 'hideOverlay') {
           // 这里处理隐藏逻辑，如果是Vue页面，可能需要通过其他方式通知nvue隐藏
         }
       });
     }
   }
   </script>
   
   <style>
   .container {
     position: relative;
     width: 100%;
     height: 100%;
   }
   </style>
   

2. 创建 nvue 弹窗：

   在 pages/overlay/overlay.nvue 文件中，创建一个简单的遮罩层。

   <template>
     <div>
       <stack>
         <cover-view class="overlay" v-if="show">
           <!-- 弹窗内容 -->
           <text>这是一个遮罩层</text>
           <button @click="hideOverlay">关闭</button>
         </cover-view>
       </stack>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         show: false
       };
     },
     methods: {
       showOverlay() {
         this.show = true;
       },
       hideOverlay() {
         this.show = false;
         // 通知Vue页面隐藏完成
         plus.webview.getWebviewById('index').evalJS(`window.postMessage('hideOverlay', '*')`);
       }
     },
     mounted() {
       // 监听来自Vue页面的消息
       plus.webview.currentWebview().addEventListener('message', (event) => {
         if (event.message === 'showOverlay') {
           this.showOverlay();
         }
       });
     }
   }
   </script>
   
   <style>
   .overlay {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.5);
     display: flex;
     justify-content: center;
     align-items: center;
   }
   </style>
   

这种方式通过 postMessage 实现跨页面通信，控制 nvue 弹窗的显示和隐藏。注意，nvue 和 vue 页面之间的通信和层级管理需要根据具体需求进行调整。