网站建设 武讯科技,网站设计方案怎么写,无锡制作网站价格,大型网站建设报价方案uni-app中监听网络状态#xff0c;并在嵌入webView页面的组件中添加网络监测
uni-app中监听网络状态
下载插件
打开网络异常组件页面#xff0c;点击下载插件并导入HBuilderX按钮#xff0c;打开HBuilderX软件后#xff0c;选择需要导入插件的项目#xff…uni-app中监听网络状态并在嵌入webView页面的组件中添加网络监测
uni-app中监听网络状态
下载插件
打开网络异常组件页面点击下载插件并导入HBuilderX按钮打开HBuilderX软件后选择需要导入插件的项目点击“确定即可”。
使用插件
templateview classcontentmz-network-error clickFnhancleClick 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页面仿照微信。 templateview classmain-wrapperview classtitle未能连接到互联网/viewview classsubtitle您的设备未启用移动网络或无线局域网/viewview classsetting-contentview classsetting-content-title如需要连接到互联网请参考以下几点/viewview classsetting-content-main检查手机中的无线局域网设置查看是否有可接入的无线局域网信号。/viewview classsetting-content-main检查手机是否已接入移动网络并且手机没有被停机。/view/viewview classsetting-contentview classsetting-content-title如果您已接入无线局域网/viewview classsetting-content-main请检查您所连接的无线局域网热点是否已接入互联网或该热点是否已允许您的设备访问互联网。/view/view/view
/templatescript
/scriptstyle scoped langscss.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相关事件 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距离。 mz-network-error networkStatusnetworkStatusChange clickFnhancleClickmessage当前无法连接网络,可检查网络设置是否正常./mz-network-error
scriptimport mzNetworkError from /components/mz-network-error/mz-network-error.vueexport 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-PLUSvar currentWebview this.$scope.$getAppWebview()setTimeout(function() {let wv currentWebview.children()[0]wv.setStyle({top: top})}, 1000); //如果是页面初始化调用时需要延时一下// #endif},}}
/script
