记录生活的点点滴滴

0%

教你在uniapp中解决video组件在app端层级过高的问题

发表于 更新于 分类于 阅读次数：
本文字数： 17k 阅读时长 ≈ 15 分钟

解决video层级过高，有两种方法

1.使用subNvue

subNvue，是 vue 页面的原生子窗体，把weex渲染的原生界面当做 vue 页面的子窗体覆盖在页面上。它不是全屏页面，它给App平台vue页面中的层级覆盖和原生界面自定义提供了更强大和灵活的解决方案。它也不是组件，就是一个原生子窗体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
     "path": "pages/index/index",
    "style": {
        "app-plus": {  
            "subNVues":[{  
                "id": "popup", // 唯一标识  
                "path": "pages/index/subNVue/hello", // 页面路径  
                //"type": "popup",  //原生子窗口内置样式，可取值：'popup',弹出层；"navigationBar",导航栏
                "style": {  
                    "position":"absolute",
                    "height": "60px",
                    "top":"40px",
                    "background":"transparent"
                }  
            }]  
        } 
    }
}

在hello.nvue中最外层view中必须要写id,必须要和subNVues里面的id一致，否则不会显示

1
2
3
<view id="popup">
	内容
</view>

让原生子窗体显示的时候调用显示的方法就可以了。但是nvue中里面很多css不支持，详情请自行查看官方文档

1
2
3
const subNvue=uni.getSubNVueById('popup');   //获取 
subNvue.show()  // 显示
subNvue.hide() //隐藏

2.使用 5+App提供的 plus.nativeObj.view

App端还可以使用plus.nativeObj.view绘制原生内容，5+的plus.nativeObj.view，本质是一种类canvas的画布，可以自由的draw内容上去，更新管理也需要自己维护操作。
包括想在原生控件比如视频、地图上加点什么东西，因为HTML的组件是盖不住原生组件的，都可以使用nview来做。
在这里插入图片描述

这里的下面的评论定位，就是用plus.nativeObj.view实现的，层级高于video

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
//#ifdef APP-PLUS
	//plus.nativeObj.view主要是给我们提供了画布，能让我们在上面画一些自己想要的控件。
	//创建一个view，id为test，我们可以根据id对它进行操作，默认是没有背景的。
	this.view = new plus.nativeObj.View('test',
		{bottom:'0px',left:'0px',height:'60px',width:'100%'});
	//在这个view上面画一个矩形，填充白色背景，color: #fff,铺满全屏。	
	this.view.drawRect({color:'#fff'},
			{top:'0px',left:'0px',width:'100%',height:'100%'})
	//z这个view上面画一个input输入框，input输入框只能设置特定的属性，也不能设置背景。想要设置背景，就才有上面的方法。
	this.view.drawInput({top:'8px',left: '35px', width:'280px',height:'30px'},
			{
	type: 'text',
	placeholder: this.placeHolder,
	borderColor: '#eee',
	background:'red',
	borderRadius:'15px',
	onFocus:()=>{
		//监听输入框的聚焦事件。
		this.hideTig()
	}
	},'input');
	//给input输入框填充背景
	this.view.drawRect({color:'#eee',borderWidth:'2px',radius:'14px'},
			{top:'8px',left:'15px',width:'300px',height:'30px'});
	//这个是左边的按钮，因为没有提供画按钮的方法，只能画一个view填充上文字。来实现按钮		
	this.view2 =  new plus.nativeObj.View('aps',
		{bottom: '23px' ,zIndex: '10',right:'20px',height:'30px',width:'60px'});
		//给view填充背景。
	this.view2.drawRect({color:'rgba(91,183,28,1)',borderWidth:'2px',radius:'14px'},
			{top:'0px',left:'0px',width:'100%',height:'100%'});
	//给view加上文字
	this.view2.drawText('发送', {top:'0px',left:'0px',width:'100%',height:'100%'}, {align:'center',color: '#fff'});
	//给按钮加上点击事件
	this.view2.addEventListener("click", this.fs, false)
	//让view显示出来
	this.view.show()
	this.view2.show()
//#endif

获取input输入框的值

1
2
//id是你input输入框的id
let value = this.view.getInputValueById('input')

这里不能动态设置input输入框的值，也不能动态设置placeholder的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//我的业务是@某个人要改变placeholder的值，给用户已提示。我这个采用的是让上面的内容重画一次，实现动态改变placeholder的值，这里的view一定要存储data中，而且不能重新给view赋值，否则，你会发现关闭页面你这个东西清除不掉，会遮掉tabbar。

//reset会清空这个view里面的input输入框和画的背景。
this.view.reset()
this.view.drawRect({color:'#fff'},
		{top:'0px',left:'0px',width:'100%',height:'100%'})
this.view.drawInput({top:'8px',left: '35px', width:'280px',height:'30px'},
		{
type: 'text',
placeholder: this.placeHolder,
borderColor: '#eee',
background:'red',
borderRadius:'15px',
onFocus:()=>{
	this.hideTig()
}
},'input');
this.view.drawRect({color:'#eee',borderWidth:'2px',radius:'14px'},
{top:'8px',left:'15px',width:'300px',height:'30px'});

等页面关闭的时候，一定到把这个view给关闭，不然它会一直存在，层级很高，会遮住你的tabbar

1
2
3
4
5
6
7
onUnload(){
	//因为只要app端才可以使用这个plus.nativeObj.view，所有这些代码一定要写到uniapp的条件编译中。
	//#ifdef APP-PLUS
		this.view.close()
		this.view2.close()
	//#endif
}

最后说明：这只是本人自己的一些见解，有不足的地方，欢迎大家前来指正。

-------------本文结束感谢您的阅读-------------