IT评测·应用市场-qidao123.com

标题: UniApp IOS打包之后，首次安装ipa包，白屏，监听网络状态 [打印本页]

作者: 张裕 时间: 2025-3-12 17:55
标题: 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（网络正常），根据实际需要调解。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)