uni-app中监听网络状态,并在嵌入webView页面的组件中添加网络监测

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相关事件

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 @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-PLUSvar currentWebview = this.$scope.$getAppWebview()setTimeout(function() {let wv = currentWebview.children()[0]wv.setStyle({top: top})}, 1000); //如果是页面初始化调用时,需要延时一下// #endif},}}
</script>		

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/101010.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

selenium +Jmeter 的性能测试

通过Jmeter快速将已有的Selenium 代码以性能测试的方式组织起来&#xff0c;并使用JMeter 丰富的报表展示测试结果 from selenium import webdriver from selenium.webdriver.common.action_chains import ActionChains from selenium.webdriver.common.by import By driver …

第3步---MySQL的DDL和DML操作

第3步---MySQL的DDL和DML操作 1.DDL操作 Data Defination Language 数据定义语言。创建数据库和表的不涉及到数据的操作。 1.1DDL基本操作 1.1.1数据库相关操作 ddl&#xff1a;创建数据库&#xff0c;创建和修改表 对数据库常见的操作&#xff1a; 操作数据库 -- 展示数据…

C语言小练习(二)

&#x1f31e; “去努力吧&#xff0c;最坏的结果不过是大器晚成&#xff01;” Day02 &#x1f4dd; 一.选择题&#x1f4dd;二.编程题 &#x1f4dd; 一.选择题 1.&#x1f388;、以下程序段的输出结果是&#xff08; &#xff09; #include <stdio.h> int main() {…

【C语言】三子棋游戏——超细教学

&#x1f6a9;纸上得来终觉浅&#xff0c; 绝知此事要躬行。 &#x1f31f;主页&#xff1a;June-Frost &#x1f680;专栏&#xff1a;C语言 &#x1f525;该篇将结合之前的知识来实现 三子棋游戏。 目录&#xff1a; &#x1f31f;思路框架&#xff1a;测试游戏 &#x1f31f…

python爬虫9:实战2

python爬虫9&#xff1a;实战2 前言 ​ python实现网络爬虫非常简单&#xff0c;只需要掌握一定的基础知识和一定的库使用技巧即可。本系列目标旨在梳理相关知识点&#xff0c;方便以后复习。 申明 ​ 本系列所涉及的代码仅用于个人研究与讨论&#xff0c;并不会对网站产生不好…

微服务基础概念【内含图解】

目录 拓展补充&#xff1a; 单体架构 分布式架构 面向服务的体系结构 云原生 微服务架构 什么是微服务&#xff1f; 微服务定义 拓展补充&#xff1a; 单体架构 单体架构&#xff1a;将业务的所有功能集中在一个项目中开发&#xff0c;最终打成一个包部署 优点&#x…

leetcode1094. 拼车(差分数组-java)

差分数组 leetcode 1094 拼车差分数组代码演示&#xff1a; 前缀和数组 leetcode 1094 拼车 难度 - 中等 原题链接 - 拼车 车上最初有 capacity 个空座位。车 只能 向一个方向行驶&#xff08;也就是说&#xff0c;不允许掉头或改变方向&#xff09; 给定整数 capacity 和一个数…

探究Java spring中jdk代理和cglib代理!

面对新鲜事物&#xff0c;我们要先了解在去探索事物的本质-默 目录 一.介绍二者代理模式 1.1.Jdk代理模式 1.2cglib代理模式 1.3二者区别 1.3.1有无接口 1.3.2灵活性 1.4对于两种代理模式的总结 1.4.1jdk代理模式 1.4.2cglib代理模式 二.两种代理模式应用场景 2.1jd…

SMS 与 WhatsApp 营销,哪个方式最适合你的业务?

SMS和 WhatsApp营销越来越受欢迎&#xff0c;因为它们为企业提供了接触目标受众的有效方式。超过 91%的客户希望收到来自企业的 SMS消息&#xff0c;使用WhatsAppAPI发送的消息的打开率高达99% &#xff0c;这证明了这两种形式的消息传递对于希望及时与客户沟通的企业来说变得重…

软考高级架构师下篇-12层次式架构设计理论与实践

