uniapp实现webview页面关闭功能的代码示例
更新时间：2024年03月01日 10:58:01 作者：爱池鱼的酱酱仔
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页面关闭功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Rsbuild,一个基于Rspack的高效Web构建工具,将Rspack的强大功能与易用性相结合,是你项目搭建的不二之选,Rsbuild不仅提供了开箱即用的体验,还引入了高性能的构建机制,本文给大家介绍了Vue2迁移Rsbuild详细步骤,需要的朋友可以参考下2024-10-10
这篇文章主要给大家介绍了关于vue3使用vue3-print-nb实现区域打印功能的相关资料,在日常操作中,相信很多人在Vue怎么用插件实现打印功能问题上存在疑惑,需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了vue实现列表无缝滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
在页面进行pdf预览的时候，由于文件不能够打印和下载很难满足客户的需求，接下来通过本文给大家介绍vue使用pdf.js来进行pdf预览,需要的朋友可以参考下2021-12-12
使用yarn build 打包vue项目时静态文件或图片未打包成功的问题及解决方法
这篇文章主要介绍了使用yarn build 打包vue项目时静态文件或图片未打包成功的问题及解决方法，解决方法不复杂通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-08-08
这篇文章主要介绍了vue解决刷新页面时会出现变量闪烁的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
这篇文章主要介绍了Vue中使用eslint和editorconfig方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要给大家介绍了关于Vue中添加滚动事件设置的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章主要介绍了element-ui中按需引入的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
本文主要介绍了VUE项目自动检测服务端是否发布了新版本,通过轮询方式检测Vue项目新版本并提示用户刷新页面,具有一定的参考价值,感兴趣的可以了解一下2025-01-01
最新评论