shoot-miniprograms/src/App.vue

<script setup>
	import {
		watch
	} from "vue";
	import {
		onShow,
		onHide
	} from "@dcloudio/uni-app";
	import websocket from "@/websocket";
	import {
		getDeviceBatteryAPI
	} from "@/apis";
	import useStore from "@/store";
	import {
		storeToRefs
	} from "pinia";
	import audioManager from "./audioManager";
	const store = useStore();
	const {
		user
	} = storeToRefs(store);
	const {
		updateUser,
		updateOnline
	} = store;

	watch(
		() => user.value.id,
		(newVal) => {
			const token = uni.getStorageSync(
				`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
			);
			if (newVal && token) {
				websocket.createWebSocket(token, onShootWsMsg);
			}
			if (!newVal) {
				websocket.closeWebSocket();
			}
		}, {
			deep: false, // 如果 user 是一个对象或数组，建议开启
			immediate: false, // 若想在初始化时立即执行一次回调，可开启。
		}
	);

	function emitUpdateUser(value) {
		updateUser(value);
	}

	async function emitUpdateOnline() {
		const data = await getDeviceBatteryAPI();
		updateOnline(data.online);
	}

	function onDeviceShoot() {
		audioManager.play("射箭声音")
	}

	function onShootWsMsg(content) {
		if(content.type === 'shoot-trigger'){
			onDeviceShoot()
		}
		uni.$emit("socket-inbox", content);
	}

	onShow(() => {
		uni.$on("update-user", emitUpdateUser);
		uni.$on("update-online", emitUpdateOnline);
		const token = uni.getStorageSync(
			`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
		);
		if (user.value.id && token) {
			console.log("回到前台，重新连接 websocket");
			websocket.createWebSocket(token, onShootWsMsg);
		}
	});

	onHide(() => {
		uni.$off("update-user", emitUpdateUser);
		uni.$off("update-online", emitUpdateOnline);
		websocket.closeWebSocket();
	});
</script>

<style>
	page {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		user-select: none;
		background-color: #000;
	}

	button {
		margin: 0;
		padding: 0;
		border: none;
		background: none;
		line-height: 1;
		outline: none;
		box-sizing: border-box;
	}

	view::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	button::after {
		border: none;
	}

	.guide-tips {
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
	}

	.guide-tips>text:first-child {
		color: #fed847;
	}

	.guide-tips>text:nth-child(2) {
		font-size: 24rpx;
	}

	@keyframes fadeInOut {
		0% {
			transform: translateY(20px);
			opacity: 0;
		}

		30% {
			transform: translateY(0);
			opacity: 1;
		}

		80% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	.fade-in-out {
		animation: fadeInOut 1.2s ease forwards;
	}

	@keyframes fadeOut {
		from {
			transform: translateY(0);
			opacity: 1;
		}

		to {
			transform: translateY(20px);
			opacity: 0;
		}
	}

	.fade-out {
		animation: fadeOut 0.3s ease forwards;
	}

	@keyframes scaleIn {
		from {
			transform: scale(0);
			opacity: 0;
		}

		to {
			transform: scale(1);
			opacity: 1;
		}
	}

	.scale-in {
		animation: scaleIn 0.3s ease-out forwards;
		transform-origin: center center;
	}

	@keyframes scaleOut {
		from {
			transform: scale(1);
			opacity: 1;
		}

		to {
			transform: scale(0);
			opacity: 0;
		}
	}

	.scale-out {
		animation: scaleOut 0.3s ease-out forwards;
		transform-origin: center center;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	@keyframes pumpIn {
		from {
			transform: scale(2);
		}

		to {
			transform: scale(1);
		}
	}

	.pump-in {
		animation: pumpIn 0.3s ease-out forwards;
		transform-origin: center center;
	}

	.share-canvas {
		width: 300px;
		height: 530px;
		position: absolute;
		top: -1000px;
		left: 0;
	}

	.truncate {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.modal {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.user-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		padding-top: 7px;
		position: relative;
	}

	.half-time-tip {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.half-time-tip>text:last-child {
		margin-top: 20px;
		color: #fff9;
	}

	.see-more {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
	}

	.see-more>text {
		color: #39a8ff;
		font-size: 13px;
	}

	.see-more>image {
		width: 15px;
	}

	@font-face {
		font-family: "DINCondensed";
		src: url("https://static.shelingxingqiu.com/font/DIN-Condensed-Bold-2.ttf") format("truetype");
		font-weight: 700;
		font-style: normal;
		font-display: swap;
	}
</style>