目录 1. 考情分析2. 层次式体系结构概述3. 表现层框架设计4. 中间层框架设计5. 数据访问层设计6. 数据架构规划与设计7. 物联网层次架构设计8. 前文回顾1. 考情分析 根据考试大纲,层次式架构设计理论与实践知识点会涉及单选题型(约占2~5分)和案例题(25分),本小时内容偏重于方…

以创新点亮前路,戴尔科技开辟数实融合新格局

编辑&#xff1a;阿冒 设计&#xff1a;沐由 2023年&#xff0c;对于戴尔科技而言是特殊的一年&#xff0c;这是戴尔科技进入中国市场第25个年头——“巧合”的是&#xff0c;这25年也是中国产业经济发展最快&#xff0c;人们工作与生活发生变化最大的四分之一个世纪。 2023年&…

特斯拉Model 3的七年狂飙

‍ 作者 | 张祥威 编辑 | 德新 发布一周拿下32万张订单&#xff0c;之后用时五年&#xff0c;交付量突破100万辆。粗略计算&#xff0c;自2016年发布至今&#xff0c;特斯拉Model 3已交付超150万辆。 放眼新能源赛道&#xff0c;如此战绩 别无二家。 Model 3踩中纯电动车的…

SpringBoot 配置优先级

一般而言&#xff0c;SpringBoot支持配置文件进行配置&#xff0c;即在resources下的application.properties或application.yml。 关于配置优先级而言&#xff0c; application.properties>application.yml>application.yaml 另外JAVA程序程序还支持java系统配置和命令行…

Apipost数据模型功能详解

在API设计和开发过程中&#xff0c;存在许多瓶颈&#xff0c;其中一个主要问题是在遇到相似数据结构的API时会产生重复性较多的工作&#xff1a;在每个API中都编写相同的数据&#xff0c;这不仅浪费时间和精力&#xff0c;还容易出错并降低API的可维护性。 为了解决这个问题&a…

乖宝宠物上市,能否打破外资承包中国宠物口粮的现实

近日&#xff0c;乖宝宠物上市了&#xff0c;这是中国宠物行业成功挂牌的第三家公司。同时&#xff0c;昨日&#xff0c;宠物行业最大的盛事“亚洲宠物展”时隔3年&#xff0c;于昨日在上海成功回归。 这两件事情的叠加可谓是双喜临门&#xff0c;行业能够走到今天实属不易&…

VLAN实验

思路&#xff1a;交换机改接口模式&#xff0c;通过hybrid混杂模式更改权限&#xff0c;路由器用子接口 根据题干分析&#xff0c;得pc1 :v2 pc2:v3456 pc3:v2 pc4:v34 pc5:v35 pc6:v36 pc2/4/5/6不能允许v2&#xff0c;pc1/2访问&#xff0c;是通过路由器查找的&#xff0c;…

不得不说API效率快,批量采集淘宝1688等商品详情页面数据

API接口获取数据有以下几个好处&#xff1a; 1. 数据的实时性&#xff1a;通过API接口获取数据可以实时获取最新的数据&#xff0c;保证数据的及时性。这对于需要及时更新数据的应用非常重要&#xff0c;比如股票行情、天气预报等。 2. 数据的准确性&#xff1a;通过API接口获…

drools8尝试

drools7升级到drools8有很大很大的变更.几乎不能说是一个项目了. 或者说就是名字相同的不同项目, 初看下来变化是这样 两个最关键的东西都retired了 https://docs.drools.org/8.42.0.Final/drools-docs/drools/migration-guide/index.html business central变成了一个VS code…

PDF怎么转Word?8 个最佳 PDF 转 Word 转换器

PDF 转 Word 转换工具只是一个特殊程序&#xff0c;可以将 PDF&#xff08;本机和/或扫描&#xff09;转换为 Microsoft Office Word 格式。将 PDF 导出到 Word 的主要原因之一是满足可编辑文档的需求&#xff0c;尽管还有其他原因。 由于缺少 PDF 阅读器&#xff0c;您可以选…

积跬步至千里 || 矩阵可视化

矩阵可视化 矩阵可以很方面地展示事物两两之间的关系&#xff0c;这种关系可以通过矩阵可视化的方式进行简单监控。 定义一个通用类 from matplotlib import pyplot as plt import seaborn as sns import numpy as np import pandas as pdclass matrix_monitor():def __init…