shoot-miniprograms/src/App.vue

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

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

onShow(() => {
  const token = uni.getStorageSync("token");
  if (user.value.id && token) {
    console.log("回到前台，重新连接 websocket");
    websocket.createWebSocket(token, (content) => {
      uni.$emit("socket-inbox", content);
    });
  }
});

onHide(() => {
  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;
}

button::after {
  border: none;
}

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

@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 1s 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: 534px;
  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: 20px;
  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;
}
</style>