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>
相关推荐
今晚打老虎z6 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户38022585982412 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴17 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干20 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗22 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端
独立开阀者_FwtCoder27 分钟前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github
独立开阀者_FwtCoder30 分钟前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github
snakeshe101031 分钟前
优化 Mini React:实现组件级别的精准更新
前端
前端小盆友32 分钟前
从零实现一个GPT 【React + Express】--- 【2】实现对话流和停止生成
前端·gpt·react.js
京东云开发者37 分钟前
行云前端重构之路:从单体应用到 Monorepo 的血泪史
前端