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 3 和 ECharts,可以快速实现交互性强、样式美观的桑基图,本文将通过完整的代码示例,带你一步步完成一个桑基图的实现,需要的朋友可以参考下2025-01-01
在开发一个复杂的Web应用时,权限管理是绕不开的核心环节,本文将和大家一起探索并实现一个基于角色权限管理系统,感兴趣的小伙伴可以跟随小编一起学习一下2026-03-03
在现代的前端开发中,用户体验的重要性不言而喻,为了让应用程序更加生动和引人注目,动画和过渡效果是必不可少的元素,本文将以 Vue3 为基础,深入探讨如何在应用程序中实现动画过渡,以及一些技巧和最佳实践,需要的朋友可以参考下2025-01-01
详解关于Vue版本不匹配问题(Vue packages version mismatch)
这篇文章主要介绍了详解关于Vue版本不匹配问题(Vue packages version mismatch)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vuejs-手把手教你写一个完整的购物车实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了Vue中key的原理以及diff算法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
在 Vue 中,template 模板是我们编写组件的主要方式之一,而 Vue 内部会将这些模板转换为 render 函数,render 函数是用于创建虚拟 DOM 的函数,通过它,Vue 能够高效地追踪 DOM 的变化并进行更新,下面我会通俗易懂地详细解释 Vue 如何将 template 转换为 render 函数2024-10-10
在Vue中，computed属性是一种计算属性，它的值是根据其他数据的值动态计算出来的，下面小编主要来和大家聊聊Vue 3的组合式API中如何使用computed属性，感兴趣的小伙伴快跟随小编一起了解一下吧2023-06-06
本文主要介绍了vue2.x el-table二次封装实现编辑修改，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
Nuxt3项目搭建过程(Nuxt3+element-plus+scss详细步骤)
这篇文章主要介绍了Nuxt3项目搭建（Nuxt3+element-plus+scss详细步骤）,本次记录一次使用Nuxt3搭建前端项目的过程，内容包含Nuxt3的安装，基于Vite脚手架（默认）构建的vue3项目，element-plus的安装配置，scss的安装，目录结构的创建和解释，需要的朋友可以参考下2022-12-12
最新评论