// #ifdef APP-PLUS
uni.onNetworkStatusChange(function(res) {
    console.log('网络状态')
    console.log(res)
    var nt = res.networkType;
    if (nt == 'unknown' || nt == 'none') {

uni.showToast({
            title: '网络异常',
            icon: "none"
        });
        uni.navigateTo({
            url: '/pages/public/noNet'
        });
    } else {
        uni.showToast({
            title: `当前使用:${nt}网络`,
            icon: "none"
        });
    }
});
//#endif

noNet内容

<template>
    <view class="container">
        <view class="netless">
            <text class="iconfont icon-duanwang"></text>
            <view class="p">您好像处于离线状态,请重试</view>
            <view class="btn" @tap="check_net">点击重试</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                imageBaseUrl: '',
                info: []
            }
        },
        onLoad() {
            this.imageBaseUrl = this.$flyApi.IMG_URL;
        },
        methods: {
            check_net() {
                let _this = this;
                uni.getNetworkType({
                    success: function(res) {
                        console.log(res)
                        var nt = res.networkType;
                        if (nt == 'unknown' || nt == 'none') {
                            _this.$api.msg('网络异常,请检查网络设置!')
                        } else {
                            uni.navigateBack()
                        }
                    }
                });
            }
        }
    }
</script>

<style lang="scss">
    page{
        width: 100vw;
        height: 100vh;
        background: #fff;
    }
    .container {
        min-height: 100vh;
        background: #fff;
    }

    .netless {
        text-align: center;
        margin-top: 120px
    }

    .netless .p {
        padding: 30px 10px;
        font-size: 14px;
        color: #888;
    }

    .netless .btn {
        display: inline-block;
        height: 68upx;
        width: auto;
        padding: 0 28px;
        color: #BB1B21;
        border-radius: 8px;
        line-height: 68upx;
        font-size: 28upx;
        transition: all 0.3s;
        opacity: 0.9;
        border: 1px solid #BB1B21
    }

    .netless .btn:active {
        transition: all 0.3s;
        opacity: 1;
    }

    .icon-duanwang {
        font-size: 140upx;
        color: #BB1B21;
    }
</style>
 

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