uniapp实现webview页面关闭功能的代码示例
作者：爱池鱼的酱酱仔
uniapp用web-view打开一个网页,网页中点击跳转到下一层级的网页,一层层深入,点击返回键或者页面上方返回按钮只能一层层往回退,下面这篇文章主要给大家介绍了关于uniapp实现webview页面关闭功能的相关资料,需要的朋友可以参考下
实现思路：
1.关闭按钮是使用原生button添加的close属性。（见page.json页面）
2.监听关闭按钮的方法。（onNavigationBarButtonTap）
3.写实现关闭webview所有页面的逻辑。
废话不多说，直接上代码
1.page.json添加关闭按钮
2.webview页面实现关闭逻辑
实现代码：
<template>
<view v-if="params.url">
<web-view :webview-styles="webviewStyles" :src="`${params.url}`"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
params: {
url: "https://www.hgjt.com/"
},
webviewStyles: {
progress: {
color: "#027AFF"
}
}
}
},
props: {
src: {
type: [String],
default: null
}
},
onLoad(event) {},
onBackPress(event) {
console.log(event, 'event')
},
onNavigationBarButtonTap(e) {
if (e.type == 'close') {
let pages = getCurrentPages()
let page = pages[pages.length - 1];
let currentPages = page.$getAppWebview()
let children = currentPages.children()
if (children.length === 0) {
uni.navigateBack()
} else {
children[0].close()
setTimeout(() => {
uni.navigateBack()
}, 80)
}
return true;
}
}
}
</script>附：uniapp使用webview的页面需要返回两次
在使用uniapp的webview组件时，如果需要返回两次才能退出页面，有可能是因为在webview中嵌入的H5页面中使用了history.back()方法，导致返回栈中多了一层。可以尝试在H5页面中使用history.go(-1)方法或者uni.navigateBack()方法返回上一级页面，这样就可以避免返回栈中多余的一层，实现一次返回退出页面的效果。另外，也可以在webview组件中设置vue-router的mode为history模式，这样就可以使用uni.navigateBack()方法进行返回，而不会出现返回两次的情况。
总结
到此这篇关于uniapp实现webview页面关闭功能的文章就介绍到这了,更多相关uniapp webview页面关闭功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！