uni-app中监听网络状态，并在嵌入webView页面的组件中添加网络监测
uni-app中监听网络状态
下载插件
打开网络异常组件页面，点击"下载插件并导入HBuilderX"按钮，打开HBuilderX软件后，选择需要导入插件的项目，点击“确定即可”。
使用插件
<template>
<view class="content">
<mz-network-error @clickFn="hancleClick" message="当前无法连接网络,可检查网络设置是否正常."></mz-network-error>
</view>
</template>
import mzNetworkError from '@/components/mz-network-error/mz-network-error.vue'
components: {
mzNetworkError
},
methods: {
hancleClick() {
uni.navigateTo({
url: 'pages/network/index'
});
}
}
pages/network/index页面，仿照微信。
<template>
<view class="main-wrapper">
<view class="title">
未能连接到互联网
</view>
<view class="subtitle">
您的设备未启用移动网络或无线局域网
</view>
<view class="setting-content">
<view class="setting-content-title">如需要连接到互联网，请参考以下几点：</view>
<view class="setting-content-main">检查手机中的无线局域网设置，查看是否有可接入的无线局域网信号。</view>
<view class="setting-content-main">检查手机是否已接入移动网络，并且手机没有被停机。</view>
</view>
<view class="setting-content">
<view class="setting-content-title">如果您已接入无线局域网：</view>
<view class="setting-content-main">请检查您所连接的无线局域网热点是否已接入互联网，或该热点是否已允许您的设备访问互联网。</view>
</view>
</view>
</template>
<script>
</script>
<style scoped lang="scss">
.main-wrapper {
padding: 20rpx 40rpx;
.title {
font-size: 40rpx;
height: 100rpx;
line-height: 100rpx;
font-weight: bolder;
}
.subtitle {
font-size: 28rpx;
padding-bottom: 20rpx;
margin-bottom: 20rpx;
border-bottom: 1px solid rgba(151, 151, 151, 0.15);
}
.setting-content {
.setting-content-title {
font-size: 28rpx;
margin-bottom: 20rpx;
}
.setting-content-main {
font-size: 28rpx;
line-height: 44rpx;
padding-left: 60rpx;
margin-bottom: 20rpx;
position: relative;
&::before {
content: '';
position: absolute;
left: 40rpx;
top: 20rpx;
display: inline-block;
width: 10rpx;
height: 10rpx;
border-radius: 50%;
background: #000;
}
}
}
}
</style>
效果展示
在嵌入webView页面的组件中添加网络监测
修改网络监测组件mz-network-error
当网络状态发生变化时emit相关事件文章来源：https://www.toymoban.com/news/detail-662978.html
created() {
this.isNetworkCanUse(usable => {
this.show = !usable;
this.$emit('networkStatus', this.show);
});
uni.onNetworkStatusChange(res => {
this.show = !res.isConnected;
this.$emit('networkStatus', this.show);
});
},
修改组件调用
调用网络监测组件mz-network-error 时，绑定networkStatus事件，由于webview会覆盖整个页面，所以需要在监听到网络状态变化时手动修改webview距离顶部的top距离。文章来源地址https://www.toymoban.com/news/detail-662978.html
<mz-network-error @networkStatus="networkStatusChange" @clickFn="hancleClick"
message="当前无法连接网络,可检查网络设置是否正常."></mz-network-error>
<script>
import mzNetworkError from '@/components/mz-network-error/mz-network-error.vue'
export default {
components: {
mzNetworkError
},
data() {
return {
currentNetworkStatus: true, // true表示网络异常，false表示网络正常
webviewUrl: "***",
}
},
watch: {
currentNetworkStatus: {
handler(newVal) {
const top = newVal ? 120 : 64;
this.setWebviewTop(top)
},
deep: true,
immediate: true
},
},
methods: {
hancleClick() {
uni.navigateTo({
url: '/pages/network/index'
});
},
networkStatusChange(show) {
this.currentNetworkStatus = show
},
setWebviewTop(top) {
// #ifdef APP-PLUS
var currentWebview = this.$scope.$getAppWebview()
setTimeout(function() {
let wv = currentWebview.children()[0]
wv.setStyle({
top: top
})
}, 1000); //如果是页面初始化调用时，需要延时一下
// #endif
},
}
}
</script>
到了这里，关于uni-app中监听网络状态，并在嵌入webView页面的组件中添加网络监测的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
