video在app端的图层会过大

video在app中为何会出先图层无穷大呢？

最近在做一个外包项目时，详情中会有一个video，而评论的按钮会被video覆盖，因为app中的代码解析方式，是weex式解析，而video又是uni中的原生组件，uni中原生组件的图层是无穷大的，很多网上的大佬给出了好几种方案，其中最多的是nvue，我也是在试过之后才发现，nvue并不是最佳解决方案（对于我开发的这个项目而言）
话不多说：一下有三种解决方案（解决方案当然不止三种），而我用的是第三种。

使用plus.nativeObj方法的解决方案

onShow(){
		// #ifdef APP-PLUS
		var icon = plus.nativeObj.View.getViewById("icon");
		//如果已经存在
		if(icon){    
            //则显示
			icon.show();
		}else{
            //不存在  则创建
			this.createtab();
		}	
		// #endif
},
//离开页面隐藏
onUnload(){
           //在app端不支持cover-view嵌套
		// #ifdef APP-PLUS
			var icon = plus.nativeObj.View.getViewById("icon");
			icon.hide();
		// #endif
	},
onHide(){
		// #ifdef APP-PLUS
			var icon = plus.nativeObj.View.getViewById("icon");
			icon.hide();
		// #endif
},
methods: {
		createtab: function(){
		        // 设置水平居中位置
				var bitmap = new plus.nativeObj.Bitmap('bmp1');
		        var view = new plus.nativeObj.View('icon', {
		            top: '30px',
		            left: '10px',
		            width: '30px',
		            height: '30px'
		        });
		        view.drawBitmap('/static/back.png', {
		            top: '0px',
		            left: '0px',
		            width: '100%',
		            height: '100%'
		        });
		        view.addEventListener("click", function(e) {
		           uni.navigateBack({
		               delta: 1
		           });
		        }, false);
		        view.show();
		    },
}

这种是在掘金中发现的一篇帖子，本人也试过了，并不适合我这个项目，果断放弃，不过其他小伙伴可以参考哦！

nvue ：也是比较常用解决方案

首先要在page.json中申明一个nvue的文件，其中要注意的几点：里面的id是唯一的标识，类似于主键，接下来就是路径，path里面的路径最好是在文件夹下两层，不要问为什么，因为我试过，没有在下两层的时候，没效果。= = 。

{
                    "path": "community/postDetail",
                    "style": {
                        "navigationBarTitleText": "帖子详情",
                        "navigationStyle": "custom",
                        "app-plus": {
                            "titleNView": false,
                            "subNVues":[{
								"id": "popup",
								"path": "community/postDetail/subNVue/popup",
								"style": {
									"position":"absolute",
									"bottom":"0rpx",
									"left":"0rpx",
									"margin": "auto",
									"width": "100%",
									"height": "118rpx"
								}
							}]
                        }
                    }
                }

在父窗体中获取子窗体，通过page.json中的id:

nvue中有很多对css的限制，可以参开一下：https://www.cnblogs.com/cyhsmile/p/13925477.html

不过这种方式在我这个项目中也行不通，我发现input调用微软键盘的时候会出现bug，我也是在做完所有的准备，准备写的时候才知道的，于是我又换了一中思路，

v-html:这种思路是比较难受的，虽然难受，但是还是能实现的

在页面渲染的时候，利用v-html将video包裹在view中，再给评论框给上一个z-index，层级问题就可以得到解决：

<view class="imgArr videobox">
                <view class="videobox1" v-html="videoHtml" @click="playItemVideo(videoHtml)"></view>
                <!-- <video class="videobox" v-if="videourl" :src="videourl" controls x5-playsinline
                    x-webkit-airplay="allow" webkit-playsinline playsinline="true"></video> -->
            </view>

这里面的参数可以给到包裹在里面的video，是用来兼容苹果手机的，

我们在点击的时候就可以直接给视频来一手autoplay。
好啦！菜鸟献上，不喜勿喷！