本文介绍: 具体是webview加载链接以后,打开H5里面游戏手机进入横向全屏状态,当退出游戏时候游戏H5会通过webview通信机制发送消息,告诉uanipp退出这个webview页面iOS手机问题,但是Android手机退出游戏时候接收到了H5发送消息,但是只是退出全屏状态,并没有退出这个webview页面,导致用户需要按一下物理按键返回才会退出我们一个H5的小游戏链接,当放在uniapp开发的APP上面的时候出现Android手机全屏以后无法退出问题。正常的处理uniapp方法

我们一个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"&gt;
		</iframe&gt;
		<!-- 		<web-view id="iframe" :style="{ width: frameWidth + 'px', height: frameHeight + 'px' }" :src="typeUrl"
			ref="iframe"&gt;
		</web-view&gt; -->
	</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>

原文地址:https://blog.csdn.net/wangqiuwei07/article/details/128019902

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_22974.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注