uniapp web-view页面层级过高，想在web-view上层再加入按钮，采用plus.nativeObj.View实现。动态创建web-view解决切换src后丢失背景问题。

需求：有两个web-view页面，需要添加按钮，动态切换web-view的src进行页面切换

问题：uniapp的web-view层级很高，通过positon的z-index无法将其他元素置于web-view页面上层

解决方式：采用底层组件plus.nativeObj.View创建视图，该视图比web-view层级高，可在web-view上层添加按钮，图片，矩形区域，文本，富文本，输入框。

plus.nativeObj.View使用文档：https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View

web-view组件

 		<web-view class='view' :src="link"></web-view>

直接通过web-view组件，进行src切换，会存在一些问题。
1、如果链接的web-view页面比较复杂，逻辑渲染比较多，或者网速慢的话，会导致切换后的页面背景丢失，变成白色。
2、安卓设备的硬件水平更不上也会出现背景丢失的问题。

经过实验，采用动态创建web-view的形式，可以解决问题1。

动态创建web-view

		this.webViewObj = plus.webview.create("", "webview", {
 					plusrequire: "none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
 					//'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
 					// top:uni.getSystemInfoSync().statusBarHeight+93 //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
 					top: uni.getSystemInfoSync() //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
 				})
 				this.webViewObj.loadURL(url)//链接地址
 				this.webViewObj.addEventListener('loading', () => {
 					uni.showLoading({
 						title: '加载中',
 						mask: true
 					});
 				}, false);
 				this.webViewObj.addEventListener('loaded', () => {
 					uni.hideLoading();
 				}, false);
 				var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()
 				currentWebview.append(this.webViewObj); //一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭

创建按钮
采用plus.nativeObj.View创建按钮，我是直接用的按钮图片，然后绑定点击事件，在点击事件中，关闭上一个web-view，创建一个新的web-view

			let robotView = new plus.nativeObj.View('robot-btn', {
 						bottom: '0px',
 						left: '39%',
 						height: '44px',
 						width: '100px'
 					},
 					[{
 							tag: 'img',
 							id: 'robot',
 							src: '/static/robot.png',
 							position: {
 								top: '0px',
 								left: '0px',
 								width: '68px',
 								height: '28px'
 							}
 						},

 					]);
 				robotView.show();
 				robotView.addEventListener("click", (e) => {
 					this.link = this.robot
 					this.webViewObj.close()
 					this.createView(this.robot)
 				}, false);

完整代码

 <template>
 	<view class="content">
 	</view>
 </template>

 <script>
 	export default {
 		data() {
 			return {
 				link: 'http://192.168.7.61:8848/',
 				robot: 'http://192.168.7.61:8848/',
 				monitor: 'http://192.168.7.61:8845',
 				webViewObj: ''
 			}
 		},
 		onLoad() {},
 		created() {
 			this.createView(this.robot)
 			this.createBtn()
 		},
 		methods: {
 		//动态创建web-view，传入url地址
 			createView(url) {
 				this.webViewObj = plus.webview.create("", "webview", {
 					plusrequire: "none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
 					//'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
 					// top:uni.getSystemInfoSync().statusBarHeight+93 //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
 					top: uni.getSystemInfoSync() //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
 				})
 				this.webViewObj.loadURL(url)
 				this.webViewObj.addEventListener('loading', () => {
 					uni.showLoading({
 						title: '加载中',
 						mask: true
 					});
 				}, false);
 				this.webViewObj.addEventListener('loaded', () => {
 					uni.hideLoading();
 				}, false);
 				var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()
 				currentWebview.append(this.webViewObj); //一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
 			},
 			createBtn() {
 			//创建按钮1
 				let robotView = new plus.nativeObj.View('robot-btn', {
 						bottom: '0px',
 						left: '39%',
 						height: '44px',
 						width: '100px'
 					},
 					[{
 							tag: 'img',
 							id: 'robot',
 							src: '/static/robot.png',
 							position: {
 								top: '0px',
 								left: '0px',
 								width: '68px',
 								height: '28px'
 							}
 						},

 					]);
 				//显示按钮1
 				robotView.show();
				//按钮1添加点击事件
 				robotView.addEventListener("click", (e) => {
 					this.link = this.robot
 					this.webViewObj.close()
 					this.createView(this.robot)
 				}, false);

				//创建按钮2
 				let monitorView = new plus.nativeObj.View('monitor-btn', {
 						bottom: '0px',
 						left: '54%',
 						height: '44px',
 						width: '100px'
 					},
 					[{
 						tag: 'img',
 						id: 'monitor',
 						src: '/static/monitor.png',
 						position: {
 							top: '0px',
 							left: '0px',
 							width: '68px',
 							height: '28px'
 						}
 					}, ]);
 			    //按钮2显示
 				monitorView.show();
 				//按钮2添加点击事件
 				monitorView.addEventListener("click", (e) => {
 					this.link = this.monitor
 					this.webViewObj.close()
 					this.createView(this.monitor)
 				}, false);
 			}
 		}
 	}
 </script>

 <style>
 	.content {
 		position: relative;
 	}
 </style>

预览图
红框部分就是使用plus.nativeObj.View创建的图片按钮