uniapp实现webview页面关闭功能

这篇具有很好参考价值的文章主要介绍了uniapp实现webview页面关闭功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uniapp关闭webview,uniapp,1024程序员节

实现思路:

1.关闭按钮是使用原生button添加的close属性。(见page.json页面)

2.监听关闭按钮的方法。(onNavigationBarButtonTap)

3.写实现关闭webview所有页面的逻辑。

废话不多说,直接上代码

1.page.json添加关闭按钮

uniapp关闭webview,uniapp,1024程序员节

2.webview页面实现关闭逻辑

uniapp关闭webview,uniapp,1024程序员节

实现代码:文章来源地址https://www.toymoban.com/news/detail-771272.html

<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页面关闭功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 跨平台开发神器如何在Uniapp中使用WebView实现与Web页面的通讯!

    Uniapp 是一个跨平台的开发框架,可以同时开发出 iOS、Android、H5 等多个平台的应用。在开发过程中,我们可能需要与 Web 页面进行通讯,这时可以使用 WebView 组件来实现。 本教程将介绍如何在 uniapp 中使用 WebView 组件与 Web 页面进行通讯。 首先,我们需要创建一个 uniapp 项目。

    2024年02月09日
    浏览(53)
  • uniapp微信小程序全局实现发送给朋友、分享到朋友圈功能(不需要每个页面都配置)

    使用uniapp开发小程序的过程中需要实现: 点击右上角,展开,发送给朋友、分享到朋友圈功能 我们先看没有配置时微信的分享和转发按钮的状态: 配置完成后分享和转发按钮的状态: 接下来分享全局实现的步骤(不需要在每个页面单独配置): 在utils文件夹下新建share.js文

    2024年04月14日
    浏览(71)
  • 1024 程序员节,圆一个小小的梦

    Hope is a good thing, maybe the best of things, and no good thing ever dies. 希望是件美丽的东西,也许是最好的东西,而美好的东西是永远不会消逝的。 大家好,我是勇哥 。 1024 , 程序员节,圆了我一个小小的梦。 花了半年时间,我写了一本电子书 ,书名是:《 RocketMQ4.X设计精要 》,我想

    2024年02月08日
    浏览(66)
  • 小程序通过webView打开H5页面并传参(包含webView业务域名配置)、H5页面实现返回小程序并实现传参

    小程序内嵌webview实现跳转、传参 1、小程序通过webView打开H5页面并传参 2、H5接收小程序传参,H5返回小程序并实现传参,小程序接收H5传参 一、小程序通过webView打开H5页面并传参 在小程序中一般通过webview打开H5页面 常见问题: 1、小程序通过webview打开H5页面,需要配置业务域

    2024年02月12日
    浏览(44)
  • 程序员帮助程序员!用1024拼出更美好的云计算未来

    中国的云计算市场是全球增长最快的。据预测,中国公共云服务市场的全球份额将从 2020 年的 6.5% 增加到 2024 年的 10.5% 以上。 伴随行业的迅速发展,催生了云计算相关人才需求的井喷增长,供需矛盾凸显。据德意志银行分析报告,越来越多IT企业关闭了线下IDC,开始把业务迁

    2024年02月16日
    浏览(56)
  • 小程序webview组件,小程序和webview交互,小程序内联h5页面,小程序webview内网页实现微信支付

    小程序支持webview以后,我们开发的好多h5页面,就可以直接在小程序里使用了,比如我们开发的微信商城,文章详情页,商品详情页,就可以开发一套,多处使用了。我们今天来讲一讲。在小程序的webview里实现微信支付功能。因为微信不允许在小程序的webview里直接调起微信

    2024年02月09日
    浏览(57)
  • 1024程序员节特辑:【Spring Boot自动配置原理揭秘】

    主页传送门:📀 传送   Spring Boot 是一个用于创建独立的、生产级别的 Spring 应用程序的框架。它极大地简化了 Spring 应用程序的开发过程,其中一个关键的功能就是自动配置(Auto-Configuration)。   自动配置可以根据项目需求自动配置各种服务和组件,它可以帮助开发者

    2024年02月08日
    浏览(66)
  • 解决github ping不通的问题(1024程序员节快乐!

    1024程序员节快乐!( 随便粘贴一个文档,参加活动 域名解析(域名-IP):https://www.ipaddress.com/ Ubuntu平台 github经常ping不通或者访问缓慢,方法是更改hosts文件 在hosts里添加github的ip 140.82.114.4 www.github.com 199.232.5.194 github.global.ssl.fastly.net 54.231.114.219 github-cloud.s3.amazonaws.com 可以访

    2024年01月18日
    浏览(77)
  • 好用且免费的CodeWhisperer,给1024程序员节送礼来了

          国庆期间没有胆量去人从众的景点,关在家里刷手机时意外在亚马逊的User Group公众号上发现了CodeWhisperer这么个好东西(bu yao qian),以后撸代码也可以提高生产力(fang yang mo yu)了,这还不赶紧上手试一下。看官方介绍说它支持流行的IDE开发工具,包括VS Code、Intelli

    2024年02月08日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包