uniapp解决app端不能用＜web-view＞将外部页面嵌入当前页面的问题

参考资料

android项目嵌套uniapp页面及交互 uniapp嵌套h5页面

代码（兼容h5与app）

父页面

<template>
	<view class="contract view-container">
		<view class="contract-box f-s-s">
			// #ifdef H5
			<scroll-view :scroll-y="true" class="scroll">
				<web-view src="XXX">
				</web-view>
			</scroll-view>
			// #endif
			// #ifdef APP-PLUS
			<Content :url="XXX"
				:paddingTop="57.65" :paddingBottom="16.75" :paddingLeft="16.75" :paddingRight="16.75"></Content>
			// #endif
		</view>
	</view>
</template>

<script setup lang="ts">
	import Content from './content.vue'
</script>

<style lang="scss" scoped>
	.contract {
		position: relative;
		height: 100vh;
		padding: 57.65rpx 16.75rpx 16.75rpx;

		&:before {
			position: absolute;
			left: 0;
			top: 0;
			content: '';
			width: 100%;
			height: 114rpx;
			background: linear-gradient(180deg, rgba(61, 61, 61, 0.5) 0%, rgba(61, 61, 61, 0) 100%);
		}

		&-box {
			position: relative;
			height: 100%;
			overflow: hidden;

			.scroll {
				height: 100%;
			}
		}
	}
</style>

子组件

Vue2

<template>
	<view>
	</view>
</template>

<script>
	//将要创建的webview对象
	var wv;
	export default {
		props: {
			url: {
				type: String,
				default: '',
			},
			paddingTop: {
				type: Number,
				default: 0,
			},
			paddingBottom: {
				type: Number,
				default: 0,
			},
			paddingLeft: {
				type: Number,
				default: 0,
			},
			paddingRight: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				windowInfo: null
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowInfo = res;
					this.createWvAndLoadUrl(this.url);
				}
			});
		},
		beforeDestroy() {
			//关闭webview对象
			if (wv) {
				wv.close();
				//wv.hide();
			}
		},
		methods: {
			createWvAndLoadUrl(url) {
				// #ifdef APP-PLUS
				wv = plus.webview.create(url, "webview", {
					plusrequire: "none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
					top: uni.upx2px(this.paddingTop),
					left: uni.upx2px(this.paddingLeft),
					scalable: true, // 窗口是否可缩放
					height: this.windowInfo.windowHeight - uni.upx2px(this.paddingTop + this.paddingBottom),
					width: this.windowInfo.windowWidth - uni.upx2px(this.paddingLeft + this.paddingRight),
					background: 'transparent'
				})
				var currentWebview = this.$parent.$scope
					.$getAppWebview(); // 此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()
				currentWebview.append(wv); //一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
				setTimeout(function() {
					console.log(wv.getStyle());
				}, 1000); //如果是首页的onload调用时需要延时一下，二级页面无需延时，可直接获取
				// #endif
			}
		}
	}
</script>

Vue3、组合式、ts

<template>
	<view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onUnmounted } from "vue";
	const props = withDefaults(
		defineProps<{
			url : string;
			paddingTop : number;
			paddingBottom : number;
			paddingLeft : number;
			paddingRight : number;
		}>(),
		{
			url: '',
			paddingTop: 0,
			paddingBottom: 0,
			paddingLeft: 0,
			paddingRight: 0,
		}
	);
	var wv : any;
	const windowInfo = ref();
	const createWvAndLoadUrl = (url : string) => {
		// #ifdef APP-PLUS
		wv = plus.webview.create(url, "webview", {
			plusrequire: "none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
			top: uni.upx2px(props.paddingTop) as unknown as string,
			left: uni.upx2px(props.paddingLeft) as unknown as string,
			scalable: true, // 窗口是否可缩放
			height: (windowInfo.value.windowHeight - uni.upx2px(props.paddingTop + props.paddingBottom)) as unknown as string,
			width: (windowInfo.value.windowWidth - uni.upx2px(props.paddingLeft + props.paddingRight)) as unknown as string,
			background: 'transparent'
		})
		let pages = getCurrentPages();
		let page : any = pages[pages.length - 1];
		let currentWebview = page.$getAppWebview();
		currentWebview.append(wv); //一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
		setTimeout(function () {
			console.log(wv.getStyle());
		}, 1000); //如果是首页的onload调用时需要延时一下，二级页面无需延时，可直接获取
		// #endif
	}
	onMounted(() => {
		uni.getSystemInfo({
			success: (res) => {
				windowInfo.value = res;
				createWvAndLoadUrl(props.url);
			}
		});
	})
	onUnmounted(() => {
		//关闭webview对象
		if (wv) {
			wv.close();
		}
	})
</script>