关于前端:uniapp项目实践总结十一自定义网络检测组件

导语：很多时候手机设施会忽然没网, 这时候就须要一个网络检测组件, 在没网的时候显示提醒用户, 提供用户体验。

目录

• 筹备工作
• 原理剖析
• 组件实现
• 实战演练
• 案例展现

筹备工作

• 在 components 新建一个 q-online 文件夹，并新建一个 q-online.vue 的组件；
• 依照前一篇所说的页面构造，编写好预约的网络检测页面；

原理剖析

次要是应用 uni.onNetworkStatusChange 来判断网络状态，而后依据状态调整页面款式显示网络提醒。

组件实现

筹备工作和原理剖析实现后，接下来写一个网络检测页面。

模板局部

这里提供了两种提醒，一种是全屏显示，一种是顶部显示，反对自定义插槽。

<view class="q-online" v-if="show">
  <slot name="content">
    <view :class="{'q-online-inner': true, [props.type]: true}">
      <q-icon
        class="q-online-icon"
        :name="props.type =='top'?'info-circle':'wifi'":size="props.type == 'top' ? 20 : 52"color="#f30d0d" />
      <text class="q-online-txt"> 您的网络已断开，请查看连贯!</text>
    </view>
  </slot>
</view>

款式局部

.q-online {
  .q-online-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100rpx;
    background: $netBg;
    .q-online-icon {margin-right: 20rpx;}
    .q-online-txt {
      color: $netColor;
      font-size: 30rpx;
    }
    &.full {
      position: absolute;
      top: 0;
      left: 0;
      flex-direction: column;
      height: 100%;
      background: $white;
      z-index: 39;
      .q-online-txt {
        margin-top: 30rpx;
        font-size: 36rpx;
      }
    }
  }
}

脚本局部

• 引入依赖包和属性设置

import {ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";

// 页面属性
let show = ref(false);

// 显示类型
const props = defineProps({
  type: {
    type: String,
    default: "top", // top 顶部 full 全屏
  },
});

// 状态发送
const emits = defineEmits(["change"]);

• 办法定义

// 页面办法

// 显示
onLoad((option) => {checkNet();
});

// 检测网络
function checkNet() {uni.onNetworkStatusChange((res) => {
    const status = res.isConnected;
    show.value = !status;
    emits("change", status);
    let title = status ? "网络已连贯!" : "网络已断开!",
      icon = status ? "success" : "error";
    uni.showToast({
      title,
      icon,
    });
  });
}

实战演练

模板应用

<!-- 顶部格调 -->
<q-online type="top" />
<!-- 全屏格调 -->
<q-online type="full" @change="getNetStatus" />

脚本应用

// 获取网络状态
function getNetStatus(val) {console.log(` 网络状态：${val ? "有网" : "无网"}`);
}

案例展现

• 顶部成果
• 全屏成果

最初

以上就是自定义网络检测组件的次要内容，有不足之处，请多多斧正。