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'; // 假设你使用的是 UniAppconst 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 连接，清理资源。