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
      })
      }
    }
    })
相关文章
|
3天前
|
机器学习/深度学习 数据采集 自然语言处理
理解并应用机器学习算法:神经网络深度解析
【5月更文挑战第15天】本文深入解析了神经网络的基本原理和关键组成,包括神经元、层、权重、偏置及损失函数。介绍了神经网络在图像识别、NLP等领域的应用,并涵盖了从数据预处理、选择网络结构到训练与评估的实践流程。理解并掌握这些知识,有助于更好地运用神经网络解决实际问题。随着技术发展,神经网络未来潜力无限。
|
1天前
|
Shell Android开发
|
3天前
|
开发框架 网络协议 Java
【计算机网络】—— 网络应用通信基本原理
【计算机网络】—— 网络应用通信基本原理
8 0
|
3天前
|
移动开发 JavaScript 前端开发
uni-app和Vue.js二者之间有什么区别?
1. uni-app是一个使用Vue.js开发所有前端应用的框架,支持一次编译多端运行。开发者编写的基础代码只需进行一次编写,就可以发布到多个平台,包括App、H5、微信小程序等。 2. Vue.js是一个渐进式JavaScript框架,用于构建用户界面。与其他大型框架不同的是,Vue被设计为可以自底向上逐层应用。
6 0
|
3天前
|
存储 安全 算法
网络安全与信息安全:防范漏洞、应用加密技术与培养安全意识
【5月更文挑战第10天】在数字化时代,网络安全与信息安全已成为维护社会稳定、保障个人隐私和确保企业资产的关键。面对日益复杂的网络威胁,本文深入探讨了网络安全漏洞的成因与影响、加密技术的基本原理与应用,以及提升全民网络安全意识的必要性和方法。通过分析当前网络安全形势,提供了一系列针对性的技术解决方案和管理策略,旨在为读者构建一个全方位的网络安全防护体系。
11 1
|
3天前
|
XML 开发框架 .NET
C#/ASP.NET应用程序配置文件app.config/web.config的增、删、改操作
C#/ASP.NET应用程序配置文件app.config/web.config的增、删、改操作
14 1
|
3天前
|
安全
AC/DC电源模块在通信与网络设备中的应用的研究
AC/DC电源模块在通信与网络设备中的应用的研究
AC/DC电源模块在通信与网络设备中的应用的研究
|
3天前
BOSHIDA AC/DC电源模块在通信与网络设备中的应用研究
BOSHIDA AC/DC电源模块在通信与网络设备中的应用研究
BOSHIDA AC/DC电源模块在通信与网络设备中的应用研究
|
3天前
|
监控 安全 算法
网络安全与信息安全:防范漏洞、应用加密技术及提升安全意识
【5月更文挑战第8天】 在数字化时代,网络安全与信息安全已成为我们不可忽视的问题。本文将深入探讨网络安全漏洞的产生原因及其危害,加密技术的种类和应用,以及提升个人和企业的安全意识的重要性。通过对这些方面的知识分享,旨在帮助读者更好地理解网络安全的重要性,提高防范意识,保护个人信息和数据安全。
|
3天前
【评分标准】【网络系统管理】2019年全国职业技能大赛高职组计算机网络应用赛项H卷 无线网络勘测设计
【评分标准】【网络系统管理】2019年全国职业技能大赛高职组计算机网络应用赛项H卷 无线网络勘测设计
【评分标准】【网络系统管理】2019年全国职业技能大赛高职组计算机网络应用赛项H卷 无线网络勘测设计

热门文章

最新文章