subNVue的一些实验

最近在熟悉uni-app的api，准备在demo里使用遮罩层，找官方文档，一顿搜索点到了subNVue，于是跟着开发指南和文档用subNVue写一个遮罩试试（毕竟官方说这个很强大，可以盖住原生组件，还能实现内部滚动）。
根据我的测试结果，如果仅仅根据uni-app的文档，我不能写出一个令自己满意的遮罩层，比如说，你不能阻止手机上的虚拟返回键关闭遮罩，你不能自己控制是否通过点击遮罩关闭遮罩层。
根据文档中的一些线索：

1. ‘Android平台4.0以上系统才支持“transparent”背景透明样式’。

2. 除 popup 外，其他值域参考 5+ webview position 文档。
   去查看H5+的webview文档（subNVue是对H5+webview的一层封装，但是封装的功能不全，要真正发挥subNVue的强大功能还是要结合plus对象）。
   下面是我的测试代码（）：
   在page.json里添加如下配置：

   {  
   "path": "pages/tabBar/home/home",  
   "style": {  
       "enablePullDownRefresh": false,  
       "navigationStyle": "default",   
       "navigationBarTitleText": "Home",  
       "app-plus": {  
           "titleNView": { // 标题栏样式  
               // "homeButton": true,  
               "buttons": [  
                   {  
                       "type": "back",  
                       "float": "left"  
                   },  
               ]  
           },  
           "subNVues":[{   
                  "id": "test", // 唯一标识    
                  "path": "/paltform/app-plus/subNVue/overlay", // 页面路径    
                  "type": "popup",  
                  "style": {  // 应该对应的是H5+中的webviewStyle  
                  "position": "absolute",    
                      "dock": "right",    
                      "width": "100upx",    
                      "height": "150upx",    
                       // "background": "rgba(0,0,0,0.5)",  
                  "mask": "none",//mask的值很重要，设置成none点击遮罩不会再关闭遮罩了  
                  "backButtonAutoControl": "none"   // 如果值是quit点击虚拟返回键会直接退出app  
                  }    
           }]    
       }  
   
   }  
   }

   overlay.vue:

<template>  
    <view class="tt">  
        <image class="swiper-item home-banner-item" mode="widthFix" src="https://pic2.zhimg.com/v2-25f301124c7524029d043a038655c829_1440w.jpg?source=172ae18b"></image>  
        </view>  

</template>  

<script>  

    export default {  
        data() {  
            return {  

            }  
        },  
        onLoad: function () {  
            const subNVue = uni.getCurrentSubNVue(); // subNVue对应的webview 对象  
            console.log(plus.webview.currentWebview().id); // package.json里设置的subNVue的id  
            console.log(subNVue.id); // package.json里设置的subNVue的id  
            console.log(plus.webview.currentWebview().opener());//创建subNVue对应的webview 的父webview，与 home.vue的webview是同一个webview  
            subNVue.canBack(function(e){  
                     console.log('是否可返回：'+e.canBack);  
                    });  
            // subNVue.addEventListener('hide', function(){  
            //     // subNVue.setStyle({mask:'rgba(0,0,0,1)'});  
            //  console.log(123000);  
            // },false);  
            // console.log(subNVue.parent());  
            subNVue.setStyle({  
                background: '#ff4050',  
            })  
            plus.key.addEventListener('backbutton',function() {  
                console.log('backbutton'); // 这个可以拦截手机上的虚拟返回键  
                return true;  
            })  
        },  
        onUnload:function(){  

        },  
        onBackPress() {  
            return true; // 这个貌似不起作用  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  

</style>  

只是初步测试，希望uni-app官方能把文档给写清楚，不要让开发者猜，提高大家的工作效率。