uniapp网络检测
// #ifdef APP-PLUSuni.onNetworkStatusChange(function(res) {console.log('网络状态')console.log(res)var nt = res.networkType;if (nt == 'unknown' || nt == 'none') {title: '网...
// #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>
更多推荐
所有评论(0)