当前位置：首页 > uni-app

uniapp无网络提示

2026-02-06 09:31:54uni-app

检测网络状态

使用uni.getNetworkType方法获取当前网络状态。该方法返回networkType字段，可能值为wifi、2g、3g、4g、5g、none等。当值为none时表示无网络连接。

uni.getNetworkType({
  success: res => {
    if (res.networkType === 'none') {
      // 无网络处理逻辑
    }
  }
});

监听网络变化

通过uni.onNetworkStatusChange监听网络状态变化。当网络断开或恢复时触发回调，可在回调中处理相应逻辑。

uni.onNetworkStatusChange(res => {
  if (!res.isConnected) {
    // 显示无网络提示
  } else {
    // 隐藏无网络提示
  }
});

显示无网络提示

在检测到无网络时，可使用uni.showToast或自定义弹窗提示用户。建议设置较长的显示时间或手动关闭。

uniapp无网络提示

uni.showToast({
  title: '当前无网络连接',
  icon: 'none',
  duration: 3000
});

自定义无网络页面

创建全局组件或页面用于展示无网络状态。通过v-if或条件渲染控制显示，可加入重试按钮和友好提示。

<template>
  <view v-if="isOffline" class="offline-container">
    <image src="/static/offline.png"></image>
    <text>网络连接不可用</text>
    <button @click="checkNetwork">重试</button>
  </view>
</template>

请求拦截处理

在uni.request的fail回调中处理网络错误。当请求失败时检查错误类型，如果是网络问题则提示用户。

uniapp无网络提示

uni.request({
  url: 'https://example.com/api',
  fail: err => {
    if (err.errMsg.includes('network')) {
      // 显示网络错误提示
    }
  }
});

本地缓存策略

实现数据缓存机制，在网络不可用时展示本地缓存数据。使用uni.setStorage和uni.getStorage管理缓存数据。

// 存储数据
uni.setStorage({
  key: 'cacheData',
  data: responseData
});

// 获取缓存
uni.getStorage({
  key: 'cacheData',
  success: res => {
    // 使用缓存数据
  }
});

离线功能设计

为关键功能设计离线模式，允许用户在不联网状态下使用部分功能。通过状态管理维护离线标志，调整应用行为。

// 在store中维护离线状态
const store = new Vuex.Store({
  state: {
    isOffline: false
  },
  mutations: {
    setOffline(state, status) {
      state.isOffline = status
    }
  }
});