uni-app:网络状态监测之onNetworkStatusChange与getNetworkType的区别与应用

简介: 1、在实际项目开发中,难免涉及到监测网络,下面来具体了解下小程序两种监测网络的方法。2、这里配置的是 uniapp,微信小程序把 uni. 换成 wx. 即可。

前言


1、在实际项目开发中,难免涉及到监测网络,下面来具体了解下小程序两种监测网络的方法。

2、这里配置的是 uniapp,微信小程序把 uni. 换成 wx. 即可。


二、应用说明


2.1、uni. onNetworkStatusChange

触发时机:在网络切换的时候执行,切换2G,3G,WiFi的时候会执行。

应用时机:一般都会放在 onShow里面,实时监听网络的切换。当小程序关闭后台的时候在 onHide 生命周期函数中 执行 【uni.offNetworkStatusChange()】关闭监听网络。


小程序模拟器怎么进行切换网络呢?如下图:

7b9ad311c32644d3b3254ca30b81bea6.png


2.2、uni.getNetworkType

触发时机:在页面初始化的时候,或者是在方法执行的时候执行。

应用时机:可以再onShow 、onLoad这样的生命周期里面来执行,也可以在点击事件中添加执行,属于即用即取的。


三、场景应用


可根据自己的项目需求,进行自行配置调整即可。uni.getNetworkType && uni.onNetworkStatusChange 使用区别见上方。


1、监听网络状态:


onShow: function() {
  /// 获取基本配置信息
  this.iConfigDataOnShow();
},
onHide: function() {
  this.iConfigDataOnHide(e);
},
methods: {
  /// 获取基本配置信息
  iConfigDataOnShow() {
    let that = this;
    /// 获取网络类型
    uni.getNetworkType(function(res) {
    that.iNetworkStatus(res)
    });
    /// 监听网络状态变化
    uni.onNetworkStatusChange(function(res) {
    that.iNetworkStatus(res)
    });
    /// 获取当前的地理位置、速度。
    uni.getLocation({
    type: 'gcj02',
    success: function(res) {
      that.iLocation(res)
    },
    });
  },
  /// 关闭基本配置信息监听
  iConfigDataOnHide() {
    let that = this;
    /// 取消监听网络状态变化。
    uni.offNetworkStatusChange(function(res) {
    that.iNetworkStatus(res)
    });
  },
  /// 获取网络状态
  iNetworkStatus(res) {
    /* {
    "errMsg":"getNetworkType:ok",
    "networkType":"wifi"
     } */
    var __netType = '';
    //网络状态  1=wifi 2=蜂窝网络(2g) 3=3g 4=4g 5=5g 6=有线网络 7=unknown 0=无网络
    switch (res.networkType) {
      case 'wifi':
      __netType = 1;
      break;
      case '2g':
      __netType = 2;
      break;
      case '3g':
      __netType = 3;
      break;
      case '4g':
      __netType = 4;
      break;
      case '5g':
      __netType = 5;
      break;
      case 'ethernet':
      __netType = 6;
      break;
      case 'unknown':
      __netType = 7;
      break;
      case 'none':
      __netType = 0;
      break;
      default:
      break;
    }
    this.$scope.globalData.logNet = __netType;
    console.log(res.networkType);
    },
  /// 获取定位信息
  iLocation(res) {
    /* {
    "latitude":24.44579,
    "longitude":118.08243,
    "speed":-1,
    "accuracy":65,
    "verticalAccuracy":65,
    "horizontalAccuracy":65,
    "errMsg":"getLocation:ok"
    } */
    this.$scope.globalData.logLocate = res;
  },
  }


2、获取网络状态


uni.getNetworkType({
    success: function (res) {
      console.log("---res",res.networkType);
      if(res.networkType != 'wifi' && res.networkType != 'none') {
      uni.showToast({
        title: '正在使用流量播放',
        icon:'none',
        duration:3000
      })
      }else if(res.networkType == 'none') {
      console.log("无网络");
      uni.showToast({
        title: '网络异常,请稍后再试',
        icon:'none',
        duration:3000
      })
      }
    }
    })
