slambb_proadvanced_tool/pages/game/subGame/subGame.nvue

<template>
	<view>
		<view class="web-view">
			<web-view class="web-view-child" :src="'http://'+LocationGameUrl" ref="webview" @pagestart="onPageStart"
				@onPostMessage="handlePostMessage" @error="onError"></web-view>
		</view>

		<view class="web-back" @click="navBack">
			<image style="width: 40rpx;height: 40rpx;" src="/static/gameCloseW.png"></image>
		</view>
	</view>



</template>

<script>
	var currentWebview;
	var orientId = null,
		accId = null;

	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		computed: mapState(['LocationGameUrl']),
		data() {
			return {
				url: '',
				error: '',
				PageStart: false, // 记录网页请求的加载状态，true 加载成功 false 加载失败
				//当前选择的item
				decodeItem: null,
				bMyAttitudeListen: false,
				count: 0,
				startGame: false,
				currentWebview: null,
			}
		},
		onLoad() {
			let _self = this;
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			currentWebview = page.$getAppWebview();
			
			//监听一次调用setOnceGameOption
			console.log("子组件初始化");
			uni.$once("setOnceGameOption", (option) => {
				//http://192.168.1.12:7456
				// if (option) {
				// 	this.decodeItem = JSON.parse(decodeURIComponent(option));
				// 	this.url = this.decodeItem.gameWebUrl;
				// }
			});
			//子窗体onload 后获取父窗体的onload数据
			uni.$emit("game-load");

			uni.getCurrentSubNVue().addEventListener("hide", function() {
				console.log("subNVue子窗体已隐藏！");
				//通知游戏，页面退出
				_self.sendMessage("onSubHide", {
					msg: '退出页面'
				});

				uni.$off('updateBLEDeviceData', _self.gWatchBLEUpdate);
				_self.$store.state.bGamePlaying = false;
				uni.$emit("game-unload", {});


			});
			//*****注释蓝牙操作******
			//监听物理返回按钮
			plus.key.addEventListener('backbutton', () => {
				this.navBack();
			}, false);
			// uni.$on("showGame", (option) => {
			// 	this.onShow();
			// });

		},
		onUnload() {
			uni.$off('updateBLEDeviceData', this.gWatchBLEUpdate);
			this.$store.state.bGamePlaying = false;
			console.log("subNVue子窗体 onUnload！");
			uni.$emit("game-unload");
		},
		methods: {
			...mapMutations([]),
			navBack() {
				this.$store.state.bGamePlaying = false;
				// uni.$off('updateBLEDeviceData', this.gWatchBLEUpdate);
				uni.getCurrentSubNVue().hide('auto');
			},
			onShow() {
				//设置store状态
				this.$store.state.bGamePlaying = true;
				// uni.$on('updateBLEDeviceData', this.gWatchBLEUpdate);
				uni.getCurrentSubNVue().show('fade-in', 250, () => {});
			},
			//蓝牙断开连接时候
			callbackCloseBLE() {
				this.sendMessage("onDeviceClose", {
					msg: '设备断开连接。'
				});
			},
			//蓝牙状态回调
			callbackBLEState(res) {
				this.sendMessage("onDeviceState", res)
			},
			/**
			 * 统一发送信息
			 * @param {Object} gameData
			 */
			sendMessage(functionName, gameData) {
				let data = {
					"funName": functionName,
					"gameData": gameData
				}
				if (!this.PageStart) {
					console.warn("页面未初始化不能传消息", data);
					return;
				}
				let initStr = JSON.stringify(data);
				// console.log(initStr);
				this.$refs.webview.evalJs("onWebViewMessage(" + initStr + ")");
			},
			handlePostMessage: function(postData) {
				console.log("handlePostMessage得到参数", postData.detail);
				let temp = postData.detail.data[0];
				let gameData = temp.gameData;
				if (temp.funName == "onStartAccAndGyro") {
					this.bMyAttitudeListen = true;
					this.count = 0;
					//监听蓝牙回调
					// uni.$off('updateBLEDeviceData', this.gWatchBLEUpdate);
					// setTimeout(() => {
					// 	uni.$on('updateBLEDeviceData', this.gWatchBLEUpdate);
					// }, 500)
					uni.$on('updateBLEDeviceData', this.gWatchBLEUpdate);
				} else if (temp.funName == "onStopAccAndGyro") {
					this.bMyAttitudeListen = false;
					//监听蓝牙回调
					uni.$off('updateBLEDeviceData', this.gWatchBLEUpdate);
				}
			},
			onPageStart: function(e) {
				// 监听页面加载成功
				this.PageStart = true;
				console.log("onPageStart==", e);
				setTimeout(() => {
					//加载成功后，显示
					// uni.getCurrentSubNVue().show('fade-in', 250, () => {});
					
					this.onShow();
				}, 100)
			},
			onPageFinish: function(e) {
				console.log("onPageFinish==", e);
			},
			onError: function(e) {
				// 监听页面加载错误
				// this.error = this.url;
				console.error(e);
			},
			gWatchBLEUpdate: function(data) {

				//如果是模块外面触发，需要离线打包
				// if (this.bMyAttitudeListen) {

				// }
				//添加计数
				data.count = ++this.count;
				this.sendMessage("updateAccAndGyro", data);
			}
		}
	}
</script>

<style>
	/* #ifdef APP-PLUS */
	.web-view {
		flex: 1;
		flex-direction: column;
		/* background-color: #007AFF; */
	}

	.web-view-child {
		width: 750rpx;
		flex: 1;
	}

	/* #endif */
	/* #ifdef H5 */

	.web-view {
		display: flex;
		flex-direction: column;
		position: absolute;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
	}

	.web-view-child {
		position: relative;
		width: 100%;
		height: 100%;
	}

	/* #endif */


	.sendMessage {
		width: 300rpx;
		position: fixed;
		bottom: 100rpx;
		left: 50rpx;
	}

	.web-back {
		position: fixed;
		top: 40px;
		right: 20px;
		width: 160rpx;
		height: 80rpx;
		border-radius: 45px;
		/* border: 1px solid #FFFFFF; */
		/* box-shadow: 0px 0px 1px #FFFFFF; */
		background-color: rgba(0, 0, 0, 1);
		opacity: 0.5;

		/* #ifndef APP-PLUS-NVUE */
		/* z-Index: 999; */
		display: flex;
		/* #endif */

		justify-content: center;
		align-items: center;
	}
</style>