uni-app如何监听网络连接断开 uni-app全局断网提示组件实现-uni-app-PHP中文网

uni.getNetworkType() 返回 none 仅表示当前无网络，并非断网的可靠判断依据；需配合 uni.onNetworkStatusChange 实时监听状态变化，并在 onAppShow 中手动检测修复前台恢复场景。

uni-app如何监听网络连接断开 uni-app全局断网提示组件实现

uni.getNetworkType() 返回 `none` 就代表断网？不完全是

很多开发者一上来就用 uni.getNetworkType() 判断网络状态，但这个 API 是**一次性快照**，不会自动监听变化。调一次返回 none 只能说明「此刻没网」，无法捕获「从有到无」的切换事件。真正要监听断开，必须配合 uni.onNetworkStatusChange —— 它才是 uni-app 唯一支持的实时网络状态变更监听器。

注意：该监听器在 App 端（iOS/Android）和微信小程序中稳定可用；H5 端依赖 navigator.onLine，存在兼容性问题（比如 Chrome 下拔网线后可能延迟数秒才触发）；支付宝小程序暂不支持此 API，需降级处理。

务必在 App.vue 的 onLaunch 和 onShow 中调用 uni.onNetworkStatusChange 注册，避免页面级监听被销毁后漏掉事件
不要在组件 onUnload 里手动 off，因为全局监听不应随单个页面卸载而取消
首次进入时，需主动调用 uni.getNetworkType() 获取初始状态，否则监听器触发前页面不知道当前是否有网

如何避免重复弹出「网络已断开」提示？

断网提示最让人烦躁的不是没提示，而是反复弹、连环弹。根本原因是：网络抖动时，onNetworkStatusChange 可能在几秒内触发多次 { isConnected: false }，如果每次触发都 uni.showToast 或 uni.showModal，用户会疯。

解决方案是加节流 + 状态锁：

用一个全局变量（如 window.__networkAlertLocked）标记「正在提示中」，触发后设为 true，3 秒内再次触发直接 return
提示关闭后（如 toast 自动消失或用户点击确定），再把锁设回 false
更稳妥的做法是只在 isConnected 从 true 变为 false 的瞬间提示，需缓存上一次状态做比对

示例关键逻辑：

let lastConnected = true
uni.onNetworkStatusChange((res) => {
  if (res.isConnected === false && lastConnected === true) {
    if (!window.__networkAlertLocked) {
      window.__networkAlertLocked = true
      uni.showToast({
        title: '网络已断开',
        icon: 'none',
        duration: 2000
      })
      setTimeout(() => {
        window.__networkAlertLocked = false
      }, 3000)
    }
  }
  lastConnected = res.isConnected
})

全局提示组件怎么挂载才不侵入业务页面？

不能让每个页面都 import 提示组件并 v-if 控制显隐——这违背「全局」本意，也容易漏写。正确方式是用 uni.$emit / uni.$on 通信 + uni.createSelectorQuery 动态插入 DOM（App/H5）或使用原生层遮罩（小程序）。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

但最轻量且跨端兼容的做法是：在 App.vue 的底部直接写一个固定定位的提示条，用 v-show 控制，由全局状态驱动：

定义响应式数据 networkTipVisible: false 和 networkTipText: '' 在 App.vue 的 data
在 onNetworkStatusChange 回调中，仅修改这两个 data 字段，不调用任何 UI API
组件模板里用 {{ networkTipText }}，样式设为 position: fixed; top: 0; width: 100%; z-index: 9999;

这样所有页面共享同一份 DOM，无需额外 import，也不依赖 vuex 或 pinia。