如何使用 uni.onNetworkStatusChange 监听网络状态变化事件？

推荐答案

// www.javascriptcn.com code example
// 在页面或组件中监听网络状态变化
uni.onNetworkStatusChange((res) => {
  console.log('当前网络状态:', res.isConnected);
  console.log('网络类型:', res.networkType);
});

// 如果需要取消监听
const networkStatusChangeCallback = (res) => {
  console.log('当前网络状态:', res.isConnected);
  console.log('网络类型:', res.networkType);
};

uni.onNetworkStatusChange(networkStatusChangeCallback);

// 取消监听
uni.offNetworkStatusChange(networkStatusChangeCallback);

本题详细解读

1. uni.onNetworkStatusChange 的作用

uni.onNetworkStatusChange 是 uni-app 提供的一个 API，用于监听设备网络状态的变化。当网络状态发生变化时，会触发回调函数，并返回当前的网络状态信息。

2. 回调函数的参数

回调函数接收一个参数 res，它是一个对象，包含以下属性：

• isConnected: 布尔值，表示设备是否连接到网络。
• networkType: 字符串，表示当前的网络类型，可能的值为 wifi、2g、3g、4g、5g、unknown、none。

3. 使用场景

• 在应用中需要根据网络状态动态调整内容或功能时，可以使用此 API 进行监听。
• 例如，当用户从 Wi-Fi 切换到移动数据时，可以提示用户注意流量消耗。

4. 取消监听

为了避免内存泄漏或重复监听，可以在不需要监听网络状态变化时，使用 uni.offNetworkStatusChange 取消监听。传入的回调函数必须与之前注册的回调函数相同。

5. 注意事项

• 该 API 在 H5 端可能无法准确获取网络类型，具体表现取决于浏览器的支持情况。
• 在部分平台上，网络状态变化可能不会实时触发，建议在实际使用中进行充分测试。