创建onHide,onShow生命周期，完善tcp连接断开逻辑

3 weeks ago · 54d2c377e9
3 changed files with 45 additions and 136 deletions
--- a/.hbuilderx/launch.json
+++ b/.hbuilderx/launch.json
@ -4,7 +4,7 @@
        {
            "customPlaygroundType" : "local",
            "packageName" : "io.dcloud.HBuilder",
-            "playground" : "standard",
+            "playground" : "custom",
            "type" : "uni-app:app-android"
        }
    ]
--- a/pages/marketSituation/globalIndex.vue
+++ b/pages/marketSituation/globalIndex.vue
@ -30,7 +30,7 @@
    </view>

    <!-- 内容区域 -->
-    <scroll-view class="content" :style="{ top: contentTopPosition + 'px' }" scroll-y="true">
+    <scroll-view class="content" :style="{ top: contentTopPosition + 'px' }" scroll-y="true" v-if="isDataLoaded">
      <!-- 亚太-中华 -->
      <view class="market-section" v-for="(item, parentIndex) in marketSituationStore.gloablCardData" :key="item">
        <view class="market-header">
@ -66,6 +66,7 @@

 <script setup>
 import { ref, onMounted, onUnmounted, computed, nextTick, watch } from "vue";
+import { onShow, onHide } from "@dcloudio/uni-app";
 import footerBar from "../../components/footerBar.vue";
 import IndexCard from "../../components/IndexCard.vue";
 import { getRegionalGroupAPI } from "../../api/marketSituation/marketSituation.js";
@ -78,6 +79,9 @@ const headerHeight = ref(0); // 头部高度
 const searchValue = ref(""); // 搜索值
 const isWarnTextOverflow = ref(false); // warn文字是否溢出

+// 数据状态加载
+const isDataLoaded = ref(false);
+
 // warn文字的class计算属性
 const warnTextClass = computed(() => {
  return isWarnTextOverflow.value ? "warn_text scroll-active" : "warn_text";
@ -109,125 +113,6 @@ const checkWarnTextOverflow = () => {
  });
 };
 const globalIndexArray = ref([]);
-// 亚太-中华指数数据
-const asiachinaIndexes = ref([
-  {
-    flagIcon: "/static/c1.png",
-    stockName: "上证指数",
-    stockCode: "noCode",
-    currentPrice: "3933.96",
-    changeAmount: "+24.32",
-    changePercent: "+0.62%",
-    isRising: true,
-  },
-  {
-    flagIcon: "/static/c2.png",
-    stockName: "深证成指",
-    stockCode: "noCode",
-    currentPrice: "45757.90",
-    changeAmount: "-123.45",
-    changePercent: "-0.27%",
-    isRising: false,
-  },
-  {
-    flagIcon: "/static/c3.png",
-    stockName: "创业板指",
-    stockCode: "noCode",
-    currentPrice: "6606.08",
-    changeAmount: "+89.76",
-    changePercent: "+1.38%",
-    isRising: true,
-  },
-  {
-    flagIcon: "/static/c4.png",
-    stockName: "HSI50",
-    stockCode: "noCode",
-    currentPrice: "22333.96",
-    changeAmount: "+156.78",
-    changePercent: "+0.71%",
-    isRising: true,
-  },
-  {
-    flagIcon: "/static/c5.png",
-    stockName: "沪深300",
-    stockCode: "noCode",
-    currentPrice: "45757.90",
-    changeAmount: "-89.12",
-    changePercent: "-0.19%",
-    isRising: false,
-  },
-  {
-    flagIcon: "/static/c6.png",
-    stockName: "上证50",
-    stockCode: "noCode",
-    currentPrice: "45757.90",
-    changeAmount: "+234.56",
-    changePercent: "+0.52%",
-    isRising: true,
-  },
-]);
-
-// 亚太指数数据
-const asiaIndexes = ref([
-  {
-    flagIcon: "/static/c7.png",
-    stockName: "日经225",
-    stockCode: "noCode",
-    currentPrice: "28456.78",
-    changeAmount: "+234.56",
-    changePercent: "+0.83%",
-    isRising: true,
-  },
-  {
-    flagIcon: "/static/c8.png",
-    stockName: "韩国KOSPI",
-    stockCode: "noCode",
-    currentPrice: "2567.89",
-    changeAmount: "-12.34",
-    changePercent: "-0.48%",
-    isRising: false,
-  },
-  {
-    flagIcon: "/static/c9.png",
-    stockName: "印度孟买",
-    stockCode: "noCode",
-    currentPrice: "65432.10",
-    changeAmount: "+456.78",
-    changePercent: "+0.70%",
-    isRising: true,
-  },
-]);
-
-// 美洲指数数据
-const americaIndexes = ref([
-  {
-    flagIcon: "/static/c7.png",
-    stockName: "道琼斯指数",
-    stockCode: "noCode",
-    currentPrice: "34567.89",
-    changeAmount: "+123.45",
-    changePercent: "+0.36%",
-    isRising: true,
-  },
-  {
-    flagIcon: "/static/c8.png",
-    stockName: "纳斯达克",
-    stockCode: "noCode",
-    currentPrice: "13456.78",
-    changeAmount: "-67.89",
-    changePercent: "-0.50%",
-    isRising: false,
-  },
-  {
-    flagIcon: "/static/c9.png",
-    stockName: "标普500",
-    stockCode: "noCode",
-    currentPrice: "4234.56",
-    changeAmount: "+23.45",
-    changePercent: "+0.56%",
-    isRising: true,
-  },
-]);

 // 计算属性：内容区域顶部位置
 const contentTopPosition = computed(() => {
@ -482,6 +367,8 @@ const parseStockData = (message) => {
          }
        }
      }
