uni-app(三）网络状态监听和显示控制

水深无声 2022-12-21 09:28 1241阅读 0赞

手机可能处于无网络的状态，则需要app界面进行提醒用户。  
效果大概如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70_pic_center]

第一步：界面引入个公共组件，该组件也就是所有app页面都需要引入的一个组件。

<go-common-module  :hasTopBar="false" ></go-common-module>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70_pic_center 1]  
第二步：go-common-module界面里面去检查网络和监听网络，再根据网络的返回情况进行相应的展示。

mounted(){
                //检测网络状态
                uni.getNetworkType({
                    success:  (res)=>{
                        this.showNetState(res.networkType);
                    }
                });
                //监听网络状态变化
                uni.onNetworkStatusChange( (res)=>{
                    this.showNetState(res.networkType);
                });
            },

go-common-module的全部代码细节如下。

<template>
        <view>
            <view v-show="netErrorFlag" class="net-error-msg" style="position: absolute;top:0;z-index: 999999;width: 100%" :style="extendSty">
                <u-alert-tips :descStyle="{color:'#dd6c4c'}" type="error" icon="goingwangluocuowu" :showIcon="true" :description="description"></u-alert-tips>
            </view>
            
            <go-loading></go-loading>
            <u-toast type="error" ref="uToast"></u-toast>
        </view>
    </template>
    
    <script>
        import goLoading  from "@/components/go-loading/go-loading.vue"
        import {mapState} from "vuex";
        import GoingUtils from "../../utils/GoingUtils";
    
        export default {
            components:{
                goLoading,
            },
            data() {
               return {
                   netErrorFlag:false,
                   description:'网络连接发生问题，请检查网络连接',
               }
            },
            mounted(){
                //检测网络状态
                uni.getNetworkType({
                    success:  (res)=>{
                        this.showNetState(res.networkType);
                    }
                });
                //监听网络状态变化
                uni.onNetworkStatusChange( (res)=>{
                    this.showNetState(res.networkType);
                });
            },
            props:{
                hasTopBar: {
                    type: Boolean,
                    default: true
                },
            },
            computed: {
                extendSty(){
                    let sty={};
                    if(this.hasTopBar===false){
                        sty["top"]="25px";
                    }
                    return sty;
                },
                ...mapState({
                    flushErrorMsg: state => state.flushErrorMsg,
                    flushInfoMsg:state => state.flushInfoMsg,
                    infoMsg: state => state.infoMsg,
                    errorMsg: state => state.errorMsg
                })
            },
            methods:{
                //显示网络状态
                showNetState(state){
                    if(state==='none'){
                        this.netErrorFlag=true;
                    }else{
                        this.netErrorFlag=false;
                    }
                }
            },
           watch:{
               flushInfoMsg(nval){
                   this.$refs.uToast.show({
                       title: this.infoMsg,
                       position: 'top',
                       type: 'success',
                   });
               },
               flushErrorMsg(nval){
                   this.$refs.uToast.show({
                       title: this.errorMsg,
                       position: 'top',
                       type: 'error',
                   });
               }
           }
        };
    </script>
    <style>
        .net-error-msg .u-alert-tips{
            border-radius: 0 !important;
            border:0 !important;
        }
        .net-error-msg .u-alert-desc{
            color: #DD6C4C !important;
        }
    </style>

这样就实现了网络是否可以使用的提醒。

hasTopBar属性需要注意下，就是有些界面是没有顶部工具栏的，如果都统一top：0则会导致手机的提示栏跟网络提示栏重叠，所以需要通过这个参数干扰下。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/ae9df3a878a1479b987b068908129647.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/ebfd50d9fa1043658535215e5f738c00.png