相关文章
|
15天前
|
数据采集 存储 JSON
Python网络爬虫:Scrapy框架的实战应用与技巧分享
【10月更文挑战第27天】本文介绍了Python网络爬虫Scrapy框架的实战应用与技巧。首先讲解了如何创建Scrapy项目、定义爬虫、处理JSON响应、设置User-Agent和代理,以及存储爬取的数据。通过具体示例,帮助读者掌握Scrapy的核心功能和使用方法,提升数据采集效率。
59 6
|
9天前
|
监控 安全
公司上网监控:Mercury 在网络监控高级逻辑编程中的应用
在数字化办公环境中,公司对员工上网行为的监控至关重要。Mercury 作为一种强大的编程工具,展示了在公司上网监控领域的独特优势。本文介绍了使用 Mercury 实现网络连接监听、数据解析和日志记录的功能,帮助公司确保信息安全和工作效率。
78 51
|
5天前
|
SQL 安全 前端开发
PHP与现代Web开发:构建高效的网络应用
【10月更文挑战第37天】在数字化时代,PHP作为一门强大的服务器端脚本语言,持续影响着Web开发的面貌。本文将深入探讨PHP在现代Web开发中的角色,包括其核心优势、面临的挑战以及如何利用PHP构建高效、安全的网络应用。通过具体代码示例和最佳实践的分享,旨在为开发者提供实用指南,帮助他们在不断变化的技术环境中保持竞争力。
RS-485网络中的标准端接与交流电端接应用解析
RS-485,作为一种广泛应用的差分信号传输标准,因其传输距离远、抗干扰能力强、支持多点通讯等优点,在工业自动化、智能建筑、交通运输等领域得到了广泛应用。在构建RS-485网络时,端接技术扮演着至关重要的角色,它直接影响到网络的信号完整性、稳定性和通信质量。
|
6天前
|
机器学习/深度学习 人工智能 算法框架/工具
深度学习中的卷积神经网络(CNN)及其在图像识别中的应用
【10月更文挑战第36天】探索卷积神经网络(CNN)的神秘面纱,揭示其在图像识别领域的威力。本文将带你了解CNN的核心概念,并通过实际代码示例,展示如何构建和训练一个简单的CNN模型。无论你是深度学习的初学者还是希望深化理解,这篇文章都将为你提供有价值的见解。
|
6天前
|
网络协议 数据挖掘 5G
适用于金融和交易应用的低延迟网络:技术、架构与应用
适用于金融和交易应用的低延迟网络:技术、架构与应用
31 5
|
7天前
|
开发框架 监控 .NET
【Azure App Service】部署在App Service上的.NET应用内存消耗不能超过2GB的情况分析
x64 dotnet runtime is not installed on the app service by default. Since we had the app service running in x64, it was proxying the request to a 32 bit dotnet process which was throwing an OutOfMemoryException with requests >100MB. It worked on the IaaS servers because we had the x64 runtime install
|
6天前
|
运维 物联网 网络虚拟化
网络功能虚拟化(NFV):定义、原理及应用前景
网络功能虚拟化(NFV):定义、原理及应用前景
21 3
|
6天前
|
数据可视化 算法 安全
员工上网行为管理软件:S - PLUS 在网络统计分析中的应用
在数字化办公环境中,S-PLUS 员工上网行为管理软件通过精准的数据收集、深入的流量分析和直观的可视化呈现,有效帮助企业管理员工上网行为,保障网络安全和提高运营效率。
15 1
|
14天前
|
数据采集 监控 数据可视化
Fortran 在单位网络监控软件数据处理中的应用
在数字化办公环境中,Fortran 语言凭借其高效性和强大的数值计算能力,在单位网络监控软件的数据处理中展现出独特优势。本文介绍了 Fortran 在数据采集、预处理和分析可视化三个阶段的应用,展示了其在保障网络安全稳定运行和有效管理方面的价值。
45 10