
简体中文
监听网络状态变化
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 | 是 | - | - |
名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |
---|---|---|---|---|---|
isConnected | boolean | 是 | - | 当前是否有网络连接 | |
networkType | string | 是 | - | 网络类型(wifi、2g、3g、4g、5g、unknown、none) |
类型 |
---|
number |
取消监听网络状态变化
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 | 否 | - | - |
名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |
---|---|---|---|---|---|
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>
名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |
---|---|---|---|---|---|
errMsg | string | 是 | - | 错误信息 |