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页面关闭功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章给大家整理了关于Vue如何实现响应式系统的相关知识点内容，有兴趣的朋友可以参考学习下。2018-07-07
今天小编就为大家分享一篇Vue实现页面添加水印功能，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
很多朋友在token过期时刷新页面，页面长时间未操作，再刷新页面时，第一次弹出“token失效,请重新登录!”提示，针对这个问题该怎么处理呢，下面小编给大家带来原因分析及解决方法，一起看看吧2021-07-07
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,这篇文章主要给大家介绍了关于如何在Vue 3中扩展Vue Router链接的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要介绍了vue+axios+promise实际开发用法详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了vue实现动态表格提交参数动态生成控件的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
Ant Design moment对象和字符串之间的相互转化教程
这篇文章主要介绍了Ant Design moment对象和字符串之间的相互转化教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vue使用ElementUI时导航栏默认展开功能的实现,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
这篇文章主要介绍了Vue项目如何打包成移动端APP,本文通过图文示例相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
这篇文章主要给大家介绍了关于vue列表数据删除后主动刷新页面及刷新方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
最新评论