uni-app x

展示全部

# uni.onNetworkStatusChange(listener) GitCode GitHub

监听网络状态变化

# onNetworkStatusChange 兼容性

Web	微信小程序	Android	iOS	iOS uni-app x UTS 插件	HarmonyOS
4.0	4.41	4.81	4.81	4.81	4.61

# 参数

名称

类型

必填

默认值

兼容性

描述

listener

(result: OnNetworkStatusChangeCallbackResult) => void

是

# OnNetworkStatusChangeCallbackResult 的属性值

名称

类型

必备

默认值

兼容性

描述

isConnected

boolean

是

当前是否有网络连接

networkType

string

是

网络类型(wifi、2g、3g、4g、5g、unknown、none)

# 返回值

类型
number

# 参见

# uni.offNetworkStatusChange(listener?) GitCode GitHub

取消监听网络状态变化

# offNetworkStatusChange 兼容性

Web	微信小程序	Android	iOS	iOS uni-app x UTS 插件	HarmonyOS
4.0	4.41	4.81	4.81	4.81	4.61

# 参数

名称

类型

必填

默认值

兼容性

描述

listener

number | (result: OnNetworkStatusChangeCallbackResult) => void

否

# OnNetworkStatusChangeCallbackResult 的属性值

名称

类型

必备

默认值

兼容性

描述

isConnected

boolean

是

当前是否有网络连接

networkType

string

是

网络类型(wifi、2g、3g、4g、5g、unknown、none)

# 参见

# 示例

示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见

示例

<template>
  <page-head title="networkStatusChange"></page-head>
  <view class="uni-list-cell-padding status-box">
    <text class="uni-title-text">网络状态</text>
    <view class="uni-row uni-common-mt">
      <text class="uni-hello-text">是否连接：</text>
      <text>{{ isConnected ? '已连接' : '未连接' }}</text>
    </view>
    <view class="uni-row uni-common-mt">
      <text class="uni-hello-text">网络类型：</text>
      <text>{{ networkType }}</text>
    </view>
    <view class="uni-row uni-common-mt">
      <text class="uni-hello-text">监听状态：</text>
      <text>{{ listenStatus }}</text>
    </view>
  </view>
  <view class="uni-list-cell-padding uni-common-mt">
    <button type="primary" @click="startListen">开始监听</button>
    <button type="default" class="uni-common-mt" @click="stopListen">停止监听</button>
  </view>
</template>

<script lang="uts" setup>
  const isConnected = ref(false)
  const networkType = ref('unknown')
  const listenStatus = ref('未监听')
  const networkCallback = ref<((result : OnNetworkStatusChangeCallbackResult) => void) | null>(null)
  // 获取当前网络状态
  const getCurrentNetworkStatus = () => {
    uni.getNetworkType({
      success: (res) => {
        networkType.value = res.networkType
        isConnected.value = res.networkType != 'none'
      },
      fail: () => {
        console.log('获取网络状态失败')
        networkType.value = 'unknown'
        isConnected.value = false
      }
    })
  }
  // 开始监听
  const startListen = () => {
    if (networkCallback.value != null) {
      listenStatus.value = '正在监听'
      return
    }
    networkCallback.value = (result : OnNetworkStatusChangeCallbackResult) => {
      console.log('网络状态: ', result);
      isConnected.value = result.isConnected
      networkType.value = result.networkType
      if (!result.isConnected) {
        networkType.value = 'none'
      }
    }
    uni.onNetworkStatusChange(networkCallback.value)
    // console.log('开始监听网络状态')
    listenStatus.value = '正在监听'
  }
  // 停止监听
  const stopListen = () => {
    if (networkCallback.value == null) {
      listenStatus.value = '未监听'
      return
    }
    uni.offNetworkStatusChange(networkCallback.value)
    networkCallback.value = null
    // console.log('停止监听网络状态')
    listenStatus.value = '停止监听'
  }

  onLoad(() => {
    getCurrentNetworkStatus()
  })
  onUnload(() => {
    stopListen()
  })
</script>

<style>
  .status-box {
    background-color: #FFFFFF;
    margin: 0 20px;
  }
</style>