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

首先说一下，我遇到的环境，IOSIPA包首次安装的时候，各人都知道，会有一个IOS，自带的体系提示，如下

这里的时候，UniApp 在你选择之前就已经把接口跑完了，你再去点击这些允许，都是没啥用的
这时候，我们应该把接口放在，用户选择之后再发起请求

轮询网络状态

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

vue2代码如下：
 

1. onLoad() {
2.                        
3.                        
4.                         //苹果要先检查网络，有网时执行，无网不显示
5.                         let s = 0;
6.                         let time = setInterval(() => {
7.                           console.log('6666');
8.                           uni.getNetworkType({
9.                             success: (res) => {
10.                               console.log(res.networkType, s);
11.                               if (res.networkType !== 'none') {
12.                                 this.typee = 2;
13.                                 clearInterval(time);
14.                                 console.log('清楚网络..');//有网络就加载
16.                                         //写逻辑代码，（包含接口文件和网络接口的）
17.                                        
18.                               }
19.                                   else{
20.                                           console.log('没有网络')
21.                                   }
22.                             }
23.                           });
24.                           s++;
25.                         }, 1000);       
26.                        
27.                        
28.                        
29.                 },

复制代码

初始网络检查

1.uni.getNetworkType: 这个 API 用于获取当前的网络范例，具体详情，可以去官网看，，我这里就不写了
这里肯定是要用到轮询的，轮询判定网络是否毗连上了

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

1. uni.getNetworkType({
2.   success: function(res) {
3.     console.log(res.networkType);
4.     setTimeout(function() {
5.       if (res.networkType === "none") {
6.         that.typee = 1;
7.         console.log("当前无网络", that.typee);
8.         uni.showToast({
9.           title: '网络不佳,请重新打开........',
10.           duration: 20000
11.         });
12.       } else {
13.         that.typee = 2;
14.         console.log("有网络", that.typee);
15.         uni.showToast({
16.           title: '网络不佳,请重新打开........',
17.           duration: 2000
18.         });
19.       }
20.     }, 3000);
21.   }
22. });

复制代码

轮询网络状态

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

1. let s = 0;
2. let time = setInterval(() => {
3.   console.log('6666');
4.   uni.getNetworkType({
5.     success: (res) => {
6.       console.log(res.networkType, s);
7.       if (res.networkType !== 'none') {
8.         that.typee = 2;
9.         clearInterval(time);
10.         console.log('清楚网络..');
11.       }
12.     }
13.   });
14.   s++;
15. }, 1000);

复制代码

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

Vue3版本

1. <template>
2.   <div>
3.     <!-- 可以在这里显示网络状态 -->
4.     <p v-if="networkStatus === 1">当前无网络</p>
5.     <p v-if="networkStatus === 2">网络连接正常</p>
6.   </div>
7. </template>
9. <script setup>
10. import { ref, onMounted } from 'vue';
11. import { showToast, getNetworkType } from '@dcloudio/uni-app'; // 假设你使用的是 UniApp
13. const networkStatus = ref(1); // 默认无网络
15. const checkNetworkStatus = () => {
16.   getNetworkType({
17.     success: (res) => {
18.       if (res.networkType === 'none') {
19.         networkStatus.value = 1;
20.         showToast({
21.           title: '网络不佳,请重新打开........',
22.           duration: 20000
23.         });
24.       } else {
25.         networkStatus.value = 2;
26.         showToast({
27.           title: '网络正常',
28.           duration: 2000
29.         });
30.       }
31.     }
32.   });
33. };
35. const startPolling = () => {
36.   const interval = setInterval(() => {
37.     getNetworkType({
38.       success: (res) => {
39.         if (res.networkType !== 'none') {
40.           networkStatus.value = 2;
41.           clearInterval(interval);
42.           showToast({
43.             title: '网络已恢复',
44.             duration: 2000
45.           });
46.         }
47.       }
48.     });
49.   }, 1000);
50. };
52. onMounted(() => {
53.   // 初次检查网络状态
54.   checkNetworkStatus();
56.   // 开始轮询
57.   startPolling();
58. });
59. </script>

复制代码

可以使用 WebSocket 来进行网络监听，这样可以更实时地监控网络毗连状态。WebSocket 提供了持久化的毗连，可以用来吸收网络状态变革的关照。以下是一个使用 Vue 3 和 WebSocket 实现网络监听的示例。
这里写一个 搭配 WebSocket 的网络判定（可能不敷准确）

1. WebSocket 服务器设置

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

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

1. <template>
2.   <div>
3.     <!-- 显示网络状态 -->
4.     <p v-if="networkStatus === 1">当前无网络</p>
5.     <p v-if="networkStatus === 2">网络连接正常</p>
6.   </div>
7. </template>
9. <script setup>
10. import { ref, onMounted, onUnmounted } from 'vue';
12. const networkStatus = ref(1); // 默认无网络
13. let socket = null;
15. const connectWebSocket = () => {
16.   socket = new WebSocket('ws://your-websocket-server-url'); // 替换为你的 WebSocket 服务器地址
18.   socket.onopen = () => {
19.     console.log('WebSocket 连接已打开');
20.   };
22.   socket.onmessage = (event) => {
23.     const message = JSON.parse(event.data);
24.     if (message.type === 'network_status') {
25.       networkStatus.value = message.status;
26.     }
27.   };
29.   socket.onclose = () => {
30.     console.log('WebSocket 连接已关闭');
31.   };
33.   socket.onerror = (error) => {
34.     console.error('WebSocket 错误:', error);
35.   };
36. };
38. onMounted(() => {
39.   connectWebSocket();
40. });
42. onUnmounted(() => {
43.   if (socket) {
44.     socket.close();
45.   }
46. });
47. </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 消息：

1. {
2.   "type": "network_status",
3.   "status": 2
4. }

复制代码

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

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