Monitor the network status in uni-app, and add network monitoring to the component embedded in the webView page
Monitor network status in uni-app
download plugin
Open the web anomaly component page, click the "Download plug-in and import HBuilderX" button, open the HBuilderX software, select the project that needs to import the plug-in, and click "OK".
use plugin
<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'
});
}
}
The pages/network/index page is modeled after WeChat.
<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>
Show results
Add network monitoring to components embedded in webView pages
Modify the network monitoring component mz-network-error
emit related events when the network state changes
created() {
this.isNetworkCanUse(usable => {
this.show = !usable;
this.$emit('networkStatus', this.show);
});
uni.onNetworkStatusChange(res => {
this.show = !res.isConnected;
this.$emit('networkStatus', this.show);
});
},
Modify component calls
When calling the network monitoring component mz-network-error, bind the networkStatus event. Since the webview will cover the entire page, you need to manually modify the top distance from the webview to the top when monitoring network status changes.
<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>