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

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

参考资料

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

代码(兼容h5与app)

父页面

html 复制代码
<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

html 复制代码
<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

html 复制代码
<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>
相关推荐
腾讯TNTWeb前端团队4 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪8 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪8 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom9 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom9 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom9 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试