uniapp无网络提示

检测网络状态

在onLaunch或页面生命周期中使用uni.getNetworkType获取当前网络类型，通过uni.onNetworkStatusChange监听网络变化：

uni.getNetworkType({
  success: res => {
    if (res.networkType === 'none') {
      this.showNoNetworkToast();
    }
  }
});

uni.onNetworkStatusChange(res => {
  if (!res.isConnected) {
    this.showNoNetworkToast();
  }
});

显示无网络提示

自定义全局弹窗或使用uni.showToast提示用户：

methods: {
  showNoNetworkToast() {
    uni.showToast({
      title: '网络不可用，请检查连接',
      icon: 'none',
      duration: 3000
    });
  }
}

离线缓存策略

通过uni.setStorage缓存关键数据，网络恢复后同步：

// 存储数据
uni.setStorage({
  key: 'offlineData',
  data: { /* 数据对象 */ }
});

// 网络恢复时检查缓存
uni.onNetworkStatusChange(res => {
  if (res.isConnected) {
    const data = uni.getStorageSync('offlineData');
    if (data) this.syncDataToServer(data);
  }
});

自定义无网络页面

在pages.json中配置网络错误页面，通过uni.redirectTo跳转：

"pages": [
  { "path": "pages/error/networkError" }
]

// 检测到无网络时跳转
uni.redirectTo({
  url: '/pages/error/networkError'
});

断网操作友好处理

禁用表单提交按钮并提示：

<button :disabled="!isConnected" @click="submitForm">
  {{ isConnected ? '提交' : '网络不可用' }}
</button>

data() {
  return {
    isConnected: true
  };
},
created() {
  uni.onNetworkStatusChange(res => {
    this.isConnected = res.isConnected;
  });
}