uniapp webview加载URL的时候,页面全屏问题

我们有一个H5的小游戏链接,当放在uniapp开发的APP上面的时候出现Android手机全屏以后无法退出的问题。
具体是webview加载链接以后,打开H5里面的游戏手机会进入横向全屏状态,当退出游戏的时候游戏H5会通过webview的通信机制发送消息,告诉uanipp退出这个webview页面,iOS手机没问题,但是Android手机退出游戏的时候,接收到了H5发送的消息,但是只是退出了全屏状态,并没有退出这个webview页面,导致用户还需要按一下物理按键的返回才会退出。
经过多次测试,最终通过renderJs+iframe的方式才解决了问题,iframe可以避免出现退出两次才退出全屏状态的问题,但是无法接到H5发送的消息,必须结合renderjs才可以接到消息。

使用iframe来加载H5链接

<template>
	<view>
		<iframe id="iframe" :style="{ width: frameWidth + 'px', height: frameHeight + 'px' }" :src="typeUrl"
			ref="iframe">
		</iframe>
		<!-- 		<web-view id="iframe" :style="{ width: frameWidth + 'px', height: frameHeight + 'px' }" :src="typeUrl"
			ref="iframe">
		</web-view> -->
	</view>
</template>

正常的处理uniapp的方法,
receiveMessage 方法是接收renderjs发送的消息,动态iframe宽高实现横竖屏的大小控制

<script>
	export default {
		data() {
			return {
				typeUrl: "",
				frameHeight: getApp().globalData.windowHeight,
				frameWidth: getApp().globalData.windowWidth,			};
		},
		onShow() {},
		onLoad(e) {
		
		},
		methods: {
			receiveMessage(arg) {
				console.log("接收到renderjs回传的消息", arg);
				// const action = data.data.data.arg.action;
				// console.log('收到消息 arg', data.data.data.arg);
				const action = arg.action;
				console.log(" 收到消息action", action);

				if (action == "back") {
					this.back();
				} else if (action == "share") {
					this.uniShare(arg);
				} else if (action == "LANDSCAPE") {
					// #ifdef APP-PLUS
					plus.screen.lockOrientation("landscape");
					this.$nextTick(() => {
						this.frameHeight = getApp().globalData.windowWidth;
						this.frameWidth = getApp().globalData.windowHeight;
					});
					// #endif
				} else if (action == "PORTRAIT") {
					// #ifdef APP-PLUS
					plus.screen.lockOrientation("portrait-primary");
					this.$nextTick(() => {
						this.frameHeight = getApp().globalData.windowHeight;
						this.frameWidth = getApp().globalData.windowWidth;
					});

					// #endif
				}
			},
			back() {
				// 如果是H5,并且路由只有一级,为了避免返回不了首页
				// #ifdef H5
				const currentPages = getCurrentPages()
				if (currentPages.length === 1) {
					uni.reLaunch({
						url: '/pages/home/index'
					})
				} else {
					uni.navigateBack()

				}
				// #endif
				// #ifdef APP-PLUS
				uni.navigateBack();
				// #endif
			},
		},
	};
</script>

处理renderjs的方法,这里是为了能接收到H5发送来的消息,然后把消息内容转接到uniapp去处理

<script module="test" lang="renderjs">
	export default {
		mounted() {
			window.addEventListener("message", this.receiveMsg, false);
		},
		methods: {
			receiveMsg(data) {
				console.log('收到renderjs消息', data);
				const arg = data.data.data.arg;
				console.log('收到消息 arg', data.data.data.arg);
				if (arg) {
					this.$ownerInstance.callMethod('receiveMessage', data.data.data.arg)
				}
			},
		}
	}
</script>

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值