技术博客
首页 所有文章 标签 分类 关于
技术博客

目录

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

 收录于 未分类
   约 1901 字   预计阅读 4 分钟 
https://bing.ee123.net/img/rand?artid=146178617

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

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

https://i-blog.csdnimg.cn/direct/51334fda340447d693195375b6b265ad.png

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

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

轮询网络状态

  1. 轮询
    使用 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);	
			
			
			
		},

初始网络检查

这个 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);
  }
});

轮询网络状态

  1. 轮询
    使用 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>

代码解释

  1. <template> 部分 :

    • 显示网络状态，根据 networkStatus 的值显示不同的消息。

  2. <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 （网络正常），根据实际需要调整。

更新于 2025-03-11
 App
返回 | 主页