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>