UniApp IOS打包之后，首次安装ipa包，白屏，监听网络状态

首先说一下，我遇到的情况，IOSIPA包首次安装的时候，大家都知道，会有一个IOS，自带的系统提示，如下

这里的时候，UniApp 在你选择之前就已经把接口跑完了，你再去点击这些允许，都是没啥用的

这时候，我们应该把接口放在，用户选择之后再发起请求

轮询网络状态

轮询 : 使用 setInterval 每秒检查一次网络状态，直到检测到网络类型不为 none。
- 每秒执行一次 uni.getNetworkType 来获取网络状态。
- 如果网络类型不是 none，表示网络恢复，that.typee 被设置为 2，并清除定时器 clearInterval(time)，停止轮询。

vue2代码如下：

onLoad() {
			
			
			//苹果要先检查网络，有网时执行，无网不显示
			let s = 0;
			let time = setInterval(() => {
			  console.log('6666');
			  uni.getNetworkType({
			    success: (res) => {
			      console.log(res.networkType, s);
			      if (res.networkType !== 'none') {
			        this.typee = 2;
			        clearInterval(time);
			        console.log('清楚网络..');//有网络就加载

					//写逻辑代码，（包含接口文件和网络接口的）
					
			      }
				  else{
					  console.log('没有网络')
				  }
			    }
			  });
			  s++;
			}, 1000);	
			
			
			
		},

初始网络检查

1.uni.getNetworkType: 这个 API 用于获取当前的网络类型，具体详情，可以去官网看，，我这里就不写了

这里肯定是要用到轮询的，轮询判断网络是否连接上了

我这里随便写一个demo，Vue2的，底下再写一个 Vue3的
如果网络类型是 none，表示没有网络，that.typee 被设置为 1，并弹出提示"网络不佳,请重新打开"。
如果有网络，that.typee 被设置为 2，并弹出提示"网络不佳,请重新打开"。
typee 要记得在 data 定义

uni.getNetworkType({
success: function(res) {
console.log(res.networkType);
setTimeout(function() {
if (res.networkType === "none") {
that.typee = 1;
console.log("当前无网络", that.typee);
uni.showToast({
title: '网络不佳,请重新打开........',
duration: 20000
});
} else {
that.typee = 2;
console.log("有网络", that.typee);
uni.showToast({
title: '网络不佳,请重新打开........',
duration: 2000
});
}
}, 3000);
}
});

轮询网络状态

轮询 : 使用 setInterval 每秒检查一次网络状态，直到检测到网络类型不为 none。
- 每秒执行一次 uni.getNetworkType 来获取网络状态。
- 如果网络类型不是 none，表示网络恢复，that.typee 被设置为 2，并清除定时器 clearInterval(time)，停止轮询。
let s = 0;
let time = setInterval(() => {
console.log('6666');
uni.getNetworkType({
success: (res) => {
console.log(res.networkType, s);
if (res.networkType !== 'none') {
that.typee = 2;
clearInterval(time);
console.log('清楚网络..');
}
}
});
s++;
}, 1000);

初始网络检查：在页面加载完成时立即检查网络状态，并显示提示。
轮询网络状态：每秒检查一次网络状态，直到检测到网络可用，然后停止检查。

Vue3版本

<template>
  <div>
    <!-- 可以在这里显示网络状态 -->
    <p v-if="networkStatus === 1">当前无网络</p>
    <p v-if="networkStatus === 2">网络连接正常</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { showToast, getNetworkType } from '@dcloudio/uni-app'; // 假设你使用的是 UniApp

const networkStatus = ref(1); // 默认无网络

const checkNetworkStatus = () => {
  getNetworkType({
    success: (res) => {
      if (res.networkType === 'none') {
        networkStatus.value = 1;
        showToast({
          title: '网络不佳,请重新打开........',
          duration: 20000
        });
      } else {
        networkStatus.value = 2;
        showToast({
          title: '网络正常',
          duration: 2000
        });
      }
    }
  });
};

const startPolling = () => {
  const interval = setInterval(() => {
    getNetworkType({
      success: (res) => {
        if (res.networkType !== 'none') {
          networkStatus.value = 2;
          clearInterval(interval);
          showToast({
            title: '网络已恢复',
            duration: 2000
          });
        }
      }
    });
  }, 1000);
};

onMounted(() => {
  // 初次检查网络状态
  checkNetworkStatus();

  // 开始轮询
  startPolling();
});
</script>

可以使用 WebSocket 来进行网络监听，这样可以更实时地监控网络连接状态。WebSocket 提供了持久化的连接，可以用来接收网络状态变化的通知。以下是一个使用 Vue 3 和 WebSocket 实现网络监听的示例。

这里写一个搭配 WebSocket 的网络判断（可能不够准确）

1. WebSocket 服务器设置

首先，你需要一个 WebSocket 服务器来发送网络状态信息。假设你有一个 WebSocket 服务器，它会推送网络状态变化的信息到客户端。

2. Vue 3 组件

下面是一个使用 Vue 3 和 WebSocket 实现网络监听的示例：

<template>
  <div>
    <!-- 显示网络状态 -->
    <p v-if="networkStatus === 1">当前无网络</p>
    <p v-if="networkStatus === 2">网络连接正常</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const networkStatus = ref(1); // 默认无网络
let socket = null;

const connectWebSocket = () => {
  socket = new WebSocket('ws://your-websocket-server-url'); // 替换为你的 WebSocket 服务器地址

  socket.onopen = () => {
    console.log('WebSocket 连接已打开');
  };

  socket.onmessage = (event) => {
    const message = JSON.parse(event.data);
    if (message.type === 'network_status') {
      networkStatus.value = message.status;
    }
  };

  socket.onclose = () => {
    console.log('WebSocket 连接已关闭');
  };

  socket.onerror = (error) => {
    console.error('WebSocket 错误:', error);
  };
};

onMounted(() => {
  connectWebSocket();
});

onUnmounted(() => {
  if (socket) {
    socket.close();
  }
});
</script>

代码解释

<template> 部分:
- 显示网络状态，根据 networkStatus 的值显示不同的消息。
<script setup> 部分:
- 使用 Vue 3 的 Composition API。
- networkStatus 是一个 ref，用于存储网络状态。
- connectWebSocket 函数负责创建和管理 WebSocket 连接。
  - socket.onopen 事件处理程序在 WebSocket 连接打开时执行。
  - socket.onmessage 事件处理程序处理从服务器接收到的消息。在这个示例中，我们假设消息的格式为 { type: 'network_status', status: 1 } 或 { type: 'network_status', status: 2 }。
  - socket.onclose 事件处理程序在 WebSocket 连接关闭时执行。
  - socket.onerror 事件处理程序处理 WebSocket 错误。
- onMounted 钩子在组件挂载时调用 connectWebSocket 函数。
- onUnmounted 钩子在组件卸载时关闭 WebSocket 连接，清理资源。

服务器端消息格式

为了让这个示例工作，你的 WebSocket 服务器需要发送类似如下的 JSON 消息：

{
  "type": "network_status",
  "status": 2
}

这里的 status 可以是 1（无网络）或 2（网络正常），根据实际需要调整。

UniApp IOS打包之后，首次安装ipa包，白屏，监听网络状态

轮询网络状态

初始网络检查

轮询网络状态

Vue3版本

这里写一个 搭配 WebSocket 的网络判断（可能不够准确）

1. WebSocket 服务器设置

2. Vue 3 组件

代码解释

服务器端消息格式

这里写一个搭配 WebSocket 的网络判断（可能不够准确）