+      // 数据状态加载完成
+      isDataLoaded.value = true;
    } else if ((typeof message === "string" && message.includes('{"count')) || isMorePacket.batch_real_time) {
      if (typeof message === "string" && message.includes('{"count')) {
        console.log("开始接受分包数据");
@ -564,6 +451,22 @@ const startTcp = () => {
  }
 };

+onShow(async () => {
+  console.log("显示页面");
+  await getRegionalGroup();
+  initTcpListeners();
+  await nextTick();
+  // 开始连接
+  startTcp();
+});
+
+onHide(() => {
+  console.log("隐藏页面");
+  sendTcpMessage("stop_real_time");
+  removeTcpListeners();
+  disconnectTcp();
+});
+
 onUnmounted(() => {
  sendTcpMessage("stop_real_time");
  removeTcpListeners();
@ -572,11 +475,6 @@ onUnmounted(() => {

 // 生命周期：页面挂载
 onMounted(async () => {
-  await getRegionalGroup();
-  initTcpListeners();
-  await nextTick();
-  // 开始连接
-  startTcp();
  // 获取系统信息
  const systemInfo = uni.getSystemInfoSync();
  iSMT.value = systemInfo.statusBarHeight || 0;
--- a/pages/marketSituation/marketOverview.vue
+++ b/pages/marketSituation/marketOverview.vue
@ -47,6 +47,7 @@

 <script setup>
 import { ref, onMounted, onUnmounted, watch, nextTick, computed } from "vue";
+import { onShow, onHide } from "@dcloudio/uni-app";
 import util from "../../common/util.js";
 import IndexCard from "../../components/IndexCard.vue";
 import { useMarketSituationStore } from "../../stores/modules/marketSituation.js";
@ -169,7 +170,7 @@ const getGlobalIndex = async () => {
 };

 // TCP相关响应式变量
-import tcpConnection, { TCPConnection, TCP_CONFIG } from "@/api/tcpConnection.js";
+import tcpConnection from "@/api/tcpConnection.js";
 const tcpConnected = ref(false);
 const connectionListener = ref(null);
 const messageListener = ref(null);
@ -225,7 +226,6 @@ const sendTcpMessage = (command) => {
  if (command == "batch_real_time") {
    messageDataArray = globalIndexArray.value.map((item) => item.stockCode);
  }
-  console.log(messageDataArray);

  switch (command) {
    // 实时行情推送
@ -273,11 +273,9 @@ const sendTcpMessage = (command) => {
      const success = tcpConnection.send(messageData);
      if (success) {
        console.log("home发送TCP消息:", messageData);
-
      }
    } catch (error) {
      console.error("发送TCP消息时出错:", error);
-
    }
  }
 };
@ -439,25 +437,38 @@ const startTcp = () => {
    removeTcpListeners();
    disconnectTcp();
    initTcpListeners();
+    console.log("初始化完成，，，，，，，，，，，，，，，");
    connectTcp();
  } catch (error) {
    console.error("建立连接并设置监听出错:", error);
-
  }
 };

+onShow(async () => {
+  console.log("显示页面");
+  await getGlobalIndex();
+  initTcpListeners();
+  await nextTick();
+  // 开始连接
+  startTcp();
+});
+
+onHide(() => {
+  console.log("隐藏页面");
+  sendTcpMessage("stop_real_time");
+  removeTcpListeners();
+  disconnectTcp();
+});
+
 onUnmounted(() => {
+  console.log("卸载页面");
  sendTcpMessage("stop_real_time");
  removeTcpListeners();
  disconnectTcp();
 });

 onMounted(async () => {
-  await getGlobalIndex();
-  initTcpListeners();
-  await nextTick();
-  // 开始连接
-  startTcp();
+  console.log("挂载页面");
  // 状态栏高度
  iSMT.value = uni.getSystemInfoSync().statusBarHeight;