shoot-miniprograms/src/App.vue

<script setup>
import { watch, onMounted, onUnmounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
import websocket from "@/websocket";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const { updateConnect, updateUser } = store;

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

onShow(() => {
  const token = uni.getStorageSync("token");
  if (user.value.id && token) {
    // 检查 WebSocket 连接状态
    uni.sendSocketMessage({
      data: JSON.stringify({ event: "ping", data: {} }),
      fail: () => {
        // 如果发送失败，说明连接已断开，需要重新连接
        websocket.createWebSocket(token, updateConnect, (content) => {
          uni.$emit("socket-inbox", content);
        });
      },
    });
  }
});
</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;
}

button::after {
  border: none;
}

.guide-tips {
  display: flex;
  flex-direction: column;
}
.guide-tips > text:first-child {
  color: #fed847;
}

@keyframes fadeIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 0.3s 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;
}
.round-end-tip {
  width: 100%;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.round-end-tip > view:nth-child(2) {
  margin: 15px 0;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.round-end-tip > view:nth-child(2) > text:nth-child(2),
.round-end-tip > view:nth-child(2) > text:nth-child(4) {
  color: #fed847;
  width: 30px;
  text-align: center;
  font-size: 30px;
}
.round-end-tip > text:nth-child(3),
.round-end-tip > text:nth-child(4) {
  color: #fff9;
  font-size: 14px;
  margin-bottom: 10px;
}
</style>