uni-app 封装微信小程序页面状态控制 包括加载中 断网错误重试 数据为空等

在uni-app中封装微信小程序页面状态控制，可以通过定义一个通用的状态管理工具来实现。下面是一个示例代码，展示了如何封装页面状态，包括加载中、断网错误重试、数据为空等状态。

首先，我们创建一个名为pageStatus.js的状态管理文件：

// pageStatus.js
export default {
  data() {
    return {
      loading: false, // 加载中状态
      error: null,   // 错误信息
      retryCount: 0, // 重试次数
      emptyList: false, // 数据为空状态
      data: null,    // 页面数据
    };
  },
  methods: {
    // 设置加载中状态
    setLoading(status) {
      this.loading = status;
    },
    // 设置错误信息
    setError(error) {
      this.error = error;
      this.retryCount = 0; // 重置重试次数
    },
    // 重试请求
    retry() {
      this.retryCount += 1;
      this.setError(null); // 清除错误信息
      // 在这里调用你的请求函数，例如 this.fetchData();
    },
    // 设置数据为空状态
    setEmptyList(status) {
      this.emptyList = status;
    },
    // 设置页面数据
    setData(data) {
      this.data = data;
      this.setEmptyList(!data || data.length === 0); // 根据数据判断是否为空
    },
    // 初始化状态
    resetStatus() {
      this.setLoading(false);
      this.setError(null);
      this.setEmptyList(false);
      this.setData(null);
    },
    // 模拟请求数据函数（实际项目中应替换为真实的请求）
    fetchData() {
      this.setLoading(true);
      // 模拟网络请求
      setTimeout(() => {
        try {
          // 模拟网络错误或数据获取
          if (Math.random() < 0.3) { // 30%几率触发错误
            throw new Error('网络错误，请重试');
          } else if (Math.random() < 0.1) { // 10%几率返回空数据
            this.setData([]);
          } else {
            this.setData([/* your mock data here */]);
          }
        } catch (error) {
          this.setError(error.message);
        } finally {
          this.setLoading(false);
        }
      }, 1000);
    },
  },
};

然后，在你的页面组件中引入并使用这个状态管理工具：

// yourPage.vue
<template>
  <view>
    <view v-if="loading">加载中...</view>
    <view v-else-if="error">{{ error }} <button @click="retry">重试</button></view>
    <view v-else-if="emptyList">暂无数据</view>
    <view v-else>
      <!-- 显示数据 -->
      <view v-for="item in data" :key="item.id">{{ item.name }}</view>
    </view>
  </view>
</template>

<script>
import pageStatus from '@/utils/pageStatus'; // 根据实际路径调整

export default {
  mixins: [pageStatus],
  onLoad() {
    this.fetchData();
  },
};
</script>

以上代码展示了如何在uni-app中封装和管理页面状态，通过pageStatus.js文件提供了一系列方法来控制加载中、错误、数据为空等状态，并在页面组件中引入和使用这些状态管理方法。