需求：有两个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);
完整代码文章来源：https://www.toymoban.com/news/detail-514374.html
<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创建的图片按钮
文章来源地址https://www.toymoban.com/news/detail-514374.html
到了这里，关于uniapp web-view页面层级过高，想在web-view上层再加入按钮，采用plus.nativeObj.View实现。动态创建web-view解决切换src后丢失背景问题。的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
