shoot-miniprograms/src/App.vue

<script setup>
import { watch } from "vue";
import websocket from "@/websocket";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const { updateConnect } = store;

watch(
  () => user.value.id,
  (newVal) => {
    const token = uni.getStorageSync("token");
    if (newVal && token) {
      websocket.createWebSocket(token, updateConnect, (content) => {
        uni.$emit("socket-inbox", content);
      });
    }
  },
  {
    deep: false, // 如果 user 是一个对象或数组，建议开启
    immediate: false, // 若想在初始化时立即执行一次回调，可开启。
  }
);
</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: 302px;
  height: 534px;
  position: absolute;
  top: -1000px;
  left: 0;
}
</style>