HarmonyOS 鸿蒙Next中教你如何全局监听网络状态变化

HarmonyOS 鸿蒙Next中教你如何全局监听网络状态变化

背景

快应用提供了网络状态接口network，能够监听当前用户手机的网络情况，是否有网，网络类型是wifi还是移动网络。开发者可以根据网络类型和自身应用耗流量的情况，给出不同的界面设计。如果在每个页面中都去监听网络状态，重复代码多，还容易遗漏，有没有一种方案可以做到全局监听呢？

通过在快应用app.ux中调用网络接口，每个页面使用watch监听获取当前网络状态即可满足你的要求。

监听网络状态变化的实现方案

配置权限

{
        "name": "ohos.permission.GET_NETWORK_INFO"  //监听网络状态的权限
}

HarmonyOS 鸿蒙Next中监听网络状态变化的完整代码

import { connection } from '@kit.NetworkKit';
import { BusinessError } from '@kit.BasicServicesKit';
@Builder
export function NetworkStatePageBuilder(){
  NetworkStatePage()
}
@Component
struct NetworkStatePage {
  pathStack=new NavPathStack()
  // 创建网络连接对象
  private netCon: connection.NetConnection = connection.createNetConnection();

  aboutToAppear(): void {
    this.setupNetworkListeners();
  }

  setupNetworkListeners() {
    // 注册网络状态监听
    this.netCon.register((error: BusinessError) => {
      if (error) {
        console.error('网络状态监听注册失败:', JSON.stringify(error));
      } else {
        console.log('网络状态监听注册成功');
      }
    });

    // 监听网络可用事件
    this.netCon.on('netAvailable', (data: connection.NetHandle) => {
      console.log('网络已连接');
      this.checkNetworkType(data);
    });

    // 监听网络断开事件
    this.netCon.on('netLost', () => {
      console.log('网络已断开 - 无互联网连接');
    });

    // 监听网络不可用事件
    this.netCon.on('netUnavailable', () => {
      console.log('网络不可用');
    });
  }

  // 检查当前网络类型
  checkNetworkType(netHandle: connection.NetHandle) {
    connection.getNetCapabilities(netHandle, (error: BusinessError, data: connection.NetCapabilities) => {
      if (error) {
        console.error('获取网络能力失败:', JSON.stringify(error));
        return;
      }

      if (data && data.bearerTypes) {
        const networkType = this.getNetworkTypeName(data.bearerTypes[0]);
        console.log('当前网络类型:', networkType);
      }
    });
  }

  // 获取网络类型名称
  getNetworkTypeName(type: number): string {
    switch(type) {
      case 0: return '蜂窝网络';
      case 1: return 'Wi-Fi';
      case 2: return '以太网';
      default: return '未知网络';
    }
  }

  build() {
   NavDestination(){
     Column() {
       Text('网络状态监控')
         .fontSize(20)
         .margin(10);
       Text('请在控制台查看网络状态更新')
         .fontSize(16)
         .margin(10);
     }
     .width('100%')
     .height('100%')
     .justifyContent(FlexAlign.Center)
     .alignItems(HorizontalAlign.Center)
   }.title("监听网络状态")
  }